Search code examples
dartflutterflutter-layoutflutter-sliver

How to add Drawer for SliverAppBar


This is my code, copied from here:

SliverAppBar(
  expandedHeight: 150.0,
  flexibleSpace: const FlexibleSpaceBar(
      title: Text('Available seats'),
    ),
    actions: < Widget > [
      IconButton(
        icon: const Icon(Icons.add_circle),
          tooltip: 'Add new entry',
          onPressed: () { /* ... */ },
      ),
    ]
)

But I need to add a Drawer. How can I do that?
I am trying to rebuild my app in Flutter.
Converting java android app to flutter

I replaced the icon but how can I create a Drawer?

leading: IconButton(icon: Icon( Icons.menu ),onPressed: ()=>{},)

My full code

@override
  Widget build(BuildContext context) {

  return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () => {},
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () => {},
                icon: Icon(Icons.shopping_cart),
              )
            ],
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("My Pet Shop",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: Image.network(
                  "https://firebasestorage.googleapis.com/v0/b/my-pet-world.appspot.com/o/images%2Fbannerads%2FxTmAblJI7fMF1l0nUa1gM32Kh9z1%2F734rm6w7bxznp%2FPETWORLD-HOME-SLIDER-KITTENS.webp?alt=media&token=cf7f48bb-6621-47b3-b3f8-d8b36fa89715",
                  fit: BoxFit.cover,
                )),
          ),
        ];
      },
      body: Container(
        margin: EdgeInsets.only(top: 0),
        child: Column(
          children: <Widget>[
            Expanded(
              //getHomePageWidget()
              child: ListView(
                padding: EdgeInsets.all(0.0),
                children: <Widget>[getHomePageWidget()],
              ),
            )
          ],
        ),
      ));
 }

Solution

  • Drawer is a property for Scaffold. Once you set a drawer property, the menu icon will automatically appear in the SliverAppBar.

    Return this inside your build method, and you will get what you are looking for.

      return Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: Text('Available seats'),
              ),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.add_circle),
                  tooltip: 'Add new entry',
                  onPressed: () {},
                ),
              ],
            ),
            SliverList(
              delegate: SliverChildListDelegate([
                getHomePageWidget(),
              ]),
            ),
          ],
        ),
        drawer: Drawer(),
      );
    

    NOTE: if you have multiple Scaffold in the tree above the CustomScrollView than the Drawer should be in the most bottom Scaffold