Scaffold Widget

a deep dive to the scaffold widget in flutter.we’ll have a look on how it is used its properties and how to initialize the widget

lets talk widgets lets do widgets

Scaffold Widget

Scaffold provides a framework to implement the basic material design layout to the application.Scaffold widget provides access to APIs like Drawer , SnackBar ,BotttomNavigationBar ,FloatActionButton ,AppBar etc.The scaffold widgets tends to expand and occupy the whole screen of the device.

Class Hierarchy :

Class Hierarchy

Constructor of the Scaffold class:

const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior
          = DragStartBehavior.start,
    this.extendBody = false,
    this.drawerScrimColor,
})

Properties of Scaffold Widget

• appBar widget :its displays a horizontal bar which mainly placed at the top of the scaffold .appBar uses the widget AppBar which has its won properties like elevation , title etc

• body: it display the primary content in the Scaffold.It is below the appBar and under the floatingActionButton .Widgets in the body are displayed at the left_corner by default.

sample code of simple body

output

• floatingActionButton : FloatingActionButton is a button that is placed at the right bottom corner by default. FloatingActionButton is an icon button that floats over the content of the screen at a fixed place.

sample code of a basic floatActionButton

Here the elevation property is used to give a shadow effect to the button. Icon is used to put the icon of the button using some.The onPressed() is a function that will be called when the button is pressed and the statements inside the function will be executed.

output

• drawer : drawer is a slider menu or a panel which is displayed at the side of the Scaffold. The user has to swipe left to right or right to left according to the action defined to access the drawer menu. In the Appbar, an appropriate icon for the drawer is set automatically at a particular position. The gesture to open the drawer is also set automatically

sample code of a basic floatActionButton

we divided the panel into two parts, Header and Menu.DrawerHeader is used to modify the header of the panel. In header we can display icon or details of user according to the application. We have used ListTile to add the items to the menu.

output

• bottomNavigationBar : bottomNavigationBar is like a menu at the bottom of the Scaffold

basic sample code of bottomNavigationBar

we use BottomNaviagtionBar to display the bar.The color of the active icon is set by the fixedColor property.The BottomNavigationBarItems adds items in the bar where else the onTap function performs an action when the icons are tapped.

output

• backgroundColor: used to set the color of the whole Scaffold widget
• floatingActionButtonLocation: This property is responsible for the location of the floatingActionBotton.

Next topic is Drawer

For more updates follow widget Talk and check out our Ig account

websites to visit for further reference on scaffold Widget

Scaffold class in Flutter with Examples - GeeksforGeeks

Bottom Navigation Title To Label

Scaffold class - material library - Dart API

Flutterwave

FlutterDevs

flutterEnthusiast