How to add notch to TabBar to place FloatingActionButton in it

Question

I would like to create a notch inside the TabBar to place the FloatingActionBottom in it but I don't know how to do that.

I found nothing in the documentations or on the internet.

score 3 · Answer 1 · edited Aug 16 '18 at 17:57

You can use the Bottom App Bar for this kind of User Interface The hasNotch property of the BottomAppBar must be true.

This would get you what I am upto

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Bottom App Bar')),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add), onPressed: () {},),
    bottomNavigationBar: BottomAppBar(
      hasNotch: true,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

Thank You!

Taio · Answer 2 · 2018-08-17T08:20:35.703

2

Try implementing this revised version of the code. The FAB should persist across the three tabs

class BarTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: DefaultTabController(
    length: 3,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        children: [
          Icon(Icons.audio),
          Icon(Icons.play),
          Icon(Icons.maps),
        ],
      ),

 floatingActionButton: FloatingActionButton(
 onpressed:(){},
 child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar:BottomAppBar(
 color:Colors.blue,
 hasNotch: true,
 child:Container(
height:50.0
child:Row(
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.menu),
      onPressed: (){})
  ]
)
)

    ),
  ),
);
}

edited Aug 17 '18 at 08:20

answered Aug 16 '18 at 16:47

Taio

3,152
11
35
59

I get it, you want something here and there but you have to show some effort. You just cannot post screenshots and tell people to write the code for you – Taio Aug 16 '18 at 18:03
I just want a hint, not anyone to write a code for me. I apologize if I expressed myself wrongly. – TheUniqueProgrammer Aug 16 '18 at 18:10
Okay. What do you mean when you said in the other guys post that _I just checked your code and it is not a TabView nor on top of the screen_ . How exactly is each placement you need since your screenshot is misleading. It gives the impression you already have a tab view but do not know how to put the docked FAB – Taio Aug 17 '18 at 08:11
1

Sorry if I expressed myself wrongly. I think the matter is that I try to put a TabBar inside the BottomAppBar to create a notch in the TabBar. – TheUniqueProgrammer Aug 17 '18 at 10:27
1

I just noticed that I said TabView instead of TabBar. Sorry I was really confused yesterday. – TheUniqueProgrammer Aug 17 '18 at 10:32

score 1 · Answer 3 · answered Jul 24 '20 at 20:28

2020 solution:

hasNotch property is no more in BottomAppBar, however, you can do this in Scaffold

 bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(), //this is what creates the notch 
    color: Colors.blue,
    child: SizedBox(
      height: height * 0.1,
      width: width,
    ),
  ),
  floatingActionButton: Container(
    margin: EdgeInsets.all(10),
    width: 80.0,
    height: 80.0,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        size: 25.0,
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked

output :

How to add notch to TabBar to place FloatingActionButton in it

3 Answers3