Remove horizontal shadow of Material widget in Flutter - flutter

Question

After adding elevation to Material widget, I want to keep only the bottom shadow. Don't want the left and right side shadow. How to achieve this?
Here is my code :
// searchbar
child: Material(
color: Colors.transparent,
elevation: 5.0,
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
color: AppColors.searchBoxColor,
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
// searchfield
Expanded(
child: Container(
alignment: Alignment.center,
height: AppBar().preferredSize.height,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Hint Text",
),
),
),
),
],
),
),
),

Answer 1

You cannot do that with elevation because that will inevitably cast the shadows as if a piece of paper is elevated in air.
What you can do is to add a custom shadow using a BoxShadow. If you're using a RaisedButton, for example, you can change to use a FlatButton with a Container with a BoxDecoration. Here is an example of that:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: Text('Button With Elevation'),
textColor: Colors.white,
color: Colors.red,
onPressed: () {},
elevation: 12.0,
),
SizedBox(
height: 32.0,
),
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(0.0, 6.0),
color: Colors.grey.withOpacity(0.3),
blurRadius: 5.0,
),
]
),
child: FlatButton(
child: Text('Button With Custom Shadow'),
textColor: Colors.white,
color: Colors.red,
onPressed: () {},
),
),
],
),
),
),
);
}
}
And here is the result:
By specifying the values of your Offset you can change the direction to where the shadow will cast.
UPDATE:
I saw your code later. Here is how you implement BoxShadow with your code:
child: Material(
color: Colors.transparent,
elevation: 0.0,
child: Container(
decoration: BoxDecoration(
color: AppColors.searchBoxColor,
boxShadow: [
BoxShadow(
offset: Offset(0.0, 12.0),
color: Colors.grey.withOpacity(0.3),
blurRadius: 5.0,
),
],
),
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
Expanded(
child: Container(
alignment: Alignment.center,
height: AppBar().preferredSize.height,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Hint Text",
),
),
),
),
],
),
),
),

Answer 2

You can customize the shadow using the boxShadow property of the Container, here an example:
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
offset: Offset(0, 5),
blurRadius: 5,
color: Colors.grey,
),
],
),
),