Flutter card elevation not applying on card top-CodePudding

When adding a container inside a card widget then elevation of card is not applying on top of card.

Card(
  elevation: 10,
  shadowColor: Colors.green,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12.0),
  ),
  child: Column(
    children: <Widget>[
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // widget goes here
          ],
        ),
      ),
      SizedBox(
        height: 20,
      ),
      // some more widgets
    ],
  ),
);

CodePudding user response：

Consider using Container decoration instead of Card elevation

return Container(
  margin: EdgeInsets.all(50),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(12)),
    boxShadow: [
      BoxShadow(
        color: Colors.green.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
child:Column(), //your widget here
)

CodePudding user response：

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Align(
        alignment: AlignmentDirectional.topCenter,
        child: Container(
          height: 200,
          width: 200,
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  color: Colors.cyan,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("SOMETHING")
                      // widget goes here
                    ],
                  ),
                ),
              ],
            ),
            color: Colors.orange,
            elevation: 10,
            shadowColor: Colors.green,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12.0),
            ),
          ),
        ),
      )),
    );
  }