Introduction

Customizing the appbar and BottomNavigationBar is a common requirement in intermediate Flutter projects. Whether you’re building a dashboard, a media app, or a productivity tool, a tailor-made app bar and bottom navigation system can vastly improve usability and brand consistency. In this tutorial, we’ll walk through:

• Defining a styled AppBar with flexible spacing and action buttons

• Creating a BottomNavigationBar that responds to state changes

• Combining both into a single Scaffold and handling navigation events

• Applying advanced tweaks—like custom heights and notches—to both components

By the end, you’ll have a reusable pattern for custom AppBar and navigation bars in Flutter.

Customizing the AppBar

The AppBar widget in Flutter offers properties for background color, elevation, leading/trailing widgets, and a flexibleSpace for more complex layouts. Here’s a compact example of a custom app bar with a centered title, custom back button, and gradient background:

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(60);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      automaticallyImplyLeading: false,
      backgroundColor: Colors.transparent,
      elevation: 0,
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
        ),
      ),
      leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () => Navigator.pop(context),
      ),
      title: Text('Dashboard', style: TextStyle(fontWeight: FontWeight.bold)),
      actions: [
        IconButton(icon: Icon(Icons.search), onPressed: () {}),
        IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
      ],
    );
  }
}

Key points:

• Implement PreferredSizeWidget to set a fixed height.

• Use flexibleSpace for gradient or custom background.

• Override automaticallyImplyLeading to manually control the back arrow or hamburger.

Building a Responsive BottomNavigationBar

A BottomNavigationBar connects user taps to content changes. We manage the selected index in a StatefulWidget and rebuild the body accordingly.

class CustomBottomNav extends StatelessWidget {
  final int currentIndex;
  final ValueChanged<int> onTap;

  const CustomBottomNav({Key? key, required this.currentIndex, required this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      selectedItemColor: Colors.purple,
      unselectedItemColor: Colors.grey,
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
        BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Messages'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
      ],
    );
  }
}

Highlights:

• Pass in currentIndex and a callback for onTap.

• Customize colors for selected/unselected states.

• Each BottomNavigationBarItem has an icon and a label.

Combining AppBar and BottomNavigationBar into a Scaffold

With both widgets ready, we can wire them up in a single StatefulWidget. The state holds the current index and chooses which page to display:

class MainScreen extends StatefulWidget {
  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _selected = 0;
  final _pages = [HomePage(), MessagesPage(), ProfilePage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: _pages[_selected],
      bottomNavigationBar: CustomBottomNav(
        currentIndex: _selected,
        onTap: (idx) => setState(() => _selected = idx),
      ),
    );
  }
}

This structure:

• Uses your CustomAppBar and CustomBottomNav.

• Dynamically switches body content based on index.

• Encourages separation of UI concerns into small widgets.

Advanced Tweaks: Notches, FAB, and Heights

You can add a notch for a floating action button or adjust heights for both bars:

• To create a notch, set bottomNavigationBar to a BottomAppBar with a CircularNotchedRectangle() shape and position your FloatingActionButton with floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked.

• If you need a taller app bar, adjust preferredSize in your custom widget.

Example for BottomAppBar with notch:

Scaffold(
  appBar: CustomAppBar(),
  body: ...,
  floatingActionButton: FloatingActionButton(onPressed: () {}, child: Icon(Icons.add)),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: CustomBottomNav(currentIndex: _selected, onTap: _onTap),
  ),
);

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Custom appbar and BottomNavigationBar implementations empower you to create polished, user-friendly interfaces in Flutter. By breaking them into small, composable widgets, you maintain clean code and foster reuse in larger applications. With gradient backgrounds, dynamic page switching, and notches for FABs, you can meet most intermediate design requirements without sacrificing performance.