CODEWITHSUNDEEP
flutterflutter-layout
Magnus
Magnus

Reputation: 18758

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:

enter image description here

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.

Upvotes: 12

Views: 3283

Answers (2)

bytesizedwizard
bytesizedwizard

Reputation: 6033

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.

Upvotes: 2

Ryosuke
Ryosuke

Reputation: 3892

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

Upvotes: 2

Related Questions