This is the 19th day of my participation in the Genwen Challenge

preface

Last time we talked about the use of BottomAppBar, in actual projects we use the top AppBar more frequently, today we will take a look at the use of AppBar in detail.

AppBar

AppBar has been used from time to time in the last dozen or so articles, but it is usually used to set a title and navigate. In this article we will take a closer look at AppBar’s parameter blending, and you will get a sense of its power and flexibility.

The overall structure

The overall structure of AppBar is as follows, divided into three parts from top to bottom

  • Main Area (Top Area)
    • Leading (front)
    • Title (Title)
    • Actions (Action bar)
  • FlexibleSpace (Flexible Area)
  • The bottom area



To see effect

The overall use

Similar to BottomNavigationBar mentioned above, appBar property is usually set in the Scaffold.

Scaffold(
  // Set AppBar here
  appBar: AppBar(
    title: Text('AppBar - ZeroFlutter'),
  ),
  body: [bodyWidget]
)
Copy the code

See the effect

AppBar automatically ADAPTS the top safe distance for us

Main Area (Top Area)

Leading (front)

This part, by default, has nothing, and when we push to a new page, the back button appears. The return button looks different on different platforms, so let’s take a look

  • iOS
// Because I'm running on the iOS emulator by default, I'm showing iOS. If it's Android, it's Android by default
AppBar()
Copy the code

  • Android
// Here we use Theme to set the platform
Theme(
  data: ThemeData(
    / / Android style
    platform: TargetPlatform.android,
  ),
  child: AppBar(),
)
Copy the code

  • The custom
AppBar(
  leading: Icon(Icons.home),
)
Copy the code

  • Set the Icon theme
AppBar(
  // Set the background color
  backgroundColor: Colors.white,
  // Set the icon theme
  iconTheme: IconThemeData(
    / / color
    color: Colors.grey,
    // Opacity
    opacity: 0.5,),)Copy the code

  • Set the width
AppBar(
  leadingWidth: 100.)Copy the code

Title (Title)

Here is all the code written together, see the comments to the table below, to see the effect, the best is to try your own

// Default style
AppBar(
  title: Text('ZeroFlutter'),
),
SizedBox(height: 10),
Theme(
  data: ThemeData(
    / / Android style
    platform: TargetPlatform.android,
  ),
  child: AppBar(
    title: Text(
      'ZeroFlutter',),// The title is centered
    // centerTitle: true,
    // Title spacing is 0
    // titleSpacing: 40,
    // automaticallyImplyLeading: false,
  ),
),
SizedBox(height: 10),
AppBar(
  // Customize double headers
  title: Column(
    children: [
      Text(
        'ZeroFlutter', style: Theme.of(context).textTheme.headline6! .copyWith( color: Colors.white, ), ), Text('ZeroFlutter', style: Theme.of(context).textTheme.subtitle1! .copyWith( color: Colors.white, ), ) ], ), ),Copy the code
iOS Android centerTitle: true
The front of automaticallyImplyLeading: false (remove) TitleSpacing: 0 (left/right titleSpacing) Custom title
  • Of course, you can be more customized, because title is a Widget
AppBar(
  // Set it to FlutterLogo
  title: FlutterLogo(),
)
Copy the code

Action

AppBar(
  title: Text('ZeroFlutter'),
  / / add the action
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.add),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.delete),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.update),
    ),
  ],
  // Customize icon styles
  actionsIconTheme: IconThemeData(
    color: Colors.red,
  ),
)
Copy the code
  • preview
The default styles Custom styles

FlexibleSpace (Flexible Area)

Flexible space is not flexible in the AppBar unless you refresh its height, which we’ll talk about in more detail in SliverAppBar later

AppBar(
  title: Text('ZeroFlutter'),
  flexibleSpace: SizedBox(
    height: 160,
    width: double.infinity,
    child: Image.network(
      'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
      fit: BoxFit.cover,
    ),
  )
)
Copy the code
  • See the effect

The bottom area

You can see from the name that this is actually what we use when we need to put something at the bottom of the AppBar, like TabBar, or whatever

AppBar(
  title: Text('AppBar - ZeroFlutter'),
  // Set the bottom content
  bottom: PreferredSize(
    // Set the size
    preferredSize: Size(375.120),
    // Set constraints
    child: SizedBox(
      width: 375,
      height: 120,
      child: Image.network(
        'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',
        fit: BoxFit.cover,
      ),
    ),
  ),
)
Copy the code

We can see that we don’t use the Widget directly. Instead, we have a PreferredSize nested Widget, which is a proxy Widget that encapsulates and implements the PreferredSizeWidget. There are a few things to note here.

  • Need to be nestedPreferredSizeTabBar and others have been implementedPreferredSizeWidgetExcept the Widget
  • PreferredSize is the desired size and cannot set the child constraint, so we need to set it to childwidgetSet up the constraints

See the effect

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • Flutter-AppBar

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible