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.

Solution

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(

Comments

[chk.buddi]

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