Hi guys, Welcome to AndroidRide.
Most of the apps are using bottom button for implementing their app’s main functionality. For creating todos, notes etc. So if you are trying to implement something like that, then you are in the right place.
okay… Let’s start.
Contents
1. Flutter Bottom Button Using FloatingActionButton
Let’s start with FloatingActionButton.
You can align FloatingActionButton position to center or almost anywhere using Scaffold‘s floatingActionButtonLocation property.
- Use FloatingActionButtonLocation.centerFloat to make FAB to align to bottom.
- I am already talked about this in FloatingActionButton tutorial.
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(
Icons.edit,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
2. Bottom Button Using FloatingActionButton.extended()
In this example, we will use FloatingActionButton.extended constructor and will make a button at the bottom. Location remains same like in the first example.
Yes, FloatingActionButtonLocation.centerFloat
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.edit),
label: const Text('Edit'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
3. Flutter Bottom Button Using BottomNavigationBar
Bottom Navigation Bar can be used to set Navigation Icons. But here, we will use it to implement a button. I didn’t use button widget here.
- kToolbarHeight used to set button’s height. It’s actually 56.0.
bottomNavigationBar: Material(
color: const Color(0xffff8906),
child: InkWell(
onTap: () {
//print('called on tap');
},
child: const SizedBox(
height: kToolbarHeight,
width: double.infinity,
child: Center(
child: Text(
'Bottom Button',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
),
),
4. Bottom Button Using BottomNavigationBar – Two Items
In this example, just like above one. But we will add two buttons here.
- InkWell used for ripple effect.
- Recommended to use SizedBox, If you do not have any other properties except width, height and child.
bottomNavigationBar: Row(
children: [
Material(
color: const Color(0xffff8989),
child: InkWell(
onTap: () {
//print('called on tap');
},
child: const SizedBox(
height: kToolbarHeight,
width: 100,
child: Center(
child: Text(
'Click',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
),
),
Expanded(
child: Material(
color: const Color(0xffff8906),
child: InkWell(
onTap: () {
//print('called on tap');
},
child: const SizedBox(
height: kToolbarHeight,
width: double.infinity,
child: Center(
child: Text(
'Bottom Button',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
],
),
5. Bottom Button Using Stack and Align
In this example, we will use Stack for containing children widgets and Align for aligning button to the bottom. RaisedButton is deprecated, so here we used ElevatedButton.
- Stack widget contains ListView, Align.
- Inside ListView, There are 3 Text items.
- ElevatedButton width is maximum, but container margin creates empty space around it. Just like Padding widget.
body: Stack(
children: [
ListView(
children: const [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(5),
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('Bottom Button '),
),
),
)
],
),
Transparent Bottom AppBar With Buttons
In this example, you will learn how to create tranparent appbar with IconButtons. First of all, you must add a background image in assets directory and define it in pubspec.yaml.
if you don’t know,how to do that? check this link.
- Scaffold‘s extendBody: true – helps to show Scaffold’s body through bottom navigation bar’s notch.
- color: Colors.transparent – it makes completely invisible bottom app bar.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
// extendBodyBehindAppBar: true,
extendBody: true,
body: Container(
constraints: const BoxConstraints.expand(),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/background.jpg',
),
fit: BoxFit.cover,
),
),
child: const Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Transparent BottomAppBar With Buttons',
style: TextStyle(
backgroundColor: Colors.black,
color: Colors.white,
fontSize: 20,
),
),
),
),
),
bottomNavigationBar: BottomAppBar(
elevation: 0,
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
onPressed: () {
print('button tapped');
},
icon: const Icon(
Icons.menu,
color: Colors.white,
),
),
IconButton(
onPressed: () {
print('button tapped');
},
icon: const Icon(
Icons.search,
color: Colors.white,
),
),
IconButton(
onPressed: () {
print('button tapped');
},
icon: const Icon(
Icons.person,
color: Colors.white,
),
),
IconButton(
onPressed: () {
print('button tapped');
},
icon: const Icon(
Icons.settings,
color: Colors.white,
),
),
],
),
),
);
}
}
Download Source Code
If you like this post, please share it with your family and friends.
Thank you.
