Understanding the Basics :
An AppBar consists of a toolbar and other widgets, such as a TabBar and a FlexibleSpaceBar.
App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen. The AppBar displays the toolbar widgets, leading, title, and actions, above the bottom (if any). The bottom is usually used for a TabBar. If a flexible space widget is specified then it is stacked behind the toolbar and the bottom widget.
Creating an AppBar in Flutter :
As mentioned above, the AppBar is primarily a part of the Scaffold Widget, since it provides an easy gateway to create the AppBar. In order to create a simple AppBar, AppBar class can be used. The general constructor looks like below,
AppBar(title: Text("Hello FlutterCentral"),
The constructor of AppBar looks like,
AppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation: 4.0, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, double titleSpacing: NavigationToolbar.kMiddleSpacing, double toolbarOpacity: 1.0, double bottomOpacity: 1.0 })
There are a lot of properties that are part of the AppBar class. We will be seeing the important properties that help in creating the AppBar.
Sample Code :
import "package:flutter/material.dart"; void main() { runApp(MaterialApp( title: "Hello Nikhil, home: Scaffold( appBar: AppBar( title: Text("How Are You Nikhil"), ), ), )); }
For More Info About Flutter :
Check Out Live Flutter Web Demo: http://nikhil.cf/