‫‪Widgets‬‬

‫ا‪.‬سعاد عثمان‬
Widget
 In Flutter, everything is a widget, which is the core concept of this framework. Widget
in the Flutter is basically a user interface component that affects and controls the view
and interface of the app. It represents an immutable description of part of the user
interface and includes graphics, text, shapes, and animations that are created using
widgets.

 Widgets are nested with each other to build the app. It means the root of your app is
itself a widget, and all the way down is a widget also.
Widgets
 Widgets are the building blocks of a Flutter app, and each widget is
an immutable declaration of the user interface. In other words,
widgets are configurations (instructions) for different parts of the UI.
Placing the widgets together creates the widget tree.

 Flutter uses the widget as the configuration to build each element,

which means the element is the widget that is mounted (rendered) on
the screen. The elements that are mounted on the screen create the
element tree.
wide array of widgets
Here’s a brief look at the wide array of widgets at your disposal:

➤➤ Widgets with structuring elements such as a list, grid, text, and button

➤➤ Widgets with input elements such as a form, form fields, and keyboard listeners

➤➤ Widgets with styling elements such as font type, size, weight, color, border, and shadow

➤➤ Widgets to lay out the UI such as row, column, stack, centering, and padding

➤➤ Widgets with interactive elements that respond to touch, gestures, dragging, and dismissible

➤➤ Widgets with animation and motion elements such as hero animation, animated container,

animated crossfade, fade transition, rotation, scale, size, slide, and opacity

➤➤ Widgets with elements like assets, images, and icons

➤➤ Widgets that can be nested together to create the UI needed

➤➤ Custom widgets you can create yourself

Flutter widget

 We can split the Flutter widget into two categories:

1. Visible (Output and Input)

2. Invisible (Layout and Control)

The visible widgets are related to the user input and output data.
Some of the important types of this widget are: Text, Button,
Image, Icon, column, Row
State Management Widget
(types of widget)
 In Flutter, there are mainly two types of widget:

• StatelessWidget

• StatefulWidget

 A StatefulWidget has state information. It contains mainly two classes: the state object and
the widget. It is dynamic because it can change the inner data during the widget lifetime. It
has createState() method, which returns a class that extends the Flutters State Class.

 The StatelessWidget does not have any state information. It remains static throughout its
lifecycle.
WIDGET LIFECYCLE EVENTS

 To build the UI, you use two main types of widgets, StatelessWidget
and StatefulWidget. A

 stateless widget is used when the values (state) do not change, and
the stateful widget is used when values (state) change.

 Each stateless or stateful widget has a build method with a

BuildContext that handles the location of the widget in the widget
tree. The BuildContext objects are actually Element objects, an
instantiation of the Widget at a location in the tree.
The StatelessWidget Lifecycle

 A StatelessWidget is built based on its own configuration and does

not change dynamically.
 It can be called the first time the widget is created, when the widget’s
parent changes, and when an InheritedWidget has changed.
The StatefulWidget Lifecycle
 A StatefulWidget is built based on its own configuration but can
change dynamically. This type of widget has a mutable state that can
change over time. The stateful widget is declared with two classes,
the StatefulWidget class and the State class. The StatefulWidget class
is rebuilt when the widget’s configuration changes, but the State
class can persist (remain), enhancing performance.

 You call the setState() method to notify the framework that this object
has changes, and the widget’s build method is called (scheduled). You
would set the new state values inside the setState() method.

 You can override different portions of the StatefulWidget to customize

and manipulate data at different points of the widget lifecycle
The StatefulWidget Lifecycle
Widget Tree

 The widget tree is how developers create their user interface;

developers position widgets within each other to build simple and
complex layouts.

 To improve code readability and manageability, developers can

separate widgets into their own widget class, creating widget tree.
simple visual representation of the
widget tree
MaterialApp widget

1. MaterialApp, a widget to create the root level UI of the

application and contains three properties - title, theme, and home.

1. Title: It is the title of the Flutter application.

2. Theme: It is the theme of the widget. By default, it set the

blue as the overall color of the application.

3. Home: It is the inner UI of the application, which sets another

widge for the application.
Scaffold widget
 Scaffold Scaffold widget is a top-level widget after the MaterialApp widget for
creating the user interface.

 The Scaffold is a widget in Flutter used to implements the basic material design
visual layout structure.

 It is quick enough to create a general-purpose mobile application and contains

almost everything we need to create a functional and responsive Flutter apps. we
can say that it is mainly responsible for creating a base to the app screen on which
the child widgets hold on and render on the screen. It provides many widgets or
APIs for showing Drawer, SnackBar, BottomNavigationBar, AppBar,
FloatingActionButton, and many more.
 constructor and properties of the Scaffold widget class.

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,
})
Scaffold widget.
 1. appBar: It is a horizontal bar that is mainly displayed at
the top of the Scaffold widget. It is the main part of the Scaffold
widget and displays at the top of the screen. Without this
property, the Scaffold widget is incomplete. It uses the appBar
widget that itself contains various properties like elevation, title,
brightness, etc. Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text('First Flutter Application'),
), )
}
Scaffold widget.

 2.body: It is the other primary and required property of this widget, which
will display the main content in the Scaffold. The widgets inside the body
are positioned at the top-left of the available space by default.

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: Text('First Flutter Application'),
),
body: Center(
child: Text("Welcome to Flutter",
style: TextStyle( color: Colors.black, fontSize: 30.0,
),
),
),
}
Example:
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(
title: 'Hello World Flutter Application',
theme: ThemeData(
// This is the theme of your application.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Home page'),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application.
final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: Text('Hello World'),
),
);
}
}
Scaffold properties(con..)
 floatingActionButton: It is a button displayed at the bottom right corner and
floating above the body. It is a circular icon button that floats over the content
of a screen at a fixed place to promote a primary action in the application.
While scrolling the page, its position cannot be changed. It uses the
FloatingActionButton widget properties
using Scaffold.floatingActionButton.
floatingActionButton example:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Flutter Application')),
body: Center(
child: Text("Welcome to Javatpoint!!"),
),
floatingActionButton: FloatingActionButton(
elevation: 8.0,
child: Icon(Icons.add),
onPressed: (){
print('I am Floating Action Button');
}
);
}

Elevation property that gives a shadow effect to the button. Icon widget to give an icon to the button
using preloaded Flutter SDK icons. The onPressed() property will be called when the user taps the
button.
Scaffold properties(con..)

 floatingActionButtonLocation: By default, it is positioned at the bottom right corner

of the screen. It is used to determine the position of the floatingActionButton. It
contains many predefined constants, such as centerDocked, centerFloat, endDocked,
endFloat, etc.

floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
Scaffold properties(con..)

 backgroundColor: This property is used to set the background color of the

whole Scaffold widget.
backgroundColor: Colors.yellow,

 primary: It is used to tell whether the Scaffold will be displayed at the top
of the screen or not. Its default value is true.
primary: true/false,

 resizeToAvoidBottomInset: If it is true, the body and the Scaffold's floating

widgets should adjust their size themselves to avoid the onscreen keyboard.
Scaffload widget properties(con..)

 Drawer: It is a slider panel that is displayed at the side of the body.

Usually, it is hidden on the mobile devices, but the user can swipe it
left to right or right to left to access the drawer menu. It uses
the Drawer widget properties slides in a horizontal direction from
the Scaffold edge to show navigation links in the application. An
appropriate icon for the drawer is set automatically in an appBar
property. The gesture is also set automatically to open the drawer.
Scaffload widget properties(con..)

persistentFooterButton: It is a list of buttons that are displayed at the

bottom of the Scaffold widget. These property items are always visible. It is
always wrapped in a ButtonBar widget. They are rendered below the body
but above the bottomNavigationBar.
Scaffload widget properties(con..)
 bottomNavigationBar: This property is like a menu that displays a navigation
bar at the bottom of the Scaffold. It can be seen in most of the mobile
applications. This property allows the developer to add multiple icons or texts
in the bar as items. It should be rendered below the body and
persistentFooterButtons.

 endDrawer: It is similar to a drawer property, but they are displayed at

the right side of the screen by default. It can be swiped right to left or
left to right.