Material AppBar Widget Tutorial

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, above the bottom (if any).


Material AppBar Widget useful Inputs

  • title: The primary widget displayed in the app bar.

  • leading: A widget to display before the toolbar’s title.

  • centerTitle: Whether the title should be centered.

  • backgroundColor: The fill color to use for an app bar’s Material.

  • actions: A list of Widgets to display in a row after the title widget.


Material AppBar Widget example

AppBar(
  title: Text("Bismillah App"),
)
AppBar(
          title: const Text('AppBar Example'),
          leading: IconButton(
            onPressed: () {},
            icon: Icon(Icons.airplay),
          ),
          centerTitle: true,
          backgroundColor: Colors.black54,
          actions: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.comment),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.delete),
            ),
          ],
        )

Full codes example

import 'package:flutter/material.dart';

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

class AppbarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AppBar Example'),
          leading: IconButton(
            onPressed: () {},
            icon: Icon(Icons.airplay),
          ),
          centerTitle: true,
          backgroundColor: Colors.black54,
          actions: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.comment),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.delete),
            ),
          ],
        ),
        body: const Center(
          child: Text(
            'This is the Example Appbar',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}