Name: AVISHKAR VASANT KADU Batch : A2

Roll # : 38 DOP :
Class : TEIT-A DOS :

Experiment – 02

Aim: To design Flutter UI by including common widgets.

Theory:
: The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are
basically user interface components used to create the user interface of the application.
In Flutter, the application is itself a widget. The application is the top- level widget and its UI is
build using one or more children (widgets), which again build using its children
widgets. This composability feature helps us to create a user interface of any complexity.
For example, the widget hierarchy of the hello world application is as specified in the following diagram:

Hello World Code:

import 'package:flutter/material.dart';

void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
 The runApp() function takes the given Widget and makes it the root of the widget tree. In this
example, the widget tree consists of two widgets, the Center widget and its child, the Text widget. The
framework forces the root widget to cover the screen, which means the text “Hello, world” ends up
centered on screen. The text direction needs to be specified in this instance; when
the MaterialApp widget is used.
When writing an app, you’ll commonly author new widgets that are subclasses of
either StatelessWidget or StatefulWidget, depending on whether your widget manages any state. A
widget’s main job is to implement a build() function, which describes the widget in terms of other, lower-
level widgets. The framework builds those widgets in turn until the process bottoms out in widgets that
represent the underlying RenderObject, which computes and describes the geometry of the widget.

Basic widgets
Flutter comes with a suite of powerful basic widgets, of which the following are commonly used:
Text : The Text widget lets you create a run of styled text within your application.

Row, Column : These flex widgets let you create flexible layouts in both the horizontal (Row) and vertical
(Column) directions. The design of these objects is based on the web’s flexbox layout model.

Stack : Instead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place
widgets on top of each other in paint order. You can then use the Positioned widget on children of
a Stack to position them relative to the top, right, bottom, or left edge of the stack. Stacks are based on
the web’s absolute positioning layout model.

Container : The Container widget lets you create a rectangular visual element. A container can be
decorated with a BoxDecoration, such as a background, a border, or a shadow. A Container can also have
margins, padding, and constraints applied to its size. In addition, a Container can be transformed in three
dimensional space using a matrix

Appbar : A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such
as a TabBar and a FlexibleSpaceBar.

Elevated Button: A Material Design elevated button. A filled button whose material elevates when
pressed.
Flutter Logo : The Flutter logo, in widget form. This widget respects the IconTheme.

Icons : A Material Design icon.

Image : A widget that displays an image.

Placeholder : A widget that draws a box that represents where other widgets will one day be added.

Scaffold : Implements the basic Material Design visual layout structure. This class provides APIs for
showing drawers, snack bars, and bottom sheets.

Stateful and Stateless Widget -

The state of an app can very simply be defined as anything that exists in the memory of the app
while the app is running. This includes all the widgets that maintain the UI of the app including the
buttons, text fonts, icons, animations, etc.
The widgets whose state cannot be altered once they are built are called stateless widgets. These
widgets are immutable once they are built i.e any amount of change in the variables, icons, buttons, or
retrieving data cannot change the state of the app.
The widgets whose state can be altered once they are built are called stateful Widgets. These
states are mutable and can be changed multiple times in their lifetime. This simply means the state of an
app can change multiple times with different sets of variables, inputs, data.
/******** Stateful and Stateless Widget ********/

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

static const String _title = 'Flutter Code Sample';

@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}

class MyStatefulWidget extends StatefulWidget {

@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

int _count = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample Code'),
),
body: Center(child: Text('You have pressed the button $_count times.')),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() => _count++),
tooltip: 'Increment Counter',
child: const Icon(Icons.add),
),
);
}
}
Output:

The above is the source code of the stateful and stateless widget:
On the screen we can see that the title is not getting changed wherever the taping is done on the screen.
Hence, the title is doing the work of stateless widget as it is not changing it’s state.
Now if we type on button we can that the counter is getting changed. Hence we can conclude that
this area comes under the stateful widget.
MyApp is a class which extends to stateless widget. Home page class extends to stateful widget.
Inside the home page an Appbar with the title and in center we have text and a counter. This
whole area is getting changed by some event/action.

Text Widget –
A Text is a widget in Flutter that allows us to display a string of text with a single line in our
application. Depending on the layout constraints, we can break the string across multiple lines or might all
be displayed on the same line.
/***** text widget with center aligned ******/

Material App and Scaffold Widget -

MaterialApp widget is a convient widget that wraps the no.of widgets commonly required for
material design application.
All the widgets declared in material app will automatically implement material design and
provides a basic binding to them.

/****** MaterialApp *******/

When the above code is executed, we can see that we get a blank white screen. Scaffold has a
property known as background color. And it’s default value is somewhat set to white. Now let’s try to
change the background color.
 In the above code, Scaffold takes a parameter named body in this body whatever is passed will be
shown on the Scaffold. We pass the text widget with center widget which will show the text in center of
the Scaffold.
Here we have not given any text direction, because it is given inside the Scaffold and scaffold
automatically provides material structure and by default we have the direction as left to right.

Container Widget -
The container in Flutter is a parent widget that can contain multiple child widgets and manage
them efficiently through width, height, padding, background color, etc. It is a widget that combines
common painting, positioning, and sizing of the child widgets. It is also a class to store one or more
widgets and position them on the screen according to our needs. Generally, it is similar to a box for
storing contents. It allows many attributes to the user for decorating its child widgets, such as
using margin, which separates the container with other contents.
A container widget is same as <div> tag in html. If this widget does not contain any child widget, it
will fill the whole area on the screen automatically. Otherwise, it will wrap the child widget according to
the specified height & width. It is to note that this widget cannot render directly without any parent
widget. We can use Scaffold widget, Center widget, Padding widget, Row widget, or Column widget as its
parent widget.

/***** container widget *****/

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Container Example"),
 ),
body: Container(
padding: EdgeInsets.all(35),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 4),
borderRadius: BorderRadius.circular(8),
boxShadow: [
new BoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),),
],
),
child: Text("Hello! I am in the container widget decoration box!!",
style: TextStyle(fontSize: 30)),
),
),
);
}
}

Output –

Row and Column Widget –

Row and column are the two essential widgets in Flutter that allows developers to align children
horizontally and vertically according to our needs. These widgets are very necessary when we design the
application user interface in Flutter.

Row Widget -
This widget arranges its children in a horizontal direction on the screen. In other words, it will
expect child widgets in a horizontal array. If the child widgets need to fill the available horizontal space,
we must wrap the children widgets in an Expanded widget.
A row widget does not appear scrollable because it displays the widgets within the visible view. So
it is considered wrong if we have more children in a row which will not fit in the available space. If we
want to make a scrollable list of row widgets, we need to use the ListView widget.
 We can control how a row widget aligns its children based on our choice using the
property crossAxisAlignment and mainAxisAlignment. The row's cross-axis will run vertically, and
the main axis will run horizontally. See the below visual representation to understand it more clearly.

/***** row******/
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

return MaterialApp(home: MyHomePage());

}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Row Example"),
),
body: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.green),
child: Text(
"Rose",
style: TextStyle(color: Colors.yellowAccent, fontSize: 25),
),
),
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.pinkAccent),
 child: Text(
"Jasmin",
style: TextStyle(color: Colors.yellowAccent, fontSize: 25),
),
),
Container(
margin: EdgeInsets.all(12.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.blue),
child: Text(
"Lotus",
style: TextStyle(color: Colors.yellowAccent, fontSize: 25),
),
)
]),
);
}
}

Output –

Column Widget –
This widget arranges its children in a vertical direction on the screen. If the child widgets need to
fill the available vertical space, we must wrap the children widgets in an Expanded widget.
A column widget does not appear scrollable because it displays the widgets within the visible view.
So it is considered wrong if we have more children in a column which will not fit in the available space. If
we want to make a scrollable list of column widgets, we need to use the ListView Widget.
We can also control how a column widget aligns its children using the property mainAxisAlignment
and crossAxisAlignment. The column's cross-axis will run horizontally, and the main axis will
run vertically. The below visual representation explains it more clearly.
/********* column ********/
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Column Example"),
),
body: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[
Container(
margin: EdgeInsets.all(15.0),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.red),
child: Text(
"Rose",
style: TextStyle(color: Colors.yellowAccent, fontSize: 20),
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.red),
 child: Text(
"Jasmine",
style: TextStyle(color: Colors.yellowAccent, fontSize: 20),
),
),
Container(
margin: EdgeInsets.all(20.0),
padding: EdgeInsets.all(12.0),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8), color: Colors.red),
child: Text(
"Lotus",
style: TextStyle(color: Colors.yellowAccent, fontSize: 20),
),
)
]),
);
}
}

Output –

Button Widget –
Buttons are the graphical control element that provides a user to trigger an event such as taking
actions, making choices, searching things, and many more. They can be placed anywhere in our UI like
dialogs, forms, cards, toolbars, etc.
Buttons are the Flutter widgets, which is a part of the material design library. Flutter provides
several types of buttons that have different shapes, styles, and features.
A FAB button is a circular icon button that triggers the primary action in our application. It is the
most used button in today's applications. We can use this button for adding, refreshing, or sharing the
content. Flutter suggests using at most one FAB button per screen. There are two types of Floating Action
Button:
FloatingActionButton: It creates a simple circular floating button with a child widget inside it. It must
have a child parameter to display a widget.
FloatingActionButton.extended: It creates a wide floating button along with an icon and a label inside
it. Instead of a child, it uses labels and icon parameters.
/********** floating button **********/
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("FAB Button Example"),
backgroundColor: Colors.blue,
actions: <Widget>[
IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}),
IconButton(icon: Icon(Icons.account_circle), onPressed: () => {})
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
foregroundColor: Colors.white,
onPressed: () => {},
),
/*floatingActionButton:FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.save),
label: Text("Save"),
), */
),
);
}
}
Output -

Stack Widget –
The stack is a widget in Flutter that contains a list of widgets and positions them on top of the
other. In other words, the stack allows developers to overlap multiple widgets into a single screen and
renders them from bottom to top. Hence, the first widget is the bottommost item, and the last widget is
the topmost item.

/******* stack*********/
import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyStackWidget(),
);
}
}
class MyStackWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Stack Widget Example"),
),
body: Center(
child: Stack(
fit: StackFit.passthrough,
overflow: Overflow.visible,
children: <Widget>[
 // Max Size Widget
Container(
height: 300,
width: 400,
color: Colors.green,
child: Center(
child: Text(
'Top Widget: Green',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
height: 100,
width: 150,
color: Colors.blue,
child: Center(
child: Text(
'Middle Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
Positioned(
top: 30,
left: 20,
child: Container(
height: 100,
width: 150,
color: Colors.orange,
child: Center(
child: Text(
'Bottom Widget',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
)
),
],
),
)
),
);
}
}
Output -

Icon Widget –
An icon is a graphic image representing an application or any specific entity containing meaning
for the user. It can be selectable and non-selectable. For example, the company's logo is non-selectable.
Sometimes it also contains a hyperlink to go to another page. It also acts as a sign in place of a detailed
explanation of the actual entity.
Flutter provides an Icon Widget to create icons in our applications. We can create icons in Flutter,
either using inbuilt icons or with the custom icons.

/*********** icons ***********/

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(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyIconPage(),
);
}
}

class MyIconPage extends StatefulWidget {

@override
_MyIconPageState createState() => _MyIconPageState();
}
class _MyIconPageState extends State<MyIconPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Icon Tutorial'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(
Icons.camera_enhance,
size: 70,
color:Colors.green
),
Icon(
Icons.camera_front,
size: 70,
color:Colors.orange
),
Icon(
Icons.camera_rear,
size: 70,
color:Colors.black
),
]),
);
}
}
Output -
Image Widget –
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
To display an image in Flutter, do the following steps:
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:

assets:
- assets/tablet.png
- assets/background.png
If the assets folder contains more than one image, we can include it by specifying the directory
name with the slash (/) character at the end.

flutter:
assets:
- assets/

/****** image *******/

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.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),
)
 ],
),
),
),
);
}
}

Conclusion: Hence, studied common widgets