Scaffolding Material App

Marlon L. Castro
MaterialApp
• MaterialApp class - A convenience widget that
wraps a number of widgets that are commonly
required for Material Design applications.
Common MaterialApp Properties
• title: The title property takes in a string as the
object to decide the one-line description of the app
for the device.
• theme: This property takes in ThemeData class as
the object to describe the theme for the
MaterialApp.
• darkTheme: It provided theme data for the dark
theme for the application.
• color: It controls the primary color used in the
Common MaterialApp Properties
• debugShowCheckedModeBanner: This
property takes in a boolean as the object to
decide whether to show the debug banner or
not.
• home: This property takes in widget as the
object to show on the default route of the app.
Simple Material App Example:
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks’,
theme: ThemeData(primarySwatch: Colors.green),
darkTheme: ThemeData(primarySwatch: Colors.grey),
color: Colors.amberAccent,
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('GeeksforGeeks')),
),
);
}
}
Output
Scaffold
• Scaffold is a class in flutter which provides many
widgets or we can say APIs like Drawer, Snack-Bar,
Bottom-Navigation-Bar, Floating-Action-Button, App-
Bar, etc. Scaffold will expand or occupy the whole
device screen. It will occupy the available space.
Scaffold will provide a framework to implement the
basic material design layout of the application.
Properties of Scaffold Class:
• appBar: It displays a horizontal bar which mainly placed at the top of
the Scaffold. appBar uses the widget AppBar which has its own
properties like elevation, title, brightness, etc.

Widget build(BuildContext context)

{
return Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
),
}
Properties of Scaffold Class:
• 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.
Body example
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('GeeksforGeeks')),
body: const Center(
child: Text(
"Welcome to GeeksforGeeks!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
);
}
Properties of Scaffold class
• 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.
FloatingActionButton Example
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('GeeksforGeeks')),
body: const Center(
child: Text(
"Welcome to GeeksforGeeks!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),
onPressed: () {
// action on button press
},
),
);
}
Properties of Scaffold Class
• 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.
Example Drawer
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'),
),
],
),
),
Properties of Scaffold Class
• 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: const [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: "Search",
icon: Icon(Icons.search),
),
BottomNavigationBarItem(
label: "Profile",
icon: Icon(Icons.account_circle),
),
],
onTap: (int indexOfItem) {}),
Flutter – AppBar Widget
• AppBar is usually the topmost component of
the app (or sometimes the bottom-most), it
contains the toolbar and some other common
action buttons.
Key Properties of Appbar Widget:
• actions: This property takes in a list of widgets as a
parameter to be displayed after the title if the AppBar is
a row.
• title: This property usually takes in the main widget as a
parameter to be displayed in the AppBar.
• backgroundColor: This property is used to add colors to
the background of the Appbar.
• elevation: This property is used to set the z-coordinate
at which to place this app bar relative to its parent.
• shape: This property is used to give shape to
the Appbar and manage its shadow.
import 'package:flutter/material.dart';

void main() {
runApp(gfgApp()); //MaterialApp
}

MaterialApp gfgApp() {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksforGeeks'),
), //AppBar
body: const Center(
child: Text(
'GeeksforGeeks',
style: TextStyle(fontSize: 24),
), //Text
), // center
), //Scaffold
debugShowCheckedModeBanner: false, //Removing Debug Banner
);
}
Center Widget
• Center widget comes built-in with flutter, it aligns its
child widget to the center of the available space on
the screen. The size of this widget will be as big as
possible if the widthFactor and heightFactor
properties are set to null and the dimensions are
constrained. And in case the dimensions are not
constrained and the widthFactor and HeightFactor
are set to null then the Center widget takes the size
of its child widget.
Syntax
Syntax:
Center({Key key,
double widthFactor,
double heightFactor,
Widget child})
Properties of Center Widget:
• widthFactor: This property takes a double value as a
parameter and it sets the Center widget’s width as the same
as the child’s width multiplied by this factor. For example, if it
is set to 3.0 then the Center widget will take three times the
size of its child widget.
• heightFactor: This property also takes in a double value as a
parameter and it sets the Center widget’s height as the same
as the child’s height multiplied by this factor.
• child: This property takes in a widget as a parameter to be
displayed inside the Center widget on the screen.
• alignment: This property takes in AlignmentGeometry as the
parameter value to determine how the child widget will be
aligned with respect to the Center widget.
Example
body: Center(
// heightFactor: 3,
// widthFactor: 0.8,
child: Container(
color: Colors.green,
child: Text(
'Center Widget',
textScaleFactor: 3,
style: TextStyle(color: Colors.white),
),
),
),
Flutter Images
• When you create an app in Flutter, it includes both code and
assets (resources). An asset is a file, which is bundled and
deployed with the app and is accessible at runtime. The asset
can include static data, configuration files, icons, and images.
The Flutter supports many image formats, such as JPEG, WebP,
PNG, GIF, animated WebP/GIF, BMP, and WBMP.

• Displaying images is the fundamental concept of most of the

mobile apps. Flutter has an Image widget that allows
displaying different types of images in the mobile application.
How to display the image in Flutter
• Step 1: First, we need to create a new folder inside
the root of the Flutter project and named it assets.
We can also give it any other name if you want.
• Step 2: Next, inside this folder, add one image
manually.

• Step 3: Update the pubspec.yaml file. Suppose the

image name is tablet.png, then pubspec.yaml file is:
pubspec.yaml file
How to display the image in Flutter
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Image Demo'),
),
body: Center(
child: Column(
children: <Widget>[
Image.asset('assets/tablet.png'),
Text(
'A tablet is a wireless touch screen computer that is smaller than a notebook but larger than a smartphone.',
style: TextStyle(fontSize: 20.0),
)
],
),
),
),
);
}
}
Display images from the internet
• Displaying images from the internet or network is
very simple. Flutter provides a built-in
method Image.network to work with images from a
URL. The Image.network method also allows you to
use some optional properties, such as height, width,
color, fit, and many more. We can use the following
syntax to display an image from the internet.
Example
Example
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Image Demo'),
),
body: Center(
child: Column(
children: <Widget>[
Image.network(
'https://static.javatpoint.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png',
height: 400,
width: 250
),
Text(
'It is an image displays from the given url.',
style: TextStyle(fontSize: 20.0),
)
],
),
),
),
);
}
}