MaterialApp and Scaffold in Flutter with Example

What is MaterialApp

Material design is for Google Android material design which is used to create UI for Android.MaterialApp is a predefined class in a flutter that extends the Material Design class.

It is likely the main or core component of flutter. We can access all the other components and widgets provided by Flutter SDK. It is a class that creates an instance of [WidgetsApp].

Text widget, AppBar widget, Scaffold widget, ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget, and many more widgets that are accessed using MaterialApp class. 

For iOS, there is the Cupertino widgets class which I'll describe or discuss or explain in another article.

What is Scaffold

In Flutter Scaffold is a very useful and highly flexible class. Scaffold implements the basic material design layout structure.

A Scaffold Widget provides a framework that implements the flutter app's basic material design visual layout structure. 

The developer can implement a wide range of widgets using Scaffold as the Parent Widget. It provides APIs for showing FlottingButton, drawers, snack bars, and bottom sheets.

The most commonly used Widget, Scaffold can complete the entire App building with its flexible properties and attributes.

To know more about Widgets we can use in  Scaffold and which are the properties scaffold give us, we will see some of the important properties of the Scaffold class.

Properties of Scaffold Class

1. AppBar and Background

An app bar to display at the top of the scaffold. where you can give any text or set the menu icon or popupMenu. 

The background color of the Material widget focuses on the entire Scaffold which gives great application. This is a sample Background Color attribute like any other widget. An example of that is given below. Let's take the Example of AppBar and background.

2. Body

The body property is the primary content of the scaffold. We can create any widget to be held here. A basic example of this I have given here for more I'll discuss in a new section.

3. FloatingActionButton

FloatingActionButton gives by flutter which we can set in the different locations you can give as per your requirements like centerDocker, centerFloat, centerTop, endDocker, endTop, endFloat, miniCenterDocker, and many more. It is very useful and simple to create in Flutter. An example is given below.

4. BottomSheet

BottomSheet is also a widget that is similar to all other widgets. As the name says bottom sheet is open from the bottom of the screen. In flutter, they give us an inbuilt function showModelBottomSheet we just have to write our required list of widgets in it and ready to use.

I have given an example in which I have open the BottomSheet onPressed of FloatingButton.

5. Drawer

We can create Swipes in from either left-to-right or right-to-left. This is similar to the Sliding-drawers which we are using for Android’s Material Design. The creation of a  drawer is quite easy with Android and in the same way, Flutter has made it extremely easy to create one. 

An example is given below I have created a drawer and create a class for showing data in that drawer if you want to do code in one class you can also do that but it looks complex and not understandable so if possible then always create a different class for that.

6. BottomNavigationBar

BottomNavigationBarto display at the bottom of the scaffold.BottomNavigationBar is used to provide a Navigation-like bar at the bottom of the Application. A sample is given below in which I have created bottom navigation and explore some properties of the BottomNavigationBar.

7. PersistentFooterButtons

A set of buttons that are displayed at the bottom of the scaffold. This is a collection of FloatingActionButtons or any kind of button you can use like RaisedButton, OutlinedButton, and many more. that is present at the bottom of the Application. When used properly, it can be very useful. 

Let's take the example in which we are taking the list of values and multiple buttons and see how it will work.