Search

Scaffold in Flutter || Flutter App Development

In the previous tutorial we read the basic blocks of any flutter program which is used to develop applications in Flutter. We made several categories like Widgets , Layouts and Gestures. Now we study all these in details one by one.


Widget 1 :-


Scaffold is a class which consists all the basic needs of developer for developing an application. It is in material.dart package which we import before writing the flutter program. This widget contains all the necessary widgets like appbar , bottomnavigationbar , drawer , floatingactionbutton , bottomsheet etc. Using Scaffold you don’t need to make these widgets from scratch, you just use the properties of appbar like name , color , button , elevation etc. if you want to make appbar without scaffold then you have to make a container and modify according to needs , it can be useful when you want a completely userdefined appbar.

When you return the scaffold in build method it covers the whole screen of the device.

All the properties of Scaffold or widgets comes under Scaffold are shown below:-


const Scaffold({  
   Key key,  
  this.appBar,  
  this.body,  
  this.floatingActionButton,  
  this.floatingActionButtonLocation,  
  this.persistentFooterButtons,  
  this.drawer,  
  this.endDrawer,  
  this.bottomNavigationBar,  
  this.bottomSheet,  
  this.floatingActionButtonAnimator,  
  this.backgroundColor,  
  this.resizeToAvoidBottomPadding = true,  
  this.primary = true,  
 })

Let’s Discuss one by one


1. appBar :- Appbar is a widget bar with some fixed height present in top of the Scaffold widget. It is one of the important part for any application because it uses for showing application name , title , some back and forward buttons etc. It is the part of Scaffold means you just provide the name to properties. It takes Appbar() widget which have many properties like color , leading , bottom , title , actions etc. Appbar has a fixed size but can change with the help of PreferredSize.


2. body:- Body is the main part of the Scaffold because it can be possible that you don’t require appbar but body is necessary. As its name suggest it give you all area of screen of device except appbar and bottom navigation bar ( we will discuss later ). You can use any container , Column , Row , Stack widgets ( we will discuss later ) to make UI.


3. floatingActionButton:- It is Round shape button with several properties like shadow , child , onPressed , color etc. It performs operation when user click on it. By default its value in scaffold is bottomRight of the Screen.


4. floatingActionButtonLocation:- It takes some properties with the help of these properties user can change the position of the floatingactionbutton on the screen like center , bottomcenter , top etc. These properties are centerDocked , centerFloat , centerTop , endDocked etc. You can change these properties and observe the result.


5. persistantFooterButtons:- It is a bar of buttons which displayed below of the Scaffold body. It is an array of widgets which can take multiple buttons. This bar is fixed even if you scroll.


6. drawer:- Drawer is widget of Scaffold which provide hideable screen with the help of button click. In many applications you see that like in Gmail app when you click on the accounts image a side screen appears with account properties this is known as Drawer. It wil automatically make button and drawer with a blank screen you can modify according to the needs. It is always from left side.

Note:- If you are using drawer then you have to remove the leading in appbar because drawer icon appears on that place.


7. endDrawer:- endDrawer is same as the Drawer. It also takes Drawer() widget. The only difference is that Drawer is come from left side but endDrawer come form Right side.

Note:- Same as Drawer if you are using actions in appbar then you have to remove these because end drawer icon will come on that place.

8. bottomNavigationBar:- Bottom Navigation bar is an bar of buttons which is present on the bottom of the Scaffold Widget. You have seen it in many apps like Instagram where you can see it. It have different buttons which performs different tasks. It takes an array of widgets which are BottomNavigationBaritem. It have an onTap method which use to find which button of the bar tab by user with the help of index. Index starts with 0.


9. backgroundColor:- As its name suggest this property is used to give the colors to the Scaffold.


backgroundColor: Colors.amber


10. primary:- Default value of primary is true , but you can change to false. It specifies that the scaffold is displayed on the top of the screen or not


primary: false


11. resizeToAvoidBottomInset:- Its default value is also true. When its value is true the body and floating widgets of the Scaffold are adjust according to the keyboard and if its value false then widgets and body remain same.


resizeToAvoidBottomInset: false


note:- bottomSheet and floatingActionButtonAnimatior we will discuss later when we study about animations.


Full Code:-


import 'package:flutter/material.dart';


void main() {

runApp(MyApp());

}


class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

}


class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

int currentindex = 0;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

actions: [

//IconButton(icon: Icon(Icons.arrow_forward_ios), onPressed: () {}),

//Because we are using end Drawer :)

],

backgroundColor: Colors.amber,

shadowColor: Colors.orange,

foregroundColor: Colors.lightBlue,

title: Text("AppBar"),

centerTitle: false,

),

body: Container(

color: Colors.lightBlue,

child: Center(

child: SizedBox(width: 200, child: TextField()),

),

),

floatingActionButton: FloatingActionButton(

backgroundColor: Colors.amber,

splashColor: Colors.red,

elevation: 10,

child: Icon(

Icons.add,

size: 30,

),

onPressed: () {

BottomSheet(

builder: (BuildContext context) {

return Container(

height: 300,

color: Colors.indigo,

);

},

onClosing: () {},

);

},

),

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

persistentFooterButtons: [

IconButton(icon: Icon(Icons.access_alarm), onPressed: () {}),

IconButton(icon: Icon(Icons.access_time), onPressed: () {})

],

endDrawer: Drawer(

child: Column(

children: <Widget>[

Container(

height: 200,

color: Colors.lightBlue,

),

Container(

height: 200,

color: Colors.lightGreen,

)

],

),

),

bottomNavigationBar: BottomNavigationBar(

currentIndex: currentindex,

backgroundColor: Colors.orange[200],

selectedItemColor: Colors.blue,

items: [

BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),

BottomNavigationBarItem(icon: Icon(Icons.exit_to_app), label: "Exit"),

BottomNavigationBarItem(icon: Icon(Icons.add_a_photo), label: "Add")

],

onTap: (int index) {

setState(() {

currentindex = index;

});

},

),

primary: true,

resizeToAvoidBottomInset: true,

);

}

}



Output:-




5 views0 comments

Related Posts

See All
  • 1024px-Telegram_logo.svg
  • download
  • YouTube