How to make Floating action button docked flutter (Free Code)

Here in this post, I will show you how to add FAB (floating Action Button) docked inside the bottom bar. And I just Shared a Simple code for you. To make it easy for you to add this to your Apps and give you little information about the properties we use.

We are going to make something like this.

Little basics About Floating Action Button (FAB)

It is basically a Material Button floating at the bottom of the screen of our flutter App. In flutter, we can pretty much make a lot of setting to make it look the way you want like its radius, Color, Icon, And much more. If you want to know more about this make sure to read the documentation

Where do we add all the properties

As everyone knows if we want to make a Material Design Pattern from google. we make Scaffold Widget. It is basically a widget that consists of all the Material Design elements like App Bar, Bottom Navigation Bar, Basic Theme, And much more.

If we want to add a FAB button then we have one Property called the floatingActionButton in Scaffold.

Lets Implement Floating action button docked in yout Flutter App

I have created Some Steps to make it easy for you to understand.

Step 1:

Add FloatingActionButton() widget to the floatingActionButton: property of Scaffold.

Scaffold(
	floatingActionButton: FloatingActionButton(
		onPressed: () {},
		backgroundColor: accentColor,
		child: Icon(
			Icons.add,
			size: 28,
    ),
  ),
),

Step 2:

Now Add BottomAppBar() To the property bottomNavigationBar: of Scaffold. And add the fowling properties according to your need.

Scaffold(
	//=================Step1===================
	floatingActionButton: FloatingActionButton(
		onPressed: () {},
		backgroundColor: accentColor,
		child: Icon(
			Icons.add,
			size: 28,
		),
	),
	
	//=================Step2===================
	bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 6,
    color: mainColors,
    child: Container(
      height: 50,
    ),
	
),

I added shape: property of BottomAppBar() as CircularNotchedRectangle(). And added the color of my need and notchMargin the empty space between BottomApp bar and Floating action bar button. In the Child of BottomAppBar(), I added Container with a height of 50 you guys can add according to your taste.

Step 3:

Now add 3 more properties of Scaffold which will make let your work be done for your Docked Floating action button

Scaffold(
	//=================Step 1===================
	floatingActionButton: FloatingActionButton(
		onPressed: () {},
		backgroundColor: accentColor,
		child: Icon(
			Icons.add,
			size: 28,
		),
	),
	
	//=================Step 2===================
	bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 6,
    color: mainColors,
    child: Container(
      height: 50,
    ),
	
	//=================Step 3===================
	floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
	extendBody: true,
	resizeToAvoidBottomInset: false,
	
),

we added 3 properties here to make it possible how it looks like FloatingActionButtonLocation to specify the location of the FAB icon and other properties to let the body extends to the bottom of the screen if we add some scrolling functionality it shows behind the margin of FAB and the Bottom docked borders.

So here is how we can be able to make Floating Action Button Docked Flutter let me share the full code so that you guys can only be able to copy the code and paste it into your app which will make it easy for you to make apps.

Full Code (Just Copy it and Past it in your code) And do some changes.

Scaffold(
	floatingActionButton: FloatingActionButton(
		onPressed: () {},
		backgroundColor: accentColor,
		child: Icon(
			Icons.add,
			size: 28,
		),
	),
	bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 6,
    color: mainColors,
    child: Container(
      height: 50,
    ),
	floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
	extendBody: true,
	resizeToAvoidBottomInset: false,
	
),

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com