Flutter Widget Examples - FloatingActionButton(FAB)

FloatingActionButton(FAB)




FloatingActionButton(FAB)

Here, will talk about another interesting widget, that is, FloatingActionButton(FAB).

It's pretty easy to add a FloatingActionButton in Flutter. Simply add the FAB into your Scaffold Widget.

Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
);

Types of FloatingActionButton

Flutter provides two types of FloatingActionButtons.
1. FloatingActionButton
2. FloatingActionButton.extended


Let's discuss them one by one.





1. FloatingActionButton





Now, here it is a question.

What if you have a BottomNavigationBar, and you want to embed that FAB in it?

Well, Flutter has got you covered. Here are the steps.

First, add a BottomNavigationBar to your Scaffold Widget.

Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
bottomNavigationBar: BottomAppBar(
color: Colors.yellow,
child: Container(height: 50.0),
),
);

Then, use FloatingActionButtonLocation to embed the FAB.

Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){},
),
bottomNavigationBar: BottomAppBar(
color: Colors.yellow,
child: Container(height: 50.0),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.endDocked,
);

And if you want FAB in center just do one thing, simply change the location endDocked to centerDocked.


change from end to center

Source Code :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Bottom app bar',
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add), onPressed: (){},
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
children: [
Icon(Icons.home,color: Colors.black,size: 30,)
],
),
Row(
children: [
Icon(Icons.home,color: Colors.black,size: 30,)
],
),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
);
}
}

Result for the above code :



Bottom navigation bar with FAB

Previous
Next Post »