{"id":2071,"date":"2022-04-07T18:45:20","date_gmt":"2022-04-07T18:45:20","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2071"},"modified":"2022-04-07T18:45:20","modified_gmt":"2022-04-07T18:45:20","slug":"background-color-and-other","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/background-color-and-other\/","title":{"rendered":"Background Color and other"},"content":{"rendered":"\n

backgroundColor:<\/strong>\u00a0This property is used to set the background color of the whole Scaffold widget.<\/a><\/a><\/a><\/p>\n\n\n\n

backgroundColor: Colors.yellow,  <\/code><\/pre>\n\n\n\n
6. primary:<\/strong>\u00a0It is used to tell whether the Scaffold will be displayed at the top of the screen or not. Its default value is\u00a0true<\/strong>\u00a0that means the height of the appBar extended by the height of the screen’s status bar.<\/a><\/a><\/a><\/p>\n\n\n\n
primary: true\/false,  <\/code><\/pre>\n\n\n\n
7. persistentFooterButton:<\/strong>\u00a0It is a list of buttons that are displayed at the bottom of the Scaffold widget. These property items are always visible; even we have scroll the body of the Scaffold. It is always wrapped in a\u00a0ButtonBar widget<\/strong>. They are rendered below the body but above the bottomNavigationBar.<\/p>\n\n\n\n
persistentFooterButtons: <Widget>[  \n  RaisedButton(  \n    onPressed: () {},  \n    color: Colors.blue,  \n    child: Icon(  \n      Icons.add,  \n      color: Colors.white,  \n    ),  \n  ),  \n  RaisedButton(  \n    onPressed: () {},  \n    color: Colors.green,  \n    child: Icon(  \n      Icons.clear,  \n      color: Colors.white,  \n    ),  \n  ),  \n], <\/code><\/pre>\n\n\n\n
<\/a><\/a><\/a><\/p>\n\n\n\n
In the above code, we have used the RaisedButton<\/strong> that displays at the bottom of the Scaffold. We can also use the FlatButton<\/strong> instead of the RaisedButton.<\/p>\n\n\n\n
8. bottomNavigationBar:<\/strong>\u00a0This property is like a\u00a0menu that displays a navigation bar<\/strong>\u00a0at the bottom of the Scaffold. It can be seen in most of the mobile applications. This property allows the developer to add multiple icons or texts in the bar as items. It should be rendered below the body and persistentFooterButtons. See the below code:<\/a><\/a><\/a><\/p>\n\n\n\n
bottomNavigationBar: BottomNavigationBar(  \n  currentIndex: 0,  \n  fixedColor: Colors.grey,  \n  items: [  \n    BottomNavigationBarItem(  \n      title: Text(\"Home\"),  \n      icon: Icon(Icons.home),  \n    ),  \n    BottomNavigationBarItem(  \n      title: Text(\"Search\"),  \n      icon: Icon(Icons.search),  \n    ),  \n    BottomNavigationBarItem(  \n      title: Text(\"User Profile\"),  \n      icon: Icon(Icons.account_circle),  \n    ),  \n  ],  \n  onTap: (int itemIndex){  \n    setState(() {  \n      _currentIndex = itemIndex;  \n    });  \n  },  \n),  <\/code><\/pre>\n\n\n\n
In the above code, we have used the BottomNavigationBar widget to display the menu bar. The fixedColor<\/strong> property is used for the color<\/strong> of the active icon. The BottomNavigationBarItems<\/strong> widget is used to add items in the bar containing text and icon as its child property. We had also used onTap(int itemIndex)<\/strong> function to perform an action when we tapped on the items, which works according to their index position.<\/p>\n\n\n\n
9. endDrawer:<\/strong> It is similar to a drawer property, but they are displayed at the right side of the screen by default. It can be swiped right to left or left to right.<\/p>\n\n\n\n
10. resizeToAvoidBottomInset:<\/strong> If it is true<\/strong>, the body and the Scaffold’s floating widgets should adjust their size themselves to avoid the onscreen keyboard. The bottom property defines the onscreen keyboard height.<\/p>\n\n\n\n
11. floatingActionButtonLocation:<\/strong> By default, it is positioned at the bottom right corner of the screen. It is used to determine the position of the floatingActionButton. It contains many predefined constants, such as centerDocked, centerFloat, endDocked, endFloat, etc.<\/p>\n\n\n\n
That’s all about the Scaffold’s various properties that give us an overview of the Scaffold widget. Its main purpose is to get familiar with different properties and their usage in Flutter application. If we want to learn it in more detail, <\/p>\n\n\n\n
Let us see the example where we have tried to use most of the Scaffold properties to understand this widget quickly and easily.<\/p>\n\n\n\n
In this example, we are going to see a Scaffold widget with an AppBar, BottomAppBar, FloatingActionButton, floatingActionButtonLocation, and drawer properties.<\/a><\/a><\/a><\/p>\n\n\n\n
<\/p>\n\n\n\n
import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \n\/\/\/ This Widget is the main application widget.  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: MyStatefulWidget(),  \n    );  \n  }  \n}  \n  \nclass MyStatefulWidget extends StatefulWidget {  \n  MyStatefulWidget({Key key}) : super(key: key);  \n  \n  @override  \n  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();  \n}  \n  \nclass _MyStatefulWidgetState extends State<MyStatefulWidget> {  \n  int _count = 0;  \n  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text('Flutter Scaffold Example'),  \n      ),  \n      body: Center(  \n        child: Text('We have pressed the button $_count times.'),  \n      ),  \n      bottomNavigationBar: BottomAppBar(  \n        shape: const CircularNotchedRectangle(),  \n        child: Container(  \n          height: 50.0,  \n        ),  \n      ),  \n      floatingActionButton: FloatingActionButton(  \n        onPressed: () => setState(() {  \n          _count++;  \n        }),  \n        tooltip: 'Increment Counter',  \n        child: Icon(Icons.add),  \n      ),  \n      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,  \n      drawer: Drawer(  \n        elevation: 20.0,  \n        child: Column(  \n          children: <Widget>[  \n            UserAccountsDrawerHeader(  \n              accountName: Text(\"javatpoint\"),  \n              accountEmail: Text(\"javatpoint@gmail.com\"),  \n              currentAccountPicture: CircleAvatar(  \n                backgroundColor: Colors.yellow,  \n                child: Text(\"abc\"),  \n              ),  \n            ),  \n            ListTile(  \n              title: new Text(\"Inbox\"),  \n              leading: new Icon(Icons.mail),  \n            ),  \n            Divider( height: 0.1,),  \n            ListTile(  \n              title: new Text(\"Primary\"),  \n              leading: new Icon(Icons.inbox),  \n            ),  \n            ListTile(  \n              title: new Text(\"Social\"),  \n              leading: new Icon(Icons.people),  \n            ),  \n            ListTile(  \n              title: new Text(\"Promotions\"),  \n              leading: new Icon(Icons.local_offer),  \n            )  \n          ],  \n        ),  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
When we run this project in the IDE, we will see the UI as the following screenshot.<\/p>\n\n\n\n
\"Flutter<\/figure>\n\n\n\n
If we click on the three lines that can be seen in the top left corner of the screen, we will see the drawer. The drawer can be swiped right to left or left to right. See the below image.<\/p>\n\n\n\n
\"Flutter<\/figure>\n","protected":false},"excerpt":{"rendered":"
backgroundColor:\u00a0This property is used to set the background color of the whole Scaffold widget. 6. primary:\u00a0It is used to tell whether the Scaffold will be displayed at the top of the screen or not. Its default value is\u00a0true\u00a0that means the height of the appBar extended by the height of the screen’s status bar. 7. persistentFooterButton:\u00a0It […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[305],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2071"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2071"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2071\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}