AppBar Widget
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,
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
title
Displays a title at the app bar by taking a TextWidget .To center the title one has to use the centreTitle property and set it to true.
Action
Displays a list of widgets on the right side of the appBar
bottom
Normally takes a TabBar widget.To create a TabBar one can use two approaches
- Wraping the Scaffold widget with the DefaultTabController which is a simpler approach
- Using the TabController to programmatically control the Tab.
Next Topic
Drawer
FloatingActionButton
BottomNavigation
website to visit for more reference