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

There are many possible solutions, one of them is to add padding and border.

import 'package:charts_flutter/flutter.dart' as prefix0;import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: Scaffold(        backgroundColor: Colors.blueAccent,        floatingActionButton: Padding(          padding: EdgeInsets.only(top: 20),          child: SizedBox(            height: 70,            width: 70,            child: FloatingActionButton(              backgroundColor: Colors.transparent,              elevation: 0,              onPressed: () {},              child: Container(                height: 70,                width: 70,                decoration: BoxDecoration(                  border: Border.all(color: Colors.white, width: 4),                  shape: BoxShape.circle,                  gradient: LinearGradient(                    begin: const Alignment(0.7, -0.5),                    end: const Alignment(0.6, 0.5),                    colors: [                      Color(0xFF53a78c),                      Color(0xFF70d88b),                    ],                  ),                ),                child: Icon(Icons.photo_camera, size: 30),              ),            ),          ),        ),        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,        bottomNavigationBar: BottomAppBar(          color: Colors.white,          child: Container(            height: 80,            color: Colors.white,          ),        ),      ),    );  }}

Here is a crystal clear official demonstration : https://youtu.be/2uaoEDOgk_I

Code will be something like this:

Scaffold(..  floatingActionButton..  bottomNavigationBar..    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked

Another option is to use notchMargin in your BottomAppBar to get the opposite to your answer. It looks amazing so I decided to add that option too.

https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a

return Scaffold(  appBar: AppBar(    title: Text('Flutter notch demo'),  ),  bottomNavigationBar: BottomAppBar(    notchMargin: 2.0,    shape: CircularNotchedRectangle(),  ),  floatingActionButtonLocation:  FloatingActionButtonLocation.endDocked,  floatingActionButton: FloatingActionButton(  onPressed: () => Navigator.of(context).pop(),  child: Icon(Icons.done_all),  ),);