Boxshadow appears behind other widgets

问题

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.

回答1:

It is happening because since you are using an Expanded widget inside Column, it is taking up all the available space on the screen and hence it looks like it is overlapping the Container but actually it's just overlapping the shadow.

Instead of a Column widget, use a Stack to show the Container above the ListView. You can use Positioned widget to position the child widgets of the Stack.

But in this case, make sure you put the Container code after the ListView code so that it would always be on top.

Example:

Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(10),
      child: _buildCheckpointListView(context, model)
    ),
    Positioned(
      top: 0.0, //To align Container at the top of screen
      left: 0.0,
      right: 0.0,
      child: 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(''),
        )
     ),
    ),
  ]
)

You can also wrap you ListView inside a Positioned widget if you want to provide a certain margin from top.

回答2:

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(''),
          )
      ),

来源：https://stackoverflow.com/questions/55296771/boxshadow-appears-behind-other-widgets

标签

Flutter

flutter-layout