Scribd
Upload
3 views

Week7-1

Widgets are the fundamental building blocks of Flutter apps, allowing for the creation of user interfaces through a tree structure of nested widgets. They can be categorized into visible widgets, which handle user input and output, and invisible widgets, which manage layout and control. Flutter features both stateless and stateful widgets, each with distinct lifecycles and state management capabilities.

Uploaded by

Muneeb Ahmad Bhatti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Week7-1

Widgets are the fundamental building blocks of Flutter apps, allowing for the creation of user interfaces through a tree structure of nested widgets. They can be categorized into visible widgets, which handle user input and output, and invisible widgets, which manage layout and control. Flutter features both stateless and stateful widgets, each with distinct lifecycles and state management capabilities.

Uploaded by

Muneeb Ahmad Bhatti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Widgets in Flutter

Widget
What is Widget?
Widget Tree
Types of Widgets
Widgets State
Widgets Lifecycle
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.
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.
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.
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
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
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.
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, Form, and TextField.


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 stateful
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container();}}
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
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.
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

You might also like