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

user_14300343 0
Viewed 751

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,
            ),
          ),
        ],
      ),
    );
  }
}

App now

app how I want it to be

more txt for the stack valid my questions

dart flutter
3 Answers

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),
),
user_121566370

A contribution to omar hatem answer, the property "size" should be "preferredSize"

bottom: PreferredSize(
                    preferredSize: Size(double.infinity, 5),
                    child: Divider(color: Colors.black),
                  ),
user_110952970

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!

user_15061040
Related