Slide 1
Most trusted JOB oriented professional program
DevOps Certified Professional (DCP)

Take your first step into the world of DevOps with this course, which will help you to learn about the methodologies and tools used to develop, deploy, and operate high-quality software.

Slide 2
DevOps to DevSecOps – Learn the evolution
DevSecOps Certified Professional (DSOCP)

Learn to automate security into a fast-paced DevOps environment using various open-source tools and scripts.

Slide 2
Get certified in the new tech skill to rule the industry
Site Reliability Engineering (SRE) Certified Professional

A method of measuring and achieving reliability through engineering and operations work – developed by Google to manage services.

Slide 2
Master the art of DevOps
Master in DevOps Engineering (MDE)

Get enrolled for the most advanced and only course in the WORLD which can make you an expert and proficient Architect in DevOps, DevSecOps and Site Reliability Engineering (SRE) principles together.

Slide 2
Gain expertise and certified yourself
Azure DevOps Solutions Expert

Learn about the DevOps services available on Azure and how you can use them to make your workflow more efficient.

Slide 3
Learn and get certified
AWS Certified DevOps Professional

Learn about the DevOps services offered by AWS and how you can use them to make your workflow more efficient.

previous arrow
next arrow

Scaffold class in Flutter

Spread the Knowledge

Scaffold is a class in flutter which provides many widgets or we can say APIs like Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar etc. Scaffold will expand or occupy the whole device screen. It will occupy the available space.

Properties of Scaffold Class: 

(i) appbar:- It displays a horizontal bar which mainly placed at the top of the ScaffoldappBar uses the widget AppBar which has its own properties like elevation, title, brightness, etc. 

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks'),),

appBar example

(ii) body:-It will display the main or primary content in the Scaffold. It is below the appBar and under the floatingActionButton. The widgets inside the body are at the left-corner by default. 

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks'),),body: Center(child: Text("Welcome to GeeksforGeeks!!!",style: TextStyle(color: Colors.black,fontSize: 40.0,),),),

body example

(iii) floatingActionButton:-FloatingActionButton is a button that is placed at the right bottom corner by default. FloatingActionButton is an icon button that floats over the content of the screen at a fixed place. If we scroll the page its position won’t change, it will be fixed. 

Widget build(BuildContext context){returnScaffold(appBar: AppBar(title: Text('GeeksforGeeks')),body:  Center(child: Text("Welcome to GeeksforGeeks!!!",style: TextStyle(color: Colors.black,fontSize: 40.0,),),),floatingActionButton: FloatingActionButton(elevation: 10.0,child: Icon(Icons.add),onPressed: (){// action on button press});}

floatingActionButton Example

(iv) drawer:-drawer is a slider menu or a panel which is displayed at the side of the Scaffold. The user has to swipe left to right or right to left according to the action defined to access the drawer menu. In the Appbar, an appropriate icon for the drawer is set automatically at a particular position. The gesture to open the drawer is also set automatically. It is handled by the Scaffold. 

drawer: Drawer(child: ListView(children: const<Widget>[DrawerHeader(decoration: BoxDecoration(color: Colors.green,),child: Text('GeeksforGeeks',style: TextStyle(color: Colors.green,fontSize: 24,),),),ListTile(title: Text('Item 1'),),ListTile(title: Text('Item 2'),),],),),

drawer example

(v) bottomNavigationBar:-bottomNavigationBar is like a menu at the bottom of the Scaffold. We have seen this navigationbar in most of the applications. We can add multiple icons or texts or both in the bar as items. 

bottomNavigationBar: BottomNavigationBar(currentIndex : 0,fixedColor: Colors.green,items: [BottomNavigationBarItem(title: Text("Home"),icon: Icon(Icons.home), ),BottomNavigationBarItem(title: Text("Search"),icon: Icon(Icons.search), ),BottomNavigationBarItem(title: Text("Profile"),icon: Icon(Icons.account_circle), ),],onTap: (intindexOfItem){}),

bottomNavigationBar

(vi) backgroundColor:- used to set the color of the whole Scaffold widget.

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xff84FFFF),
body: SafeArea(
child: Center(
child: ( Text(‘Set Scaffold Background Color’) )
)
)
)
);
}}

Set Background Color of Scaffold Widget Main Home Screen in Flutter

Latest posts by Rakesh Dev (see all)