×
×

Spread the love

In this tutorial you will learn how to use appbar in flutter with example. We will also customize it’s style with different properties.

Flutter AppBar Widget

AppBar is a material widget in flutter which is most commonly used in almost all kinds of applications. Appbar will display the toolbar that we see in every application. It also displays several widgets like the title of the screen, the back button (‘<-‘) / close button (‘x‘) & actions like search, etc. The actions are indicated using icon buttons. It is also responsible for displaying a PopupMenuButton ( overflow menu ) which is used for actions that are performed less frequently.

Creating And Displaying AppBar

To create an appbar in flutter we have to call its constructor and provide required properties. There are no required properties for this widget but generally, we will use the title property. This property is used to describe the contents of the current screen.

Flutter AppBar Constructor :

AppBar(
{Key? key, 
Widget? leading, 
bool automaticallyImplyLeading, 
Widget? title, 
List<Widget>? actions, 
Widget? flexibleSpace, 
PreferredSizeWidget? bottom, 
double? elevation, 
Color? shadowColor, 
ShapeBorder? shape, 
Color? backgroundColor, 
Color? foregroundColor, 
Brightness? brightness, 
IconThemeData? iconTheme, 
IconThemeData? actionsIconTheme, 
TextTheme? textTheme, 
bool primary, 
bool? centerTitle, 
bool excludeHeaderSemantics, 
double? titleSpacing, 
double toolbarOpacity, 
double bottomOpacity, 
double? toolbarHeight, 
double? leadingWidth, 
bool? backwardsCompatibility, 
TextStyle? toolbarTextStyle, 
TextStyle? titleTextStyle, 
SystemUiOverlayStyle? systemOverlayStyle}
) 

Basic implementation of AppBar

Scaffold(
    appBar: AppBar(
      ),   
  );

Output :

flutter appbar example output

Flutter AppBar Properties

There are a lot of properties for appbar widget, but we can’t discuss them all in this tutorial. We will discuss a few properties which are mostly used. Try the rest for yourself.

  • leading
  • automaticallyImplyLeading
  • title
  • centerTitle
  • actions
  • elevation
  • shadowColor
  • shape
  • backgroundColor
  • textTheme
  • actionsIconTheme
  • toolbarHeight

leading

We will use leading property to display a widget at the start ( left ) of the appbar title. It can be any widget like Text, Icon, Image etc. But generally we will use an icon for leading.

Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.arrow_back),
      ),
      body:Container()
    );

Output :

flutter appbar leading

automaticallyImplyLeading

It is useful when leading property is not provided with a widget. If we set this property to true it will make the appbar automatically imply a leading widget for us. For instance if we add a drawer to the scaffold it will automatically display a menu icon to the leading. We can disable this behavior it by setting automaticallyImplyLeading to false. By default this value will be true.

Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
      ),
      drawer: Drawer(),
      body:Container()
    );

Output :

appbar automaticall imply leading true
Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
      ),
      drawer: Drawer(),
      body:Container()
    );

Output :

flutter appbar example output

title

We will use this property to display a title typically a text widget to describe the contents of the current screen.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
      ),
      body:Container()
    );

Output :

appbar title

centerTitle

We will use this property to display the title widget to the center of the appbar. Setting this property to true will display the title in the center.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        centerTitle: true,
      ),
      body:Container()
    );

Output :

flutter appbar center title

actions

Actions are nothing but a list of widgets displayed to the right of the appbar. Generally most common actions are represented with IconButtons and the rest with a popupMenuButton which is also called as overflow menu.

Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
            },
          ),
          IconButton(
              icon: Icon(Icons.more_vert,),
              onPressed: () {
              },
          )
        ],
      ),
      body:Container()
    );

Output :

flutter appbar widget actions

elevation

We will use this property to provide elevation to the appbar.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.search),
          Icon(Icons.more_vert)
        ],
        elevation: 8,
      ),
      body:Container()
    );

Output :

appbar elevation in flutter

shadowColor

We will use this color to apply or change the shadow color when the appbar is elevated.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.search),
          Icon(Icons.more_vert)
        ],
        elevation: 8,
        shadowColor: Colors.deepOrange,
      ),
      body:Container()
    );

Output :

appbar shadow color

shape

If we want to change the shape of the appbar we can change it by using this property. In this example i am using stadiumBorder. If you wanna try other shapes just refer shaping RaisedButton section of flutter RaisedButton widget Example.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.search),
          Icon(Icons.more_vert)
        ],
        shape: StadiumBorder(),
      ),
      body:Container()
    );

Output :

flutter appbar shape

backgroundColor

We can change the background color of the appbar by using backgroundColor property.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.more_vert)
        ],
        backgroundColor: Colors.deepOrange,
      ),
      body:Container()
    );

Output :

appbar background color

textTheme

If we want to customize the appbar’s text like changing color, size, weigth etc we can do so by using the textTheme property.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.more_vert)
        ],
        textTheme: TextTheme(
          headline6: TextStyle(
             color: Colors.black,  
             fontSize: 20,  
             fontWeight: FontWeight.bold
          )
        ),
      ),
      body:Container()
    );

Output :

flutter appbar text theme

actionsIconTheme

This property is used to customize the action icons of the appbar like changing color size etc.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.more_vert)
        ],
        actionsIconTheme: IconThemeData(color:Colors.black, size: 40),
      ),
      body:Container()
    );

Output :

flutted appbar action icon theme

toolbarHeight

As per material guidelines the toolbar height should be 56 which is the default. If we want to change the height of the toolbar we can change it using the toolbarHeight property.

Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          Icon(Icons.search)
        ],
        toolbarHeight: 70,
      ),
      body:Container()
    );

Output :

appbar toolbar height

Flutter AppBar Example

Let’s create an example where we display an appbar with a leading icon along with title and some actions. The leading icon will be a drawer and the actions will be IconButtons for search and overflow menu (three dots).

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'widgets/add_entry_dialog.dart';
void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Exxpansion Panel List',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter AppBar Example"),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
            },
          ),
          IconButton(
              icon: Icon(Icons.more_vert,),
              onPressed: () {
              },
          )
        ],
        actionsIconTheme: IconThemeData(size: 32,),

      ),
      drawer: Drawer(),
      body:Container()
    );
  }
}

Output :

flutter appbar example tutorial

That brings an end to the tutorial on how to use AppBar widget in flutter with example. I hope you understand how to create and display or show appbar in flutter. Let’s catch up with some other widget in the next post. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference : Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.