Flutter Scaffold Widget

<p>According to** Material Design <strong>visual layout structure</strong>, **a mobile application screen comprises of several Components like <strong>App bar</strong>, which features the name of Application, **Navigation Drawer or Bottom Navigation, **which is to provide access to different screen and some other application functionalities, and **font-size: 1rem;](Floating action button **font-size: 1rem;](that performs the frequent or common action on the screen *font-size: 1rem;](fig(a)*font-size: 1rem;](.</p> <p>![](https://fluttercentral.com/Uploads/0eb30fbf-401c-485a-8fdc-c4b5055cfdde.pngwidth="50%height="auto](</p> <p><strong>Flutter</strong>, as it promises, provides an easy way to add these components on screen using **Scaffold widget. **Scaffold widget allow you to implement the Material design visual layout structure on the screen where you use Scaffold widget as a root widget of you screen layout.</p> <p>![](../../../Uploads/652b82a9-984e-4146-a518-5eba3fba0b7c.pngwidth="50%height="auto]( ** NOTE : For Scaffold widget, you must use the MaterialApp as a root widget of your application, line 9, otherwise you can not use Scaffold Widget.</p> <p> Scaffold widget provides some properties which you can use to add above mentioned components1. drawer:**Using this property, you can define your Navigation Drawer to show slidable menu on screen. Flutter gives <strong>Drawer widget</strong> for making Navigation Drawer. you can use some widget as well as a **drawer. **However, its better to use <strong>Drawer widget <strong>in</strong> ****font-size: 1rem;](drawer</strong>font-size: 1rem;]( property of Scaffold. Followingfont-size: 1rem;]( is the code for <strong>font-size: 1rem;](drawer</strong>font-size: 1rem;](.font-size: 1rem;]( font-size: 1rem;]( [ color:#ffd23e;](ListTile(title: color:#ffd23e;](Text(color:#b4ca2e;]("Home")color:#cc7832;](, leading: color:#ffd23e;](Icon(Icons.color:#9876aa;font-style:italic;](home)color:#cc7832;](,)color:#cc7832;](, color:#cc7832;]( color:#ffd23e;](ListTile(title: color:#ffd23e;](Text(color:#b4ca2e;]("About")color:#cc7832;](, leading: color:#ffd23e;](Icon(Icons.color:#9876aa;font-style:italic;](info)color:#cc7832;](,)color:#cc7832;](, color:#cc7832;]( color:#ffd23e;](ListTile(title: color:#ffd23e;](Text(color:#b4ca2e;]("Settings")color:#cc7832;](, leading: color:#ffd23e;](Icon(Icons.color:#9876aa;font-style:italic;](settings)color:#cc7832;](,)color:#cc7832;](, color:#cc7832;]( ]color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, )color:#cc7832;](,</p> <p><strong>2. appBar:</strong> You can use this property to define the App bar, which usually show the title of the application. Flutter has <strong>AppBar</strong> **widget. **Following is the code for defining appBar for the application screen.</p> <p><strong>3</strong>font-weight: bolder;](. floatingActionButton: You can use this property to define the Floating action button for the screen, which usually on screen to perform most frequent or most common action. Flutter has font-weight: bolder;](FloatingActionButton widget for defining <strong>floatingActionButton</strong> propertyfont-weight: bolder;](. Following is the code for defining font-weight: bolder;](floatingActionButton for the application screen. font-size: 1rem;](<strong>4. bottomNaviagtionBar</strong>This is used to show Bottom Navigation bar on screen, which provides access to different screens and different functionalities of application. The different between Drawer Navigation and Bottom Navigation is that bottom Navigation is fixed at the bottom of the screen, while Drawer is slidable. Flutter has **BottomNavigationBar **widget to define font-weight: bolder; font-size: 1rem;](bottomNavigationBarfont-size: 1rem;]( property. Following is the code for <strong>font-size: 1rem;](bottomNavigationBar</strong>font-size: 1rem;](.<br /> font-size: 1rem;](<strong>5. body</strong>For defining the main content of the screen, Scaffold has body proper, you can give any sort of widget tree in the body of Scaffold widget<br /> <strong>So That's It!</strong></p> <p>We have learnt that why we actually use scaffold widget, and what we can achieve using Scaffold widget as a root widget for screen. If you found this article helpful, and want to learn more then head over my YouTube channel.</p> <p>**YouTube **: <a href="https://youtube.com/EasyApproach">https://youtube.com/EasyApproach</a> <strong>Thanks!</strong></p>