Appbar Widget

What is Appbar Widget?

A material design app bar

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.

The AppBar displays the toolbar widgets, leading, title, and actions,The leading widget is in the top left, the actions are in the top right, the title is between them.

Default Constructor

The default constructor creates a material design app bar.

AppBar(
  leading:
  title :// Add text widget here
  actions: // Add list of widgets here
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The leading parameter is to display a widget before the title.

The title parameter is to display the text in app bar.

The actions parameter is to display widgets in a row after the `title widget.

Code snippet

The following code snippet shows how to configure AppBar widget.

AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: const Text('AppBar Demo'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alert),
            tooltip: 'Notifications',
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.message),
            tooltip: 'Message',
            onPressed: () {},
          ),
        ],
      );

Demo Code

The example shows how to design app bar with menu icon, title and notification actions.

import 'package:flutter/material.dart';

class AppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: const Text('AppBar Demo'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alert),
            tooltip: 'Notifications',
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.message),
            tooltip: 'Message',
            onPressed: () {},
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'Home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  static const String _title = 'AppBar Widget';

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

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