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

user_5319542 0
Viewed 172

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(),
  
);

enter image description here

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

enter image description here

flutter-web flutter-layout flutter
1 Answers

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(
user_101571270
Related