Flutter BottomAppBar: Tutorial & Examples

Updated: September 1, 2023 By: A Goodman Post a comment

This article is about the BottomAppBar widget in Flutter. We’ll cover the fundamentals and walk through a couple of examples (from basics to advanced) of implementing and customizing the widget in practice (note that we’ll use the latest version of Flutter with useMaterial3 enabled by default).

A Quick Overview

To implement a bottom app bar, we assign the bottomNavigationBar property of Scaffold to a BottomAppBar widget with some handy options, as follows:

Scaffold(
        bottomNavigationBar: BottomAppBar(
          color: /* Background color */,
          elevation: /* Elevation */,
          shape: /* Configure a notch */,
          child: /* Child widget here, usually a Row widget */,
        ),
        /* ... */
);

In case you want to add a bottom tab instead of a bottom app bar, see the following articles:

Now it’s time to see some practical examples.

Simple BottomAppBar

This example creates a typical bottom app bar that contains a row of icon buttons: like, dislike, comment, and bookmark. This kind of bottom app bar can be found on many social media platforms, where a user can interact with posts, photos, videos, etc.

Screenshot:

The code:

// main.dart
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(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('KindaCode.com')),
        body: const Center(
          child: Text(
            'Pink Puppy updated his profile picture',
            style: TextStyle(fontSize: 16),
          ),
        ),
        // implement BottomAppBar
        bottomNavigationBar: BottomAppBar(
          color: Colors.indigo,
          elevation: 6,
          // BottomAppBar content
          child: Padding(
            padding: const EdgeInsets.only(top: 5, left: 10, right: 10),
            child: Row(
              children: [
                // Like button
                IconButton(
                    onPressed: () {
                      debugPrint("Like button pressed");
                    },
                    icon: const Icon(
                      Icons.thumb_up,
                      size: 30,
                      color: Colors.white,
                    )),
                const SizedBox(
                  width: 10,
                ),
                // Dislike button
                IconButton(
                    onPressed: () {
                      debugPrint("Dislike button pressed");
                    },
                    icon: const Icon(
                      Icons.thumb_down,
                      size: 30,
                      color: Colors.white,
                    )),
                const SizedBox(
                  width: 10,
                ),
                // Comment button
                IconButton(
                    onPressed: () {
                      debugPrint("Comment button pressed");
                    },
                    icon: const Icon(
                      Icons.comment,
                      size: 30,
                      color: Colors.white,
                    )),
                // Bookmark/Save button
                Expanded(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      IconButton(
                          onPressed: () {
                            debugPrint("Bookmark button pressed");
                          },
                          icon: const Icon(
                            Icons.bookmark,
                            size: 30,
                            color: Colors.white,
                          )),
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}

Rounded BottomAppBar & FloatingActionButton

This example creates a rounded bottom app bar that has a notch where a floating action button resides.

Screenshot:

The complete code (with explanations):

// main.dart
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(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: const Center(
        child: Text(
          'Hello There',
          style: TextStyle(fontSize: 36),
        ),
      ),
      // implement BottomAppBar
      bottomNavigationBar: BottomAppBar(
        color: Colors.green,
        notchMargin: 10,
        // make rounded corners & create a notch for the floating action button
        shape: const AutomaticNotchedShape(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(30)),
          ),
          StadiumBorder(),
        ),
        child: IconTheme(
          data: const IconThemeData(color: Colors.white, size: 36),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                IconButton(
                    onPressed: () {
                      debugPrint("Menu Pressed");
                    },
                    icon: const Icon(Icons.menu)),
                const SizedBox(
                  width: 10,
                ),
                IconButton(
                    onPressed: () {
                      debugPrint("Cart Pressed");
                    },
                    icon: const Icon(Icons.shopping_cart)),
                const SizedBox(
                  width: 10,
                ),
                IconButton(
                    onPressed: () {
                      debugPrint("History Pressed");
                    },
                    icon: const Icon(Icons.history)),
                const SizedBox(
                  width: 10,
                ),
                IconButton(
                    onPressed: () {
                      debugPrint("Settings Pressed");
                    },
                    icon: const Icon(Icons.settings)),
              ],
            ),
          ),
        ),
      ),
      // implement the big floating action button
      floatingActionButton: FloatingActionButton.large(
        onPressed: () {
          debugPrint("Floating Action Button Pressed");
        },
        backgroundColor: Colors.amber,
        shape: ShapeBorder.lerp(
          const CircleBorder(),
          const StadiumBorder(),
          0.5,
        ),
        child: const Icon(Icons.add),
      ),
      // position the floating action button
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    );
  }
}

If you want to find more details about FloatingActionButton, see this article Flutter: Floating Action Button examples (basic & advanced).

Conclusion

We’ve covered the BottomAppBar widget’s fundamentals and a few practical examples of using it in real-world apps. You can modify the code to make them even better and suit your needs. Continue learning and strengthening your skills by taking a look at the following articles:

You can also tour around our Flutter topic page or Dart topic page for the most recent tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles