How to Notch Floating Action Button in Bottom Navigation Bar onFlutter App

In this guide, we are going to show you the way to set a notched floating action button into bottom navigation app bar. The notched floating action button in bottom bar makes your app user interface beautiful. See the code below for more details:

1. Notched FloatingActionButton at Left of Bottom Navigation Bar:

Scaffold(
  floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
      onPressed: (){
          //code to execute on button press
      },
      child: Icon(Icons.send), //icon inside button
  ),

  floatingActionButtonLocation: FloatingActionButtonLocation.startDocked,
  //floating action button location to left

  bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
    color:Colors.redAccent,
    shape: CircularNotchedRectangle(), //shape of notch
    notchMargin: 5, //notche margin between floating button and bottom appbar
    child: Row( //children inside bottom appbar
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(left:90),
          child:IconButton(icon: Icon(Icons.menu, color: Colors.white,), onPressed: () {},),
        ),
        IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.print, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.people, color: Colors.white,), onPressed: () {},),
      ],
    ),
  ),
)

2. Notched FloatingActionButton at Center of Bottom Navigation Bar:

Scaffold(
  floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
      onPressed: (){
          //code to execute on button press
      },
      child: Icon(Icons.send), //icon inside button
  ),

  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  //floating action button position to center

  bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
    color:Colors.redAccent,
    shape: CircularNotchedRectangle(), //shape of notch
    notchMargin: 5, //notche margin between floating button and bottom appbar
    child: Row( //children inside bottom appbar
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(icon: Icon(Icons.menu, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.print, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.people, color: Colors.white,), onPressed: () {},),
      ],
    ),
  ),
)

2. Notched FloatingActionButton at Right of Bottom Navigation Bar:

Scaffold(
  floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
      onPressed: (){
          //code to execute on button press
      },
      child: Icon(Icons.send), //icon inside button
  ),

  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  //floating action button position to right

  bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
    color:Colors.redAccent,
    shape: CircularNotchedRectangle(), //shape of notch
    notchMargin: 5, //notche margin between floating button and bottom appbar
    child: Row( //children inside bottom appbar
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(icon: Icon(Icons.menu, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: () {},),
        IconButton(icon: Icon(Icons.print, color: Colors.white,), onPressed: () {},),
        Padding(
          padding: EdgeInsets.only(right:90),
          child:IconButton(icon: Icon(Icons.people, color: Colors.white,), onPressed: () {},),
        )
      ],
    ),
  ),
)

Full Dart Code Example: 

import 'package:flutter/material.dart';
void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      floatingActionButton:FloatingActionButton( //Floating action button on Scaffold
          onPressed: (){
              //code to execute on button press
          },
          child: Icon(Icons.send), //icon inside button
      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      //floating action button position to center

      bottomNavigationBar: BottomAppBar( //bottom navigation bar on scaffold
        color:Colors.redAccent,
        shape: CircularNotchedRectangle(), //shape of notch
        notchMargin: 5, //notche margin between floating button and bottom appbar
        child: Row( //children inside bottom appbar
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(icon: Icon(Icons.menu, color: Colors.white,), onPressed: () {},),
            IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: () {},),
            IconButton(icon: Icon(Icons.print, color: Colors.white,), onPressed: () {},),
            IconButton(icon: Icon(Icons.people, color: Colors.white,), onPressed: () {},),
          ],
        ),
      ),
    );
  }
}