AppBar Widget

4 min readMay 4, 2021

Lets Talk Widget Lets do Widget

AppBar Widget

AppBar Widget is a material design widget that is visible at the top most part of an app.It consists of a toolbar and other widget such as TabBar,FlexibleSpaceBar.The AppBar shows one or more actions via the iconButton which are potentially followed by the PopUpMenuButton/overflow menu

An AppBar widget is typically used in the Scaffold.appBar property which places the appBar at the top of the screen with a fixed height. AppBar widget places its content based on the MediaQuery’s padding to avoid system UI(user interface) intrusions.When animating an AppBar it is advisable to wrap it with a MediaQuery widget to adjust a smooth padding for the animation

A scroll-able AppBar is referred to as SilverAppBar which is an AppBar widget emended into a CustomScrollView widget .

The AppBar toolbar displays widgets like ;

leading
title
actions
bottom

The bottom is usually used for a TabBar.

AppBar Constructor

AppBar(

{Key? key,

Widget? leading,

bool automaticallyImplyLeading: true,

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: true,

bool? centerTitle,

bool excludeHeaderSemantics: false,

double? titleSpacing,

double toolbarOpacity: 1.0,

double bottomOpacity: 1.0,

double? toolbarHeight,

double? leadingWidth,

bool? backwardsCompatibility,

TextStyle? toolbarTextStyle,

TextStyle? titleTextStyle,

SystemUiOverlayStyle? systemOverlayStyle}

)

for more information visit appBar constructor

Properties of the AppBar

actions :a list of widgets displayed in a row after the title widget .
actionIconTheme: themes the icons that appear on the AppBar
backgroundColor : fill the color to use in the AppBar
Bottom: this widget appears across the bottom of the appBar.
bottomOpacity :defines how opaque the bottom part of the app bar is
CenterTitle : decides whether the title should be centered.
elevation : the Z- coordinate at which to place this app bar relatively to its parent.
flexible Space : widget stacked behind the toolbar and the tab bar where its height is the same as of the app bar’s overall height.
foregroundColor : sets the default color for the icons, text within the app bar
IconTheme : the color ,opacity and size to use for the toolbar icons
leading : widget that displays before the toolbar’s title.
leadingWidth: defines the width of leading widget.
Primary : whether the AppBar is being displayed at the top of the screen .
shadowColor : color of the shadow below the app bar.
shape : the shape of the app bar and its shadow.
textTheme : typographic styles to use for text inside the appBar.
title :the primary widget displayed in the app bar ,showing the title.
toolbarHeight : defines the height of the toolbar component in the appbar.
toolbarOpacity : defines the opaque ness of the toolbar of the app bar

For more properties associated with with the appbar have a look the the AppBar flutter doc form flutter official website

leading

Displays an icon at the left side of the appBar .In instances where the leading isn’t defined and there is a route defined flutter automatically adds a previous route button for us