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.

1. Flutter Bottom Button Using FloatingActionButton

Let’s start with FloatingActionButton.

bottom button fab

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

flutter bottom button

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

flutter bottom button using bottomnavigationbar

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

flutter bottom button

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

tranparent bottom app bar 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.

Please disable your adblocker or whitelist this site!