Flutter AppBar

Appbar in flutter consists of a toolbar with other widgets, like TabBar, Flexible SpaceBar, icon buttons, etc. if the AppBar is in Scaffold with Drawer so you will be able to see the Drawer icon which operates drawer else it shows back Icon which is used to navigate to previous routes.

Below is the syntax from which you can make AppBar.

appBar: AppBar(
 title: Text(title),
)

Properties of AppBar

There are many properties available in AppBar, we are going to explain some of them.

Title

By the word we can understand that this is the title for our appbar which will appear as a text, title in appbar will take Widget as a value, suppose you want to show a Text as a title so you need to define it like =>  title: Text(‘this is your title’), here we have used TextWidget, and about Text widget properties you can visit our TextWidget article. see below syntax for AppBar title.

Leading

This property is used to set icon in the app bar. You can set your logo, drawer icon, back press icon whatever you want here, and also can perform click action on it. Check below snippet code for this, here we have used IconButton Widget, for understanding its property you can visit our IconButton article.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 title: Text(
   'Example of AppBar',
   style: TextStyle(fontSize: 15.0),
 ),
),

leadingWidth

With the help of this widget, you can set LeadingIcon Width. By default the leading width is 56.0, so you can reduce it if you want. Check the difference using the below code.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),

 leadingWidth: 20.0,
 title: Text(
   'Example of AppBar',
   style: TextStyle(fontSize: 15.0),
 ),
),

Elevation

Using this property you can set the elevation of the app bar. This property is used to control the shadow below the appbar. Check the below code for this property.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 leadingWidth: 20.0,
 elevation:10.0,
 title: Text(
   'Example of AppBar',
   style: TextStyle(fontSize: 15.0),
 ),
),

shadowColor

You can set shadow color using this property, which will show below the app bar, check the below code for this.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 leadingWidth: 20.0,
 elevation:10.0,
 shadowColor: Colors.green,
 title: Text(
   'Example of AppBar',
   style: TextStyle(fontSize: 15.0),
 ),
),

Shape

Now in your app, you want to use a rounded cornered appbar, so using this property can make it easier. Check the below code snippet for this property.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 leadingWidth: 20.0,
 shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(25.0),
         bottomRight: Radius.circular(25.0)
     )
 ),
 elevation:8.0,
 shadowColor: Colors.black,
 title: Text(
   'Example of AppBar by CodingDunia',
   style: TextStyle(fontSize: 15.0),
 ),
),

backgroundColor

This property is used to set the background color of your appbar, check the below code for this property.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 leadingWidth: 20.0,
 backgroundColor: Colors.black,
 shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(25.0),
         bottomRight: Radius.circular(25.0)
     )
 ),
 elevation:8.0,
 shadowColor: Colors.black,
 title: Text(
   'Example of AppBar by CodingDunia',
   style: TextStyle(fontSize: 15.0),
 ),
),

centerTitle

If you want to make your title in the center of the appbar, this property is useful for you. The type of this property is boolean so you can set true or false in the value of this property, check the below code for this.

appBar: AppBar(
 leading: IconButton(
   icon: const Icon(Icons.ac_unit),
   onPressed: () {
     //Perform Action here whatever you want
   },
   tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
 ),
 leadingWidth: 20.0,
 backgroundColor: Colors.black,
 centerTitle: true,
 shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.only(
         bottomLeft: Radius.circular(25.0),
         bottomRight: Radius.circular(25.0)
     )
 ),
 elevation:8.0,
 shadowColor: Colors.black,
 title: Text(
   'Example of AppBar',
   style: TextStyle(fontSize: 15.0),
 ),
),

There are many more properties available in the app bar, we have explained some important properties, for different types of appbar you can visit here. For now, let’s see what we have cooked for the appbar, Below is the complete example of the appbar with all the above properties.

Complete Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(),
   );
 }
}

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

class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(
         leading: IconButton(
           icon: const Icon(Icons.ac_unit),
           onPressed: () {
             //Perform Action here whatever you want
           },
           tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
         ),
         leadingWidth: 20.0,
         backgroundColor: Colors.black,
         centerTitle: true,
         shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.only(
                 bottomLeft: Radius.circular(25.0),
                 bottomRight: Radius.circular(25.0)
             )
         ),
         elevation:8.0,
         shadowColor: Colors.black,
         title: Text(
           'Example of AppBar',
           style: TextStyle(fontSize: 15.0),
         ),
       ),
       body: Container(
         alignment: Alignment.center,
         padding: EdgeInsets.all(10.0),
         child: Text(
           'This is the example of AppBar',
           textAlign: TextAlign.center,
           maxLines: 2,
           style: TextStyle(
               color: Colors.black,
               fontSize: 20.0,
               fontWeight: FontWeight.bold),
         ),
       ));
 }
}

Output

Below is the output image of the above code.