Implementing Custom App Bars in Flutter

App bars (also known as action bars) are a fundamental part of most mobile applications, serving as a key navigation and information hub at the top of the screen. In Flutter, the AppBar widget provides a convenient way to create app bars. However, you may often need more customization than the standard AppBar offers. This post delves into implementing custom app bars in Flutter, giving you full control over their appearance and behavior.

What is an App Bar?

An app bar is a toolbar at the top of the screen, typically used for branding, page titles, navigation, and actions. It is a standard UI element on both Android and iOS platforms.

Why Customize App Bars?

• Branding: Align the app bar design with your brand’s visual identity.
• Advanced Functionality: Add custom controls, animations, or interactive elements.
• Platform-Specific Styling: Adapt the app bar to match the design conventions of different platforms.

Basic AppBar in Flutter

Before diving into customization, let’s revisit the basic usage of the AppBar widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Basic App Bar'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

This code creates a simple app with an app bar containing a title.

Customizing the AppBar

1. Changing Background Color and Text Style

You can easily customize the background color and text style of the AppBar using the backgroundColor and titleTextStyle properties, respectively.

AppBar(
  title: Text(
    'Customized App Bar',
    style: TextStyle(color: Colors.white),
  ),
  backgroundColor: Colors.blue,
)

2. Adding Actions

The actions property allows you to add widgets to the right side of the app bar. Typically, these are IconButton widgets for performing actions.

AppBar(
  title: Text('App Bar with Actions'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Handle search action
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Handle more options
      },
    ),
  ],
)

3. Adding a Leading Widget

The leading property allows you to add a widget to the left side of the app bar, often used for a back button or a menu icon.

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // Handle menu action
    },
  ),
  title: Text('App Bar with Leading'),
)

4. Using a FlexibleSpace

The flexibleSpace property lets you add a widget that stretches behind the AppBar. This is useful for adding background images, gradients, or complex shapes.

AppBar(
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.blue],
        begin: Alignment.bottomRight,
        end: Alignment.topLeft,
      ),
    ),
  ),
  title: Text('App Bar with Flexible Space'),
)

5. Implementing a Custom Height

To change the height of the AppBar, you can use a PreferredSize widget combined with a custom Size. Create a custom app bar widget:

import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final double height;

  CustomAppBar({Key? key, required this.title, this.height = kToolbarHeight}) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      backgroundColor: Colors.green,
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: CustomAppBar(title: 'Custom Height App Bar', height: 100.0),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

6. Creating a Fully Custom App Bar with a Container and SafeArea

For full control over the app bar, you can create a completely custom widget using a Container and SafeArea. This allows you to build any design without the constraints of the built-in AppBar.

import 'package:flutter/material.dart';

class FullyCustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;

  FullyCustomAppBar({Key? key, required this.title}) : super(key: key);

  @override
  Size get preferredSize => Size.fromHeight(80.0); // Custom height

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        height: preferredSize.height,
        color: Colors.orange,
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
              icon: Icon(Icons.menu, color: Colors.white),
              onPressed: () {
                // Handle menu action
              },
            ),
            Text(
              title,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            IconButton(
              icon: Icon(Icons.search, color: Colors.white),
              onPressed: () {
                // Handle search action
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: FullyCustomAppBar(title: 'Fully Custom App Bar'),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

This code creates a custom app bar using a Container, sets its height, color, and adds custom widgets for the menu, title, and search icons. The SafeArea ensures the content is not obscured by system UI elements.

Advanced Customizations

• Animations: Use AnimatedContainer or AnimatedOpacity to animate properties like background color, height, or opacity on certain events.
• Platform-Specific Designs: Use Platform.isAndroid or Platform.isIOS to apply different styles based on the platform.
• Interactive Elements: Incorporate widgets like TextField or Slider directly into the app bar.

Conclusion

Customizing app bars in Flutter provides a wide range of possibilities to enhance the look and feel of your application. Whether it’s through simple modifications using built-in properties or by creating fully custom widgets, you can achieve the exact design and functionality you need. By understanding these techniques, you can create visually appealing and highly functional app bars that improve the overall user experience of your Flutter apps.