Flutter Course: 8.3 Decorating the AppBar

Flutter is a UI toolkit developed by Google that allows you to create high-quality applications for both iOS and Android with a single codebase. One of Flutter’s powerful features is the ease of customizing the user interface (UI). In this tutorial, we will explore various ways to decorate Flutter’s AppBar.

What is AppBar?

AppBar is a toolbar that appears at the top of a Flutter application and is a basic UI element that includes titles, menus, navigation icons, etc. It remains at the top of the screen while users navigate through the app and can be adjusted to match the overall theme and style of the application.

Creating a Basic AppBar

By default, the AppBar is placed within a Scaffold widget. Below is the code for a simple Flutter application with a basic AppBar added:

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 AppBar'),
        ),
        body: Center(child: Text('Hello!')),
      ),
    );
  }
}

Changing the AppBar Color

Changing the color of the AppBar is crucial when setting the app’s theme. The example below shows how to change the AppBar’s background color using the backgroundColor property:

appBar: AppBar(
  title: Text('Color Changed AppBar'),
  backgroundColor: Colors.blueAccent,
),

By setting this, the AppBar’s background color will change to blueAccent.

Adding Icons to the AppBar

You can make the app’s functionality more intuitive by adding icons to the AppBar. Icon buttons can be added using the actions property. The example below adds a ‘search’ icon and defines an action when clicked:

appBar: AppBar(
  title: Text('AppBar with Icons'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Action when the search icon is clicked
        print('Search icon clicked');
      },
    ),
  ],
),

Changing the AppBar Title Style

You can customize the AppBar’s title style for more personalization. The code below shows how to change the font size and color of the title:

appBar: AppBar(
  title: Text(
    'Styled Title',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
),

Creating a Custom AppBar

You can create a custom AppBar that goes beyond the basic functionality. By implementing Flutter’s PreferredSizeWidget, you can create an AppBar with your desired design. Below is an example of a simple custom AppBar:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Custom AppBar', style: TextStyle(color: Colors.white, fontSize: 20)),
            Icon(Icons.settings, color: Colors.white),
          ],
        ),
      ),
    );
  }

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

To use this custom AppBar, simply assign it to the appBar property of the Scaffold:

appBar: CustomAppBar(),

Adding a Menu Button to the AppBar

Adding a menu button to the AppBar allows users to select more options. The code below adds a menu and includes several selectable items:

appBar: AppBar(
  title: Text('AppBar with Menu Button'),
  actions: [
    PopupMenuButton(
      onSelected: (String result) {
        print('Selected Menu: $result');
      },
      itemBuilder: (BuildContext context) => >[
        const PopupMenuItem(
          value: 'Option 1',
          child: Text('Option 1'),
        ),
        const PopupMenuItem(
          value: 'Option 2',
          child: Text('Option 2'),
        ),
      ],
    ),
  ],
),

Making the AppBar Transparent

In certain apps, the AppBar’s background is set to transparent to highlight the content below. In such cases, you can use Colors.transparent for the backgroundColor property of the AppBar:

appBar: AppBar(
  title: Text('Transparent AppBar'),
  backgroundColor: Colors.transparent,
),

Using Images with the AppBar

You can enhance the design variety by combining a background image with background colors and text in the AppBar. Below is how to set the AppBar’s background to an image:

appBar: AppBar(
  title: Text('Image Background AppBar'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('Image URL'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

In the code above, replace the ‘Image URL’ part with the link of the image you want to use.

Conclusion

In this tutorial, we explored various ways to decorate and customize the AppBar in Flutter. The AppBar significantly impacts the overall user experience of the application, so it is important to style it in various ways as needed. Experiment with different features through each example and create an AppBar that reflects your own style.

We will continue to provide in-depth content on various Flutter-related topics. If you have questions or additional topics you would like us to cover, please leave a comment. Thank you!