Boxshadow appears behind other widgets
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(''),
)
),
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.