Scaffold is a flutter widget which provides sub widgets or APIs like appbar, floatingActionButton, drawers, snack bars, and bottom sheets.
Scaffold expands and occupies the whole available screen to show content inside it.
Constructor of scaffold class:
Scaffold({ Key key, appBar, body, floatingActionButton, floatingActionButtonLocation, floatingActionButtonAnimator, persistentFooterButtons, drawer, endDrawer, bottomNavigationBar, bottom Sheet, backgroundColor, resizeToAvoidBottomPadding, resizeToAvoidBottomInset, primary, drawerDragStartBehavior, extendBody, extendBodyBehindAppBar, drawerScrimColor, drawerEdgeDragWidth, drawerEnableOpenDragGesture, endDrawerEnableOpenDragGesture })
- backgroundColor: used to set background color of scaffold.
- primary: used to tell whether a scaffold will be displayed or not.
- drawerScrimColor: This property will define the color of body content while the drawer is open.
Now we take a look at each widget inside the scaffold.
AppBar: 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. Appbar can be used to set action icons, title etc.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal[800],
title: Text('Flutter'),
),
);
}
Body: it will display main content in the scaffold. It’s below the appbar and under the floatingActionButton.
body: Center(
child: Text(
"Welcome to Flutter!!!",
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
),
),
floatingActionButton: Floatingactionbutton is a button displayed over the body widget at bottom right of screen. It is fixed at that position and won’t scroll while screen content scrolling.
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.teal[800],
elevation: 10.0,
child: Icon(Icons.add),
onPressed: () {
// action on button press
},
),
PersistentFooterButtons: This is a set of buttons placed at bottom of the screen and this will not scroll even after scrolling of body in the scaffold.
persistentFooterButtons: <Widget>[
IconButton(
icon: Icon(Icons.contacts), onPressed: () {},
),
IconButton(
icon: Icon(Icons.map), onPressed: () {},
),
IconButton(
icon: Icon(Icons.time_to_leave), onPressed: () {},
),
],
Drawer: Drawer is a slider menu which is displayed at side of the scaffold. We can set the drawer either at left or right by defining action to it. After defining the drawer in the scaffold it’ll set an action button and swipe gesture automatically to open and close the drawer menu. Here, endDrawer will be displayed from the right side.
drawer: Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.teal[800],
),
child: Text(
'Drawer Header',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
)
],
),
),
BottomNavigationBar: BottomNavigationBar is like a bottom bar widget which contains more than one option for quickly navigating between multiple screens. We can add multiple text labels, icons or both in this and can set different colors for selected items by using selectedItemColor. BottomNavigationBarItems widget is used to add an item in bottomNavigationBar which contains text, icon, activeIcon and backgroundColor as an argument. See below code snippet for more clarity.
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.green,
items: [
BottomNavigationBarItem(
title: Text('Home'), icon: Icon(Icons.home)),
BottomNavigationBarItem(
title: Text('Contacts'), icon: Icon(Icons.contacts)),
BottomNavigationBarItem(
title: Text('Favorite'), icon: Icon(Icons.favorite))
],
),
Conclusion: This article is published to give brief details about flutter platform.
Thank you for reading this article. if you still need any help then you can contact us on info@tagnism.com