How to add Floating action Button in Bottom Navigation Bar Center with notch?

Question

I am trying to add a Floating Action Button in the middle of the Bottom Navigation bar. Problem is notch not appearing. Here is a picture of the issue.

My is code is like this

import 'package:flutter/material.dart';

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  int _selectedTab = 0;
  final _pageOptions = [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
    Text('Item 4'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Color(0xffFF5555),
      ),
      home: Scaffold(
        body: _pageOptions[_selectedTab],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          foregroundColor: Colors.white,
          elevation: 2.0,
        ),
        bottomNavigationBar: BottomAppBar(
          notchMargin: 2.0,
          shape: CircularNotchedRectangle(),
          child: SizedBox(
            height: 80,
            child: Theme(
              data: Theme.of(context).copyWith(
                  // sets the background color of the `BottomNavigationBar`
                  canvasColor: Color(0xff1B213B),

                  // sets the active color of the `BottomNavigationBar` if `Brightness` is light
                  primaryColor: Color(0xffFF5555),
                  textTheme: Theme.of(context)
                      .textTheme
                      .copyWith(caption: new TextStyle(color: Colors.white))),
              child: BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                currentIndex: _selectedTab,
                onTap: (int index) {
                  setState(() {
                    _selectedTab = index;
                  });
                },
                fixedColor: Color(0xffFF5555),
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.tv), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.card_membership), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.share), title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text('')),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

I want to add notch around that red fab icon in the middle. I tried both shape: CircularNotchedRectangle() and AutomaticNotchedShape methods. But nothing worked. Most of the example shows to use "Row" inside "BottomAppBar". But I want to use BottomNavigationBar. Please help me to find a solution

Answer 1

use this property inside BottomAppBar(), widget

clipBehavior: Clip.antiAlias,

Answer 2

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  floatingActionButton: FloatingActionButton(...),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    clipBehavior: Clip.antiAliasWithSaveLayer,
    ...
  ),
);

Answer 3

Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      backgroundColor: Theme.of(context).backgroundColor,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton:
      SizedBox(
        width: 80.0,
        height: 80.0,
        child: FloatingActionButton(
          backgroundColor: Theme.of(context).primaryColor,
            child: Icon(Icons.add), onPressed: () {}),
      ),
      bottomNavigationBar: BottomAppBar(
          color: Theme.of(context).secondaryHeaderColor,
          child: Container(
            height: 60,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                IconButton(icon: Icon(Icons.settings), onPressed: () {}),
                IconButton(icon: Icon(Icons.speaker_notes_outlined), onPressed: () {}),
                SizedBox(width: 40), // The dummy child
                IconButton(icon: Icon(Icons.person), onPressed: () {}),
                IconButton(icon: Icon(Icons.email), onPressed: () {}),
              ],
            ),
          )),
    );