Flutter — ADDING APPBAR WIDGETS

Create a new Flutter project and name it demo_appbar, For this project, you need to create only the pages folder. The goal of this app is to provide a look at how to use the basic widgets, not necessarily to design the best‐looking UI.

1. Open the main.dart file. Change the primarySwatch property from blue to lightGreen.

• primarySwatch: Colors.lightGreen,

2. Open the home.dart file. Start by customizing the AppBar widget properties.

3. Add to the AppBar a leadingIconButton. If you override the leading property, it is usually an IconButton or BackButton.

leading: IconButton(
 icon: Icon(Icons.menu),
 onPressed: () { },
),

4. The title property is usually a Text widget, but it can be customized with other widgets such as a DropdownButton.
title: Text('Home'),

5. The actions property takes a list of widgets; add two IconButton widgets.

actions: <Widget>[
 IconButton(
  icon: Icon(Icons.search),
  onPressed: () {},
 ),IconButton(
  icon: Icon(Icons.more_vert),
  onPressed: () {},
 ),
],

6. Because you are using an Icon for the flexibleSpace property, let's add a SafeArea and an Icon as a child.

flexibleSpace: SafeArea(
 child: Icon(
  Icons.photo_camera,
  size: 75.0,
  color: Colors.white70,
 ),
),

7. Add a PreferredSize for the bottom property with a Container for a child.

bottom: PreferredSize(
 child: Container(
  color: Colors.lightGreen.shade100,
  height: 75.0,
  width: double.infinity,
  child: Center(
    child: Text('Bottom'),
  ),
 ), preferredSize: Size.fromHeight(75.0),
),

HOW IT WORKS

You learned how to customize the AppBar widget by using widgets to set the title, toolbar, leading, and actions properties. All the properties that you learned about in this example are related to customizing the AppBar.