Boxshadow appears behind other widgets

Question

I have a Container with a BoxShadow decoration at the top of a page, and below the Container is a ListView with a number of Cards in it. I want the top Container to have a drop shadow that appears in front of the items in the ListView, but this is what I get:

The drop shadow seems to appear behind the Cards instead of in front of it. This is the code:

Widget _buildBody(BuildContext context, ChecklistModel model){
    return Container(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                Container(
                    decoration: BoxDecoration(
                        color: Colors.red.shade200,
                        boxShadow: [BoxShadow(
                            color: Colors.red.shade200,
                            offset: Offset(0, 10),
                            blurRadius: 10,
                            spreadRadius: 10
                        )]
                    ),
                    child: ListTile(
                        title: Text(''),
                    )
                ),
                Expanded(child: Padding(
                    padding: const EdgeInsets.all(10),
                    child: _buildCheckpointListView(context, model))
                )
            ],
        )
    );
}

I also tried replacing the Container with a Card, but that didn't work either.

Answer 1

Give a bottom margin to the container to introduce some empty space between container and bottom siblings. Like this :

        Container(
        margin: EdgeInsets.only(bottom: 20),
          decoration: BoxDecoration(
              color: Colors.red.shade200,
              boxShadow: [BoxShadow(
                  color: Colors.red.shade200,
                  offset: Offset(0, 10),
                  blurRadius: 10,
                  spreadRadius: 10
              )]
          ),
          child: ListTile(
            title: Text(''),
          )
      ),