AppBar

A material design app bar.

An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar. App bars typically expose one or more common actions with IconButtons which are optionally followed by a PopupMenuButton for less common operations (sometimes called the “overflow menu”).

App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen. For a scrollable app bar, see SliverAppBar, which embeds an AppBar in a sliver for use in a CustomScrollView.

When not used as Scaffold.appBar, or when wrapped in a Hero, place the app bar in a MediaQuery to take care of the padding around the content of the app bar if needed, as the padding will not be handled by Scaffold.

// Flutter code sample for AppBar

// This sample shows an [AppBar] with two simple actions. The first action
// opens a [SnackBar], while the second action navigates to a new page.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));

void openPage(BuildContext context) {
  Navigator.push(context, MaterialPageRoute(
    builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Next page'),
        ),
        body: const Center(
          child: Text(
            'This is the next page',
            style: TextStyle(fontSize: 24),
          ),
        ),
      );
    },
  ));
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: const Text('AppBar Demo'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alert),
            tooltip: 'Show Snackbar',
            onPressed: () {
              scaffoldKey.currentState.showSnackBar(snackBar);
            },
          ),
          IconButton(
            icon: const Icon(Icons.navigate_next),
            tooltip: 'Next page',
            onPressed: () {
              openPage(context);
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This is the home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Creating an AppBar in Flutter

As mentioned above, the AppBar is primarily a part of the Scaffold Widget, since it provides an easy gateway to create the AppBar. In order to create a simple AppBar, AppBar Class can be used. The general constructor looks like below,

AppBar(title: Text("Sample AppBar"),

The constructor of AppBar looks like,

AppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation: 4.0, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, double titleSpacing: NavigationToolbar.kMiddleSpacing, double toolbarOpacity: 1.0, double bottomOpacity: 1.0 })

AppBar in Flutter – Properties

The following properties are most used in Flutter and can be helpful in creating better-looking TopBar for your application.

title 

The title takes in Text class as its value is the main reason for using the AppBar. The AppBar holds the name of the app itself. It could be the App name or the brand name that you want to place. Take any major application on the market today and the AppBar is always going to hold important Text in it. To make use of this title attribute, you can call the Text() constructor and pass a String. Example title looks like below,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
      ),
    ),
  ));
}

actions

Actions attribute in AppBar is dedicated to place Icons/Text to the right of the AppBar’s Title. That is, the top right corner of the App is very important in terms of utility to the user. It is the place where, any User will want to find Utility related options.

Example Icons to place will be, Settings, Search Icon etc. To make use of that portion of the AppBar, the actions field is used. The actions field in AppBar takes in a list of widgets. It can take any widget, but most preferably the presence of Icons will improve the overall UI feel of the App.

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
      ),
    ),
  ));
}

backgroundColor

Another important attribute of the Appbar class is the backgroundColor attribute. It’s important to understand that, you can give any color to to it. It takes in the value of the Colors class and makes use of the static variable with the color name.

Sample code is given below,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
      ),
    ),
  ));
}

elevation

Elevation creates a elevated effect on the AppBar by giving it a shadow. To make use of this property, you will have to provide a double value, The elevation happens on the Z axis of the AppBar and the code looks like,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
        elevation: 50.0,
      ),
    ),
  ));
}

leading

This is the property to let the AppBar hold a simple Widget just to the left of the AppBar title. Often, there will be a Menu Drawer like widget. In scaffold, the drawer attribute will by default occupy this place only. In order to create something else to the left of the Title, create a widget for the leading attribute.

Sample code for leading looks like,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
        elevation: 50.0,
        leading: Icon(Icons.menu),
      ),
    ),
  ));
}

bottom

bottom property is another important property for creating useful AppBars. The main purpose is to make use of the space below the title. The AppBar’s bottom can be used to hold either a Title or even a simple yet effective Icon or for that matter any widget family.

The bottom attribute takes in the value of PrefferedSize class as its value. To create a simple PrefferedSize value, you will have to understand what that class denotes. It is going to create a specific widget for the given size only.

The prefferedSize class takes in 2 important attributes, child and prefferedSize. The prefferedSize is often the Size class value and the child is where the Widget to hold comes into picture.

A sample bottom attribute is used in the example code below,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
        elevation: 50.0,
        leading: Icon(Icons.menu),
        bottom: PreferredSize(child: Icon(Icons.linear_scale,size: 60.0,), preferredSize: Size.fromHeight(50.0)),
      ),
    ),
  ));
}

brightness

As the name suggests, it is going to take in the value of the brightness that the AppBar is going to be in. It is preferably set along with the backgroundColor attribute we saw above. If not, then the AppBar might look odd in terms of creating good looking UI.

Sample Light Brightness will look like,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
        elevation: 50.0,
        leading: Icon(Icons.menu),
        brightness: Brightness.light,

      ),
    ),
  ));
}

Brightness set to Dark will look like,

import "package:flutter/material.dart";

void main()
{
  runApp(MaterialApp(
    title: "TheFlutterBlog",
    home: Scaffold(
      appBar: AppBar(
        title: Text("TheFlutterBlog"),
        actions: <Widget>[
          Icon(Icons.comment),
          Icon(Icons.settings),
        ],
        backgroundColor: Colors.deepOrangeAccent,
        elevation: 50.0,
        leading: Icon(Icons.menu),
        brightness: Brightness.dark,

      ),
    ),
  ));
}

3 Replies to “AppBar”

Leave a Reply

Your email address will not be published.