flutter-tutorial

Flutter AppBar

AppBar is a flutter material widget that is widely utilised in a wide range of apps. The toolbar that we see in every application will be displayed by Appbar. It also shows the screen title, the back (‘-‘) / close (‘x’) buttons, and operations like search, among other things. Icon buttons are used to signify the actions. It’s also in charge of showing a PopupMenuButton (overflow menu), which is utilised for less-frequently performed tasks.

AppBar Creation and Display

In flutter, we must call the appbar’s function Object() { [native code] } and supply the required attributes. This widget has no needed properties, although we will typically use the title property. The current screen’s contents are described using this property.

Appbar Widget’s Most Important Features

  • actions: If the AppBar is a row, this property accepts a list of widgets as an argument, which will be displayed after the title.
  • title: To be displayed in the AppBar, this property usually takes the main widget as a parameter.
  • backgroundColor: This parameter is used to change the colour of the Appbar’s background.
  • elevation: This parameter specifies the z-coordinate at which this app bar should be placed in relation to its parent.
  • shape: This attribute is used to give the Appbar a form and control its shadow.

Example:

import 'package:flutter/material.dart';
 
void main() {
  runApp(App()); //MaterialApp
}
 
MaterialApp App() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Learn Code Zone'),
      ), //AppBar
      body: const Center(
        child: Text(
          'Learn Code Zone',
          style: TextStyle(fontSize: 24),
        ), //Text
      ), // center
    ), //Scaffold
    debugShowCheckedModeBanner: false,
  );
}

Flutter AppBar Properties

There are a lot of properties for appbar widget, we will discuss a few properties which are mostly used. Try the rest for yourself.

  • leading
  • automaticallyImplyLeading
  • title
  • centerTitle
  • backgroundColor
  • 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.

import 'package:flutter/material.dart';

void main() {
  runApp(App()); //MaterialApp
}

MaterialApp App() {
  return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            leading: Icon(Icons.arrow_back),
          ),
          body: Container()));
}

Output :

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.

import 'package:flutter/material.dart';

void main() {
  runApp(App()); //MaterialApp
}

MaterialApp App() {
  return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: true,
          ),
          drawer: Drawer(),
          body: Container()));
}

Output :

title

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

import 'package:flutter/material.dart';

void main() {
  runApp(App()); //MaterialApp
}

MaterialApp App() {
  return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Learn Code Zone"),
          ),
          body: Container()));
}

Output :

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.

import 'package:flutter/material.dart';

void main() {
  runApp(App()); //MaterialApp
}

MaterialApp App() {
  return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Learn Code Zone"),
            centerTitle: true,
          ),
          body: Container()));
}

Output :

backgroundColor

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

import 'package:flutter/material.dart';

void main() {
  runApp(App()); //MaterialApp
}

MaterialApp App() {
  return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Learn Code Zone"),
            actions: [Icon(Icons.more_vert)],
            backgroundColor: Colors.deepOrange,
          ),
          body: Container()));
}

Output :

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.

Output :

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.