Diwali Offer : Ecommerce Website + Android App (70% Off)

How to use scaffold in flutter

Deepak Tailor Image
Deepak Tailor - Nov 27 2021
How to use scaffold in flutter

Scaffold is a Flutter widget with some default designs. And there are many parameters like Appbar, body, drawer, floating action button and many more.

Scaffold parameters

1. Appbar

2. Body

3. Drawer

4. floatingActionButton

5. bottomNavigationBar

6. bottomSheet

7. backgroundColor

How to use scaffold in flutter
appbar used in scaffold

The appbar is shown at the top of the scaffold. We can also call it header. Multiple parameter available in appbar. Like as title, leading, backgroundColor, actions etc.

1. title : To show the heading in the appbar, the title parameter is used.

2. leading : To show the icon and image in the appbar, the leading parameter is used.

3. backgroundColor : To set the color of the appbar, the backgroundColor parameter is used.

4. actions : The actions parameter is used to show the icons on the left side.

appBar: AppBar(
  title: Text("Appbar Title"),
  leading: Icon(Icons.account_circle),
  backgroundColor: Colors.orange,
  actions: [
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      child: Icon(Icons.search),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      child: Icon(Icons.star_border),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0),
      child: Icon(Icons.more_vert),
    ),
  ],
),
Body used in scaffold

Inside the body we do the complete design of the app. In this we use container, column, row, image, text etc.

body: Container(
  color: Colors.black12,
),


body: Center(
  child: Text("this is simple text")
),


body: Center(
  child: Image.network("https://www.pngarts.com/files/3/Avatar-Free-PNG-Image.png")
),
drawer used in scaffold

We use the drawer to create a side bar in the application.

drawer: Drawer(
  child: ListView.builder(
    itemCount: 5,
      itemBuilder: (context, index){
      return ListTile(
        title: Text("Home Page"),
        leading: Icon(Icons.home),
      );
  }),
),
floatingActionButton used in scaffold

We use this widget to place a floating action button. It requires passing the on pressed parameter. 

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.orange,
  onPressed: (){},
  child: Icon(Icons.refresh),
),
bottomNavigationBar used in flutter

We use this widget to place the bottom navigation bar.

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Colors.orange,
  currentIndex: 0,
  items: [
    BottomNavigationBarItem(
      backgroundColor: Colors.orange,
      icon: Icon(Icons.home),
      label: "Home"
    ),
    BottomNavigationBarItem(
        backgroundColor: Colors.orange,
        icon: Icon(Icons.shopping_bag),
        label: "Products"
    ),
    BottomNavigationBarItem(
        backgroundColor: Colors.orange,
        icon: Icon(Icons.settings),
        label: "Settings"
    ),
    BottomNavigationBarItem(
        backgroundColor: Colors.orange,
        icon: Icon(Icons.account_circle),
        label: "Profile"
    ),
  ],
),
How to use scaffold in flutter
How to use scaffold in flutter 
return Scaffold(
  appBar: AppBar(
    title: Text("Appbar Title"),
    backgroundColor: Colors.orange,
    actions: [
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Icon(Icons.search),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Icon(Icons.star_border),
      ),
      Padding(
        padding: EdgeInsets.symmetric(horizontal: 8.0),
        child: Icon(Icons.more_vert),
      ),
    ],
  ),
  body: Center(
    child: Image.network("https://www.pngarts.com/files/3/Avatar-Free-PNG-Image.png")
  ),
  drawer: Drawer(
    child: ListView.builder(
      itemCount: 5,
        itemBuilder: (context, index){
        return ListTile(
          title: Text("Home Page"),
          leading: Icon(Icons.home),
        );
    }),
  ),
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.orange,
    onPressed: (){},
    child: Icon(Icons.refresh),
  ),
  bottomNavigationBar: BottomNavigationBar(
    backgroundColor: Colors.orange,
    currentIndex: 0,
    items: [
      BottomNavigationBarItem(
        backgroundColor: Colors.orange,
        icon: Icon(Icons.home),
        label: "Home"
      ),
      BottomNavigationBarItem(
          backgroundColor: Colors.orange,
          icon: Icon(Icons.shopping_bag),
          label: "Products"
      ),
      BottomNavigationBarItem(
          backgroundColor: Colors.orange,
          icon: Icon(Icons.settings),
          label: "Settings"
      ),
      BottomNavigationBarItem(
          backgroundColor: Colors.orange,
          icon: Icon(Icons.account_circle),
          label: "Profile"
      ),
    ],
  ),
);
Deepak Tailor Image
Deepak Tailor

My name is Deepak tailor as a fullstack developer. I have been in the IT industry (PHP, Nodejs, flutter) for the last 5 years. For professional and customize web development & app development, you can send inquiry on our email.
----
You can contact him at deepaktailor10@yahoo.in