{"id":19821,"date":"2020-12-03T12:55:05","date_gmt":"2020-12-03T12:55:05","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19821"},"modified":"2020-12-05T07:28:05","modified_gmt":"2020-12-05T07:28:05","slug":"scaffold-class-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/scaffold-class-in-flutter\/","title":{"rendered":"Scaffold class in Flutter"},"content":{"rendered":"\n

Scaffold<\/strong>\u00a0is a class in\u00a0flutter<\/strong><\/a>\u00a0which provides many widgets or we can say\u00a0APIs<\/a>\u00a0like Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar etc.\u00a0Scaffold<\/strong>\u00a0will expand or occupy the whole device screen. It will occupy the available space.<\/p>\n\n\n\n

Properties of Scaffold Class:<\/strong>\u00a0<\/p>\n\n\n\n

(i) appbar:-\u00a0It displays a horizontal bar which mainly placed at the top of the\u00a0Scaffold<\/em>.\u00a0appBar<\/em>\u00a0uses the widget\u00a0AppBar<\/em>\u00a0which has its own properties like elevation, title, brightness, etc.\u00a0<\/p>\n\n\n\n

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks'),),<\/code><\/p>\n\n\n\n

\"appBar<\/figure>\n\n\n\n

(ii) body:-It will display the main or primary content in the Scaffold. It is below the\u00a0appBar<\/em>\u00a0and under the\u00a0floatingActionButton<\/em>. The widgets inside the body are at the left-corner by default.\u00a0<\/p>\n\n\n\n

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks'),),body: Center(child: Text(\"Welcome to GeeksforGeeks!!!\",style: TextStyle(color: Colors.black,fontSize: 40.0,),),),<\/code><\/p>\n\n\n\n

\"body<\/figure>\n\n\n\n

(iii) floatingActionButton:-FloatingActionButton<\/em>\u00a0is a button that is placed at the right bottom corner by default.\u00a0FloatingActionButton<\/em>\u00a0is an icon button that floats over the content of the screen at a fixed place. If we scroll the page its position won\u2019t change, it will be fixed.\u00a0<\/p>\n\n\n\n

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks')),body:\u00a0 Center(child: Text(\"Welcome to GeeksforGeeks!!!\",style: TextStyle(color: Colors.black,fontSize: 40.0,),),),floatingActionButton: FloatingActionButton(elevation: 10.0,child: Icon(Icons.add),onPressed: (){\/\/ action on button press});}<\/code><\/p>\n\n\n\n

\"floatingActionButton<\/figure>\n\n\n\n

(iv) drawer:-drawer<\/em>\u00a0is 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. It is handled by the Scaffold.\u00a0<\/p>\n\n\n\n

drawer: Drawer(child: ListView(children: const<Widget>[DrawerHeader(decoration: BoxDecoration(color: Colors.green,),child: Text('GeeksforGeeks',style: TextStyle(color: Colors.green,fontSize: 24,),),),ListTile(title: Text('Item 1'),),ListTile(title: Text('Item 2'),),],),),<\/code><\/p>\n\n\n\n

\"drawer<\/figure>\n\n\n\n

(v) bottomNavigationBar:-bottomNavigationBar<\/em>\u00a0is like a menu at the bottom of the Scaffold. We have seen this navigationbar in most of the applications. We can add multiple icons or texts or both in the bar as items.\u00a0<\/p>\n\n\n\n

bottomNavigationBar: BottomNavigationBar(currentIndex : 0,fixedColor: Colors.green,items: [BottomNavigationBarItem(title: Text(\"Home\"),icon: Icon(Icons.home), ),BottomNavigationBarItem(title: Text(\"Search\"),icon: Icon(Icons.search), ),BottomNavigationBarItem(title: Text(\"Profile\"),icon: Icon(Icons.account_circle), ),],onTap: (intindexOfItem){}),<\/code><\/p>\n\n\n\n

\"bottomNavigationBar\"<\/figure>\n\n\n\n

(vi) backgroundColor:-\u00a0used to set the color of the whole\u00a0Scaffold\u00a0<\/em>widget.<\/p>\n\n\n\n

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff84FFFF),
body: SafeArea(
child: Center(
child: ( Text(‘Set Scaffold Background Color’) )
)
)
)
);
}}<\/p>\n\n\n\n

\"Set<\/figure>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Scaffold\u00a0is a class in\u00a0flutter\u00a0which provides many widgets or we can say\u00a0APIs\u00a0like Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar etc.\u00a0Scaffold\u00a0will expand or occupy the whole device screen. It will occupy the available space…. <\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[6331,2],"tags":[4534],"class_list":["post-19821","post","type-post","status-publish","format-standard","hentry","category-flutter","category-uncategorised","tag-android-apps"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19821"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19821\/revisions"}],"predecessor-version":[{"id":19822,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19821\/revisions\/19822"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}