How to make bottomNavigationBar notch transparent

Question

I want to make the notch margin spacing (space between FAB's sides and bottom bar) like android material design explain in Inset FAB, It looks like a zoom background text in this small visible round portion. How we can make notching space transparent to see the text behind it? However, mine bottom bar is not showing like that

My implementation

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: Image.asset("images/paw.png"),
    onPressed: () {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => Map()));
    },
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: new Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          color: Colors.transparent,
          onPressed: () {},
        ),
      ],
    ),
    color: Utiles.primary_bg_color,
  ),
  body: Container(...)

Nilgai

Answer 1

You need extendBody: true in Scaffold

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Text('text text text text text text text text text text text text text text text text text text text text ');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 12,
        color: Colors.blue,
        child: Container(
          height: 60,
        ),
      ),
    );
  }
}

---

Tamtam

Good to note: Remove the SafeArea form your body or this won't work! – Basaltware

@Lorence Cramwinckel I'd upvote your answer a few times if i could. – Bangkok

SafeArea(bottom:false,) if you still need a SafeArea, but want body: to flow under notched FAB. – Cryptoclastic

@Cryptoclastic Scaffold extended true results your's content to be hidden below the navigationBar and i think it's not suitable. – Paperboy

Answer 2

BottomAppBar + BottomNavigationBar

The question title asks about BottomNavigationBar so I'm adding this answer to help people using both a BottomAppBar with a BottomNavigationBar.

If you're not using BottomNavigationBar, ignore this.

NavBar Covers Notch

By default, a BottomNavigationBar used as a child inside a BottomAppBar, will cover the notch like so:

We need to remove its color & shadow to let the notch show.

Using BottomNavigationBar in BottomAppBar

To keep the notch visible...

BottomNavigationBar needs:

• a backgroundColor specified, with 0 alpha (completely transparent)
  • otherwise, the default onBackground theme color is used, covering the notch
• elevation: 0 to remove an ugly shadow under BottomNavigationBar
  • the transparent backgroundColor makes the shadow visible & horrendous

BottomAppBar needs:

• shape: CircularNotchedRectangle() obviously, to have a notch for the FAB
• elevation: 0 to remove a slight shadow under the notched FAB (barely visible)

Scaffold needs:

• extendBody: true to allow body content to flow underneath notched FAB

SafeArea needs:

• if using SafeArea, use bottom:false arg, so our body can flow below past the BottomNavigationBar, under the FAB

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      extendBody: true, // CRITICAL for body flowing under FAB
      body: SafeArea(
        child: Center(
          child: Container(
            color: Colors.greenAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),
        bottom: false,
        // ↑ SafeArea(bottom:false) allows Scaffold body:+extendBody: to hit bottom edge
      ),
      // ↓ Location: centerDocked positions notched FAB in center of BottomAppBar ↓
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar( // ****** APP BAR ******************
        clipBehavior: Clip.antiAlias,
        shape: CircularNotchedRectangle(), // ← carves notch for FAB in BottomAppBar
        color: Theme.of(context).primaryColor.withAlpha(255),
        // ↑ use .withAlpha(0) to debug/peek underneath ↑ BottomAppBar
        elevation: 0, // ← removes slight shadow under FAB, hardly noticeable
        // ↑ default elevation is 8. Peek it by setting color ↑ alpha to 0
        child: BottomNavigationBar( // ***** NAVBAR  *************************
          elevation: 0, // 0 removes ugly rectangular NavBar shadow
          // CRITICAL ↓ a solid color here destroys FAB notch. Use alpha 0!
          backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
          // ====================== END OF INTERESTING STUFF =================
          selectedItemColor: Theme.of(context).colorScheme.onSurface,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit_outlined,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarm,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Edit')
          ],
        ),
      ),
    );

Result

With the above pieces in place you should see something like this:

Cryptoclastic

Great answer - fyi you can use Colors.transparent instead of a color with alpha set to 0. – Tartaric

I have to add clipBehavior: Clip.antiAlias in BottomAppBar so that it works. – Margalo

Thanks a lot it helped me a lot... To show notch below content. mainly we need to keep extendBody: true in Scaffold and bottom: false to SafeArea. – Smarm

What an answer. All possibilities and combinations included. +1 for that. – Republicanize

For a recent version, the code above will overflow at the BottomNavigationBarItem, so to avoid that, I had to add padding: EdgeInsets.zero to BottomAppBar. – Kirchhoff

Answer 3

Use, extendBody: true

From the docs,

extendBody: true ensures that that scaffold's body will be visible through the bottom navigation bar's notch

Lecroy

Answer 4

Do:

 return Scaffold( 
     extendBody: true,
    (...)

after

  body: SafeArea(
         bottom: false,
    (...)

after "no add backgroundColor"

  BottomNavigationBar(
      //backgroundColor:

Klingel

Scaffold extended true results your's content to be hidden below the navigationBar and i think it's not suitable. – Paperboy

Thank you. My designer was killing me for that. – Upsetting

Answer 5

If you use safe Area ,then extended Body and probably other methods doesn't work. So set the safe Area to (false).

Epizoic