In iOS, you have to write a nice navigation bar, and if you want to customize it yourself, it takes a while, maybe you have to rewrite it completely, and there are a lot of things in the navigation bar that don’t work when you set them up, and it’s still a nightmare for beginners, even for people who are three or four years old.

In Flutter, you can choose to customize a view as a navigation bar, as you can in iOS, but Flutter is much more powerful than the navigation bar in iOS. Next, we take a look at the navigation bar of Flutter.

1. Structure To use the navigation bar of the system, you must follow a certain structure to write the page.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text('Set rounded corners :ClipRRect'),),body: Container(),
    );
  }
Copy the code

Case 2.

Above is a basic navigation bar. The default color of the navigation bar and the back button are white, so you can’t see them clearly. Here is black.



Isn’t that good? You can also set the title style here:

title: Text('Set rounded corners :ClipRRect'.style: TextStyle(fontSize: 12.color: Colors.red),),
Copy the code



Is it more flexible? Next, set the button on the right:

actions: [
          CloseButton(),
          IconButton(
            tooltip: 'button'.icon: Icon(Icons.share),
            iconSize: 30.color: Colors.white,
            onPressed: () {},)],Copy the code

Here’s a close button and a share button.



You need a few buttons, just a few buttons, very convenient. In addition to buttons, you can also set up normal text buttons by putting widgets in them. So the button on the right we learned, how do we set the button on the left?

leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.white,
            size: 20,),color: const Color(0xFF1C2026),
          tooltip: MaterialLocalizations.of(context).backButtonTooltip,
          onPressed: () { Navigator.maybePop(context); },),Copy the code



Can you see how the title moves to the left? We need to enclose a Center component in the title Text component:

title: Center(
            child: Text(
              'Set rounded corners :ClipRRect'.style: TextStyle(
                  fontSize: 12.color: Colors.red
              ),
            )
        ),
Copy the code



Don’t worry, it’s not over yet. Next, let’s adjust the component color as follows:



Do you see anything wrong? Yeah, that’s the line under the navigation bar, it’s android style, how do you make it iOS style?

elevation: 0.5.Copy the code

Add the above setting and the height becomes 0.5.



The aesthetics will come up immediately, please ignore my main heading font Settings, mainly for you to see the difference. In addition to what I show you, there are some other attributes can be set, we see the needs of it, the above several are more commonly used, can meet most of the needs.

	this.leading,
    this.automaticallyImplyLeading = true.this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shadowColor,
    this.shape,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true.this.centerTitle,
    this.excludeHeaderSemantics = false.this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0.this.bottomOpacity = 1.0.this.toolbarHeight,
    this.leadingWidth,
Copy the code

There’s one interesting thing here, title and centerTitle, and what we just set is title and we’ve added a center component, centerTitle is a bool, and we’re going to center the title, so you can do that yourself.