How to add Floating action Button in Bottom Navigation Bar in Center with border?
Solution 1
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,
),
),
),
);
}
}
Solution 2
Here is a crystal clear official demonstration : https://youtu.be/2uaoEDOgk_I
Code will be something like this:
Scaffold(..
floatingActionButton..
bottomNavigationBar..
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked
Solution 3
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.
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),
),
);
Gursewak Singh
Innovative Android/Flutter and React-Native Developer with 5+ years of experience designing, developing, testing, and maintaining Android/Flutter applications.
Updated on December 14, 2022Comments
-
Gursewak Singh over 1 year
I am trying to add a Floating Action Button in the middle of the Bottom Navigation bar. Problem is border is not appearing and also margin in Floating Action Button and icons not according to my requirement.
Here is a picture of the issue. Achieved Image
Here is a picture what I want Required Image
Code
bottomNavigationBar: SafeArea(child: _buildBottomBar(context)), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButton: CircularGradientButton( tooltip: 'Increment', child: new Image.asset(UIData.cameraIcon), gradient: LinearGradient(colors: <Color>[ Color.fromARGB(255, 17, 153, 142), Color.fromARGB(255, 56, 239, 125) ]), callback: () => openCamera(), //_optionsDialogBox(), elevation: 2.0, ), Widget _buildBottomBar(BuildContext context) { return Material( color: Colors.white, child: TabBar( isScrollable: false, unselectedLabelColor: Colors.white.withOpacity(0.3), indicatorColor: Colors.white, tabs: <Tab>[ new Tab( // set icon to the tab icon: Image.asset( _tabController.index == 0 ? UIData.mapIconActive : UIData.mapIcon, width: 30, height: 30, ), ), new Tab( icon: Image.asset( _tabController.index == 1 ? UIData.listingIconActive : UIData.listingIcon, width: 30, height: 30, ), ), new Tab( icon: Image.asset( _tabController.index == 2 ? UIData.messageIconActive : UIData.messageIcon, width: 30, height: 30, ), ), new Tab( icon: Image.asset( _tabController.index == 3 ? UIData.settingsIconActive : UIData.settingsIcon, width: 30, height: 30, ), ), ], controller: _tabController, ), );
}
-
Kherel over 4 yearsHappy to help, pls upvote the answer if it's helped you. The stackoverflow rating system doesn't count approved answer in specific tag rating, only votes.