How can I create a line under the SliverAppBar in flutter? - flutter

Question

I would like to add a line under the appbar as in image two.
How can I make this line in flutter?
The image one is the app now and the image two is the line under the sliverAppBar
*already tried to use a container and a divider
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: SvgPicture.asset(
'assets/icons/home_icon.svg',
color: Colors.black,
),
onPressed: () {}
),
actions: [
IconButton(
icon: SvgPicture.asset(
'assets/icons/search_icon.svg',
color: Colors.black,
),
onPressed: () {
}
),
IconButton(
icon: SvgPicture.asset(
'assets/icons/shopping_bag_icon.svg',
color: Colors.black,
),
onPressed: () {},
),
IconButton(
icon: SvgPicture.asset(
'assets/icons/profile_icon.svg',
color: Colors.black,
),
onPressed: () {}
),
],
floating: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item #$index')),
childCount: 1000,
),
),
],
),
);
}
}
more txt for the stack valid my questions

Answer 1

There is a 'bottom' attribute in the SliverAppBar Widget which takes a preferred size Widget, you can give it the following:
bottom: PreferredSize(
preferredSize: Size(double.infinity, 5),
child: Divider(color: Colors.black),
),

Answer 2

A contribution to omar hatem answer, the property "size" should be "preferredSize"
bottom: PreferredSize(
preferredSize: Size(double.infinity, 5),
child: Divider(color: Colors.black),
),

Answer 3

In my case, I needed more control over my line under the app bar sliver so I ended up implementing like so:
SliverPersistentHeader(
pinned: true,
delegate: MySliverElevationDelegate(
child: Material(
//elevation: 4.0,
child: Container(
color: Colors.black,
),
),
),
)
Cheers!