Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Card has white bar at bottom

Tags:

flutter

I get a white line at the bottom of my Card and I can't figure out how to get rid of it.

enter image description here

This is my code:

return Card(
  margin: EdgeInsets.all(10),
  elevation: 8,
  semanticContainer: true,
  clipBehavior: Clip.antiAliasWithSaveLayer,
  child: Stack(
    alignment: Alignment.bottomCenter,
    children: <Widget>[
      Image.asset(
        'assets/push.jpg',
        fit: BoxFit.cover,
      ),
      LinearProgressIndicator(
        value: 0.8,
      ),
    ],
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)
  ),
);

Any ideas?

Edit: I found out this problem has something to do with the height of the Stack. I have this problem as well with the following code:

return Card(
  margin: EdgeInsets.all(10),
  elevation: 10,
  semanticContainer: true,
  clipBehavior: Clip.antiAliasWithSaveLayer,
  child: Column(
    children: <Widget>[
      Container(
        color: Colors.red,
        height: 270,
      ),
      LinearProgressIndicator(
        value: 0.8,
      ),
    ]
  ),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)
  ),
);

But weirdly not when I change the height of the Container to 200...

Edit 2: With diegoveloper code it looks like this:

enter image description here

like image 713
Jonas Avatar asked Jan 07 '19 18:01

Jonas


Video Answer


1 Answers

Try using elevation less or equals than 5

        Container(
                  height: 300.0,
                  width: MediaQuery.of(context).size.width,
                  child: Card(
                    elevation: 5,
                    margin: EdgeInsets.all(10),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: Column(children: <Widget>[
                      Container(
                        color: Colors.red,
                        height: 270,
                      ),
                        LinearProgressIndicator(
                          value: 0.8,
                        ),
                    ]),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                  )),
like image 199
diegoveloper Avatar answered Sep 29 '22 22:09

diegoveloper