Flutter - AppBar Widget - GeeksforGeeks

22 Oct, 2020
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a flutter application is a widget or a combination of widgets. So AppBar is also a built-in class or widget in flutter which gives the functionality of the AppBar out of the box. The AppBar widget is based on Material Design and much of the information is already provided by other classes like MediaQuery, Scaffold as to where the content of the AppBar should be placed. Though the AppBar class is very flexible and can be easily customized, we can also use SilverAppBar widget which gives scrollable functionality to the app bar. Or we can create our own custom app bar from scratch.
AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)

actions: This property takes in a list of widgets as a parameter to be displayed after the title if the AppBar is a row.
title: This property usually takes in the main widget as a parameter to be displayed in the AppBar.
backgroundColor: This property is used to add colors to the background of the Appbar.
elevation: This property is used to set the z-coordinate at which to place this app bar relative to its parent.
shape: This property is used to give shape to the Appbar and manage its shadow.
Example 1:
Dart
import 'package:flutter/material.dart'; void main() {  runApp(MaterialApp(    home: Scaffold(      appBar: AppBar(        title: Text('GeeksforGeeks'),      ), //AppBar      body: const Center(        child: Text(          'GeeksforGeeks',          style: TextStyle(fontSize: 24),        ), //Text      ), // center    ), //Scaffold    debugShowCheckedModeBanner: false, //Removing Debug Banner  )); //MaterialApp}
Output:
Explanation:
First, we have imported the material.dart file as the AppBar widget utilizes it, we will also do the same in the following two examples. Then we have our main function calling runApp. At top, we have MaterialApp widget followed by Scaffold. The MaterialApp widget provided Style to AppBar and the Scaffold widget by default places the AppBar widget at the top of the screen. This is just the bare basic out of the box AppBar provided by flutter. This AppBar is utilizing only the title property of the AppBar class, which takes in the main widget to be displayed in the AppBar. In this case, it is a Text widget. 
In the body, we have a child text widget inside the center widget displaying the text ‘GeeksforGeeks‘, with a font size of 24. In the end, the debug banner has been disabled. This will be followed by the next two examples below.
Example 2:
Dart
import "package:flutter/material.dart"; void main() {  runApp(MaterialApp(    home: Scaffold(      appBar: AppBar(        title: Text("GeeksforGeeks"),        titleSpacing: 00.0,        centerTitle: true,        toolbarHeight: 60.2,        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(360)),        elevation: 0.00,        backgroundColor: Colors.greenAccent[400],      ), //AppBar      body: const Center(        child: Text(          'GeeksforGeeks',          style: TextStyle(fontSize: 24),        ), //Text      ), //Center    ), //Scaffold    debugShowCheckedModeBanner: false, //Removing Debug Banner  )); //MaterialApp}
Output:
Explanation:
Here the AppBar widget is utilizing seven properties in total. It starts with the title ‘GeeksforGeeks’. The second is the titlespacing which takes in double as a parameter and in this case, it is set to 00.0 to keep text close together. The third property is centerTitle which takes in boolean as a parameter and is set to true here. The fourth property is toolbarHeight which also takes in double as a parameter. This property provides a shadow underneath the AppBar which in turn makes it look elevated. The fifth property is shape it is utilized to give a different shape to the AppBar by modifying the border of the AppBar. The sixth property is elevation, it defines the z-coordinates at which the AppBar is to be placed with respect to its parent. It also takes in double as a parameter. And the last is the backgroundColor which controls the background color of the AppBar, in this case, we have the signature geeksforgeeks greenAccect.
Example 3:
Dart
import "package:flutter/material.dart"; void main() {  runApp(MaterialApp(    home: Scaffold(      appBar: AppBar(        title: Text("GeeksforGeeks"),        actions: <Widget>[          IconButton(            icon: Icon(Icons.comment),            tooltip: 'Comment Icon',            onPressed: () {},          ), //IconButton          IconButton(            icon: Icon(Icons.settings),            tooltip: 'Setting Icon',            onPressed: () {},          ), //IconButton        ], //<Widget>[]        backgroundColor: Colors.greenAccent[400],        elevation: 50.0,        leading: IconButton(          icon: Icon(Icons.menu),          tooltip: 'Menu Icon',          onPressed: () {},        ), //IconButton        brightness: Brightness.dark,      ), //AppBar      body: const Center(        child: Text(          "Geeksforgeeks",          style: TextStyle(fontSize: 24),        ), //Text      ), //Center    ), //Scaffold    debugShowCheckedModeBanner: false, //Removing Debug Banner  )); //MaterialApp}
Output:
Explanation:
Here we can see that in addition to the title on the app Bar we have three more icons on the AppBar, one on the left and two on the right of the title. This AppBar widget starts with the usual title property which is taking Text widget as a parameter. The title is followed by the action property which takes in a list of widgets as a parameter to be displayed after the title if the AppBar is a row. In this case, we can see the two icons namely the comment and setting. These two icons are  IconsButton widgets, utilizing three properties namely icon, tooltip, and onPressed function. The onPressed function is not specified in any of the IconButton so it is null. The icon property takes in string as a parameter which is the name of the specific icon. The tooltip property also takes in a string as the parameter which is displays in a floating label, while hovering with the mouse or on the long-press.  In the first IconButton we have Icons.comment & Comment Icon and in the second IconButton we have Icons.setting & Setting Icon as the parameter for the icon and tooltip respectively.  Now, all this is followed but the backgroundColor and elevation are set to Colors.greenAccent[400] and 50.0 respectively. After that, we have the leading property which takes in a widget as a parameter, to be displayed before the title in the AppBar. In this case, the leading is also a IconButton, which displays a menu icon. The onPressed property is not mentioned and the tooltip property is given a parameter of string ‘Menu Icon’. And the body is similar to the first and second examples.
ankit_kumar_
android
Flutter
Flutter-widgets
Android
Articles
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android Architecture
How to Create and Add Data to SQLite Database in Android?
MVVM (Model View ViewModel) Architecture Pattern in Android
Resource Raw Folder in Android Studio
Broadcast Receiver in Android With Example
Tree Traversals (Inorder, Preorder and Postorder)
SQL | Join (Inner, Left, Right and Full Joins)
find command in Linux with examples
How to write a Pseudo Code?
Analysis of Algorithms | Set 1 (Asymptotic Analysis)