Flutter - BoxShadow on dark theme doesn't render correctly

Viewed 1096

Using a box shadow on a container doesn't seem to render correctly. If I change the background to white - the shadow fades out like normal but on a darker background - the effect looks like this

enter image description here

Here is my code HomeScreen (Parent Widget)

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: kDarkBackground, // (#181818)
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          AlphaCard(),
        ]
      )
    );
  }
}

Child widget (Where the shadow is rendered)

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AlphaCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(20, 40, 20, 20),
      child: Container(
            height: 166,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
        color: kCardBackground,
        borderRadius: BorderRadius.all(
          Radius.circular(10),
        ),
        boxShadow: [
          BoxShadow(
              color: Colors.black,
              spreadRadius: 0,
              blurRadius: 15,
              offset: Offset(0, 10))
        ]
      ),
            child: Padding(
      padding: EdgeInsets.all(20.0),
      child: Text('Test'),
            )),
    );
  }
}
0 Answers
Related