Scribd
Upload
6 views

Lecture 5

Uploaded by

shahida.jasmine
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Lecture 5

Uploaded by

shahida.jasmine
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Widgets

IT Industry-Academia Bridge Program


Widget
What is Widget?
Widget Tree
Types of Widgets
Widgets State
Widgets Lifecycle

IT Industry-Academia Bridge Program


What is Widget?
• Widget is the basic building block of Flutter apps.
• User Interface in flutter is nothing more than the
arrangement of widgets.
• Using widgets is like combining Legos. Like Legos, you
can mix and match widgets to create something
amazing.

IT Industry-Academia Bridge Program


What is Widget?
• Each element on a screen of the Flutter app is a widget, therefore
whenever you are going to code for building anything in Flutter, it will
be inside a widget.
• To build an app Widgets are nested with each other.
• Flutter has a rich set of in-built widgets like text, buttons, sliders,
lists, layouts, gesture detectors, animations, etc.

IT Industry-Academia Bridge Program


Widget Tree
• To develop an interface in a flutter, widgets are arranged into a tree of
parent and child widgets.
• Widgets are nested inside of each other to form your app.
• The Entire widget tree forms a layout that you see on the screen.

IT Industry-Academia Bridge Program


Types of Widgets
We can split the Flutter widget into two categories:
• Visible (Output and Input): These widgets are related to the user
input and output data. Some of the important are
Text, Button, Image, Icon, etc.
• Invisible (Layout and Control): The invisible widgets are related to the
layout and control of widgets. It provides controlling how the widgets
behave and how they will look on the screen. some of the important
are
Column, Row, Center, Padding, Scaffold, Stack

IT Industry-Academia Bridge Program


Widget State Management
The state is information that
1. Can be read synchronously when the widget is built
2. And might change during the lifetime of the widget.
In other words, a state is data that a widget can hold, which is available
after the widget is rendered/rebuilt.

In Flutter, there are mainly two types of widgets:


• Stateless Widget
• Stateful Widget
IT Industry-Academia Bridge Program
Stateless Widget
These do not have state information. It remains static throughout its
lifecycle.
Stateless widgets don’t store any state. That means they don’t store
values that might change.
You can also say that stateless widgets are “DATALESS” widgets. As they
don’t store any real-time data.
For example, if you have a simple Text widget on the screen, but it
doesn’t do anything then it’s a Stateless Widget.
Examples are Text, Row, Column, Container, etc. This is also known as
an Immutable state that can NOT be changed during runtime.
IT Industry-Academia Bridge Program
Stateful widget
These are dynamic because they can change the inner data during the
widget’s lifetime.
The user can interact with a stateful widget. For example, If you press a
button and it performs any task it’s a Stateful Widget If you are moving
a slider and it does anything then it’s a Stateful Widget, If you swipe an
item from a list and an item gets deleted then that list a Stateful
Widget.

Examples: Checkbox, Radio, Slider, InkWell, Form, and TextField.

IT Industry-Academia Bridge Program


Widget Lifecycle
The lifecycle of the Flutter App is the show of how the application will change
its State. As we know, Everything in Flutter is a Widget, and Widgets can be
• Stateless Widgets: Stateless Widgets don’t change their state at runtime. To
represent a widget in stateless
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();}}
• Stateful Widgets: Stateless widgets can change their state at runtime. To represent a
widget in statefull
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container();}}
IT Industry-Academia Bridge Program
Stateful Widget Lifecycle
createState: When the Framework is instructed
to build a StatefulWidget, it immediately
calls createState()
initState(): Called when this object is inserted
into the tree. It is called only once in widget life.
Here you can do some initialization, such as
initialization State variables.
didUpdateWidget(): Called whenever the widget
configuration changes
setState(): called often from the Flutter
framework itself and from the developer.
build: This is the main function and is called each
time when we need to render the UI Widgets on
the screen
IT Industry-Academia Bridge Program
Stateless Widget Lifecycle
Stateless Widget Lifecycle consist
only build() function. It has no
state, so it can’t change according
to an internal state, they only react
to higher widget changes.
The build function in the widget
creates the content to be displayed
on the screen.

IT Industry-Academia Bridge Program


Layout Widgets
The layout is a user interface design pattern that refers to defining how
the widgets are displayed on the screen relative to each other.
Flutter categories layout widgets into two types
1. Single Child Widget
2. Multi-Child Widget

IT Industry-Academia Bridge Program

You might also like