---
description: In this tutorial, you will learn more detail about the AppBar in the flutter.
---

# Widgets 07 | AppBar

## Before start

In every tutorial, we need create a page to contain our code to show. So let's look at our code.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class AppBarPage extends StatefulWidget {
  @override
  _AppBarState createState() => _AppBarState();
}

class _AppBarState extends State<AppBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(PageName.APP_BAR),
        ),
        body: Text("body"));
  }
}
```

We have used the `AppBar` in our code above, just a simple one. It will show a app bar with a title. It is easy to use. It usually use with the `appBar` parameter of the  `Scaffold` . But in this tutorial, I will try to use it as a common widget to describe its parameter. Hope you do not misunderstand my style.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWjOEI5RZb33AoexsCv%2F-LWjT_lah9yqWybbhqTO%2Fapp_bar_01.png?alt=media\&token=63355cde-2f8a-4e14-875b-0a44593d7a39)

## Constructor

We have use the `AppBar` above, So let's look at its constructor.

```dart
AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation = 4.0,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  }) 
```

So let's look at the its parameters as follows.

## automaticallyImplyLeading

If you don't want the left-arrow on the app bar. you can use this parameter to hide it.

```dart
  AppBar _autoLeadBar() => AppBar(
        title: Text(PageName.APP_BAR),
        automaticallyImplyLeading: false,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWk1YT8c0oEQVJaiBw3%2Fapp_bar_02.png?alt=media\&token=96a6f3f5-83cc-4b11-93cd-c841ff54d6d6)

But you should know, if you the leading is not null, then this parameter hasn't effect.

## leading

This parameter controls the space as the left-arrow. So if you want to use some special function here. You can use this parameter, it is just a widget, but the space is strict. I often use the `InkWell` with a `Icon` as below.

```dart
 AppBar _leadingBar() => AppBar(
        title: Text(PageName.APP_BAR),
        leading: InkWell(
          child: Icon(Icons.menu),
          onTap: () {
            print("click menu");
          },
        ),
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWk2mOebzKCvCsWo9g0%2Fapp_bar_03.png?alt=media\&token=de084571-18a9-4543-bf39-84168a9daf5f)

## actions

If you want to add some widget in the right, the actions parameter you should know to use.

```dart
 AppBar _actionBar() => AppBar(
        title: Text(PageName.APP_BAR),
        actions: <Widget>[
          InkWell(
            child: Icon(Icons.search),
            onTap: () {
              print("click search");
            },
          ),
          SizedBox(width: 10),
          InkWell(
            child: Icon(Icons.more_vert),
            onTap: () {
              print("click more");
            },
          ),
          SizedBox(width: 20)
        ],
      );
```

We have added the search and more icon at the right of the app bar.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWk4UzlrsnEzi_UFFPd%2Fapp_bar_04.png?alt=media\&token=6851ffda-bf53-4c70-9255-770a62f4880f)

## bottom

When we look at the definition of the bottom parameter. we can see it is `PreferredSizeWidget`.

```dart
  final PreferredSizeWidget bottom;
```

&#x20;It is an abstract class.So we need use its subclass. The `PreferredSize` is a good choice to use. The `child` is a widget, the `preferredSize` is the `Size`.&#x20;

```dart
  Widget _bottomBar() => AppBar(
        title: Text(PageName.APP_BAR),
        bottom: PreferredSize(
          child: Container(
            alignment: Alignment.center,
            color: RED,
            constraints: BoxConstraints.expand(height: 50),
            child: Text(
              "bottom",
              style: TextStyle(fontSize: 30),
            ),
          ),
          preferredSize: Size(50, 50),
        ),
      );
```

It will show as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWk7h7FnzqPrXOb6Pv0%2Fapp_bar_05.png?alt=media\&token=3c3acf47-a693-4c91-a01f-de13bd19045b)

## elevation

This parameter controls the shadow of the `AppBar`.It is similar with `RaiseButton` I have tell before.&#x20;

```dart
Widget _elevationBar() => AppBar(
        title: Text(PageName.APP_BAR),
        elevation: 10,
      );
```

This will show as right in the picture below.The left one is `elevation = 4`.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWkAEbqxJ4DlyUDgGJj%2Fapp_bar_06.png?alt=media\&token=a7e7a8a4-d666-4b38-bb73-69478b662450)

## backgroundColor

If you want to change the color of the `AppBar`, you can use the `backgroundColor` as follows.

```dart
 Widget _backgroundBar() => AppBar(
        title: Text(PageName.APP_BAR),
        backgroundColor: PURPLE,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWkBOdp94PuzpW6AkMM%2Fapp_bar_07.png?alt=media\&token=c642f692-3c9e-4a89-927d-9a4c9b42d24b)

## brightness

The parameter will change the text, icon color of the status bar.

```dart
Widget _brightBar() => AppBar(
        title: Text(PageName.APP_BAR),
        brightness: Brightness.dark,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWk0NsEQcCb8Op_ZrKf%2F-LWkDEhDW_JVKvRbRze-%2Fapp_bar_08.png?alt=media\&token=f0da20dd-7a52-40c5-9366-bbf4ab7bf5dc)

## iconTheme

When we look at the parameter carefully, we can see it is `IconThemeData`, its constructor is below. We have used the color, size several times, so I do not explain it. The `opacity` controls the  transparency of the `Icon`. The value is from 0 to 1.

```dart
IconThemeData({this.color, double opacity, this.size})
```

Let's use it.

```dart
     Widget _iconThemeBar() => AppBar(
        title: Text(PageName.APP_BAR),
        iconTheme: IconThemeData(color: Colors.white, size: 20, opacity: 0.9),
      );
```

The left-arrow will change to white.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkGJ2XaxNpWQOu9OLc%2Fapp_bar_09.png?alt=media\&token=86bd05e3-3865-4980-9ca9-bab0f02d3f3a)

But you should know, if you change the size, it doesn't have an effect.

## textTheme

This will control the title of the Text.

```dart
 Widget _textThemeBar() => AppBar(
        title: Text(PageName.APP_BAR),
        textTheme: TextTheme(title: TextStyle(color: Colors.white,fontSize: 30)),
      );
```

It will change the color of the title to white and the `fontSize` to 30.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkIAdfiE4JJIGNUPO0%2Fapp_bar_10.png?alt=media\&token=24909dde-c943-47a8-9aec-19ec948543ae)

## primary&#x20;

The default value of this parameter is true. When we set to false, the icon and title will move up.

```dart
  Widget _primaryBar() => AppBar(
        title: Text(PageName.APP_BAR),
        primary: false,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkJtNY19LbNP6UA7nR%2Fapp_bar_11.png?alt=media\&token=3cb1f79d-ec0e-4034-ab2d-c00612ef590f)

## centerTitle

This parameter is bool, the default value is false.It controls the title whether or not show in the center of the AppBar.&#x20;

```dart
 Widget _centerBar() => AppBar(
        title: Text(PageName.APP_BAR),
        centerTitle: true,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkKaXZyHO4b-qdUmvW%2Fapp_bar_12.png?alt=media\&token=285d245d-088a-401a-8ebf-bb55dfac7273)

## titleSpacing

This parameter will change the distance of the title from left. So the direction is horizontal and the default value is zero.

```dart
  Widget _spaceBar() => AppBar(
        title: Text(PageName.APP_BAR),
        titleSpacing: 20,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkMRH3qHnPD0yor0Av%2Fapp_bar_13.png?alt=media\&token=8d98d8bf-2a52-46ae-b0d2-c73b8889ceef)

## toolbarOpacity

It will change the transparency of the elements of the `AppBar`.

```dart
 Widget _toolBar() =>
      AppBar(
        title: Text(PageName.APP_BAR),
        toolbarOpacity: 0.5,
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkO6ZVzDihStx4T07e%2Fapp_bar_14.png?alt=media\&token=f61b385c-6ce4-494f-9520-d0659080aaa5)

## bottomOpacity

We have used the `bottom` above, so the `bottomOpacity` will control the transparency of the part of the `bottom`.

```dart
 Widget _bottomOpBar() => AppBar(
        title: Text(PageName.APP_BAR),
        bottomOpacity: 0.5,
        bottom: PreferredSize(
          child: Container(
            alignment: Alignment.center,
            color: RED,
            constraints: BoxConstraints.expand(height: 50),
            child: Text(
              "bottom with  bottomOpacity = 0.5 ",
              style: TextStyle(fontSize: 20),
            ),
          ),
          preferredSize: Size(50, 50),
        ),
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkPGnIgBc8FmPm1_5j%2Fapp_bar_15.png?alt=media\&token=d15d2386-cc32-48dd-9cca-36d5b5d176d2)

## flexibleSpace

I put this parameter in the last, because it is a bit difficult to use. But if you use it in the `AppBar`, it is not so useful. So I will use a `SliverAppBar` to replace the `AppBar` to describe this parameter.&#x20;

```dart
Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
//              title: Text("hello"),
            expandedHeight: 100,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(PageName.APP_BAR),
              centerTitle: false,
              collapseMode: CollapseMode.parallax,
              background: Container(
                color: RED,
                constraints: BoxConstraints.expand(height: 100),
                child: Image.asset(
                  PageImage.FLUTTER_OPEN,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              SizedBox(
                height: 1000,
              ),
            ]),
          )
        ],
      ),
    );
```

We should replace all code  of the Scaffold with these code. It will show as below.

![default](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkSheNMBWqC_LPmfcb%2Fapp_bar_16.png?alt=media\&token=8776cd16-54a9-4ec8-885b-e6c007dccdbc)

When you scroll to top, It will show as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWkDW59JzwYMpEYfvMP%2F-LWkStLZbcBjqncCElAv%2Fapp_bar_17.png?alt=media\&token=02711a93-4f6d-4a81-97b5-f129dcd99d95)

That's nice!

## Conclusion

We have learned how to use the `AppBar` in the flutter. It is so common and important to us. So just keep going, we can learn very well about the widgets in the flutter.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | QQ Group  |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | 963828159 |





