One of the most important structural parts of our app, be it an iOS or Android app is the AppBar. In some frameworks this may be known as the toolbar. This is header part of our application and typically renders the following:

  • Title of the app
  • Subtitle of the app
  • Menus

In these examples we will look at how to work with AppBar in Flutter.

Example 1: Simple AppBar

A simple AppBar Example in Flutter.

Step 1: Create Flutter Project

Start by creating your flutter project.

Step 2: Dependencies

This project does not rely on any third party dependency.

Step 3: Write Code

AppBar is contained in the material package, thus we start by importing that package:

import 'package:flutter/material.dart';

Now create a class known as SimpleAppBar that extends the StatelessWidget:

class SimpleAppBar extends StatelessWidget {

In this class prepare two instance fields: the title as well as the appbar height:

  final String title;
  final double barHeight = 56.0;

The title will be received via the constructor:

  SimpleAppBar(this.title);

Now proceed to build the whole widget. Here is the full code:

import 'package:flutter/material.dart';

class SimpleAppBar extends StatelessWidget {
  final String title;
  final double barHeight = 56.0;

  SimpleAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;

    return new Container(
      padding: EdgeInsets.only(top: statusBarHeight),
      height: barHeight + statusBarHeight,
      decoration: BoxDecoration(
          color: Colors.white,
          border:
              Border(bottom: BorderSide(width: 1.0, color: Colors.black12))),
      child: Center(
        child: Text(
          title,
          style: TextStyle(
              color: Colors.black54,
              fontFamily: 'Manrope',
              fontWeight: FontWeight.w500,
              fontSize: 26.0),
        ),
      ),
    );
  }
}

Example 2: AppBar Example

Here is the demo screenshot of this example:

Flutter AppBar

This example will comprise the following files:

  • AppBarExample.dart

Step 1: Create Project.

  1. Open your favorite Flutter IDE.
  2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependency is needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). AppBarExample.dart

Create a file Dart named AppBarExample.dart

Here is the full code

import 'package:flutter/material.dart';

class AppBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Default Appbar"),
        elevation: 0.0,
      ),
      body: ListView(
        children: <Widget>[
          ///App bar with background color
          Container(
            margin: const EdgeInsets.only(top: 16.0, bottom: 16.0),
            child: AppBar(
              title: const Text("Title"),
              backgroundColor: Colors.orange,
              elevation: 4.0,
            ),
          ),

          ///App bar with Action items
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              title: const Text("Appbar actions"),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.settings),
                  onPressed: () {},
                ),
              ],
            ),
          ),

          ///Center text
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              title: const Text("Center"),
              centerTitle: true,
            ),
          ),

          ///IconTheme for the app bar
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              title: const Text("Appbar Icon and Text Theme"),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.settings),
                  onPressed: () {},
                ),
              ],
              iconTheme: const IconThemeData(
                color: Colors.black,
              ),
              textTheme: const TextTheme(
                headline6: TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
          ),

          ///App bar with the title and subtitle
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: const <Widget>[
                  Text(
                    "Title",
                    style: TextStyle(fontSize: 18.0),
                  ),
                  Text(
                    "subtitle",
                    style: TextStyle(fontSize: 14.0),
                  ),
                ],
              ),
            ),
          ),

          ///App bar with the title and and icon/image at start
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              backgroundColor: Colors.orangeAccent,
              title: Row(
                children: const <Widget>[
                  FlutterLogo(),
                  Padding(
                    padding: EdgeInsets.only(left: 16.0),
                    child: Text(
                      "Title with image",
                    ),
                  ),
                ],
              ),
            ),
          ),

          ///App Bar with transparent background
          Container(
            margin: const EdgeInsets.only(bottom: 16.0),
            child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0,
              iconTheme: const IconThemeData(color: Colors.black),
              title: const Text(
                "Transparent AppBar",
                style: TextStyle(color: Colors.black),
              ),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.search),
                  onPressed: () {},
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.