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()],
),
)
],
),
));
}
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.
SliverAppBar is a Material Design widget in flutter which gives scrollable or collapsible app-bar. The word Sliver is given to scrollable areas here. SliverAppBar basically gives us means to create an app-bar that can change appearance, blend in the background, or even disappear as we scroll.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With