Why it shows two AppBars after adding 'Sliver AppBar' in flutter App

Question

I have added 'Sliver AppBar' into Scaffold of my app and I am wondering why it shows two app bars now. The Scaffold contains only one drawer but in UI , it shows two drawers. Anybody know what is going wrong.

return Scaffold( body: CustomScrollView( slivers: <Widget>[ SliverAppBar( bottom: AppBar( title: SizedBox( height: 45, child: TextField( decoration: InputDecoration( contentPadding: EdgeInsets.only(top: 5, left: 15), suffixIcon: IconButton( icon: Icon(Icons.search), onPressed: () { }, ), filled: true, fillColor: Colors.white, hintText: "What are you looking for ?", border: OutlineInputBorder( borderRadius: BorderRadius.circular(5), ), ), ), ), ), ), drawer: Drawer(), );

After removing SliverAppBar from the code, it shows blank screen. So, it is confirmed that the two AppBars are coming from above code only.

Md. Yeasin Sheikh · Accepted Answer · 2022-01-30 05:41:37Z

1

SliverAppBar itself a appBar and bottom: AppBar is another one, you can use PreferredSize on bottom.

SliverAppBar( bottom: PreferredSize( preferredSize: Size.fromHeight(45), child: TextField(

answered Jan 30, 2022 at 5:41

Md. Yeasin Sheikh

64.8k7 gold badges49 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chk.buddi Over a year ago

Thanks @Yeasin , it works. SliverAppBar( bottom: PreferredSize( preferredSize: const Size.fromHeight(45), child: SizedBox( height: 45, child: TextField(

Collectives™ on Stack Overflow

Why it shows two AppBars after adding 'Sliver AppBar' in flutter App

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related