Flutter Widget

Flutter Widget
• Widgets: Each element on a screen of the Flutter app is a widget.
• The view of the screen completely depends upon the choice and
sequence of the widgets used to build the apps.
• Widgets describe what their view should look like given their
current configuration and state.
• It includes a text widget, row widget, column widget, container
widget, and many more.
• 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. For example, a widget can display something,
can define design, can handle interaction, etc.
• The structure of the code of an apps is a tree of widgets.
 Types of Widget
• In Flutter, widgets can be grouped into multiple
categories based on their features, as listed below −
• Platform specific widgets
• Platform independent / basic widgets
• Layout widgets
• State maintenance widgets: Stateless Widget and
Stateful Widget

• We can split the Flutter widget into two categories:

• Visible (Output and Input)
• Invisible (Layout and Control)
Platform specific widgets

• Flutter has widgets specific to a particular platform

- Android or iOS.
• Android specific widgets are designed in
accordance with Material design guideline by
Android OS. Android specific widgets are called
as Material widgets.

• iOS specific widgets are designed in accordance

with Human Interface Guidelines by Apple and they
are called as Cupertino widgets.
• Some of the most used material widgets are as • Some of the most used Cupertino widgets are as
follows − follows −

• Scaffold • CupertinoButton
• AppBar • CupertinoPicker
• BottomNavigationBar • CupertinoDatePicker
• TabBar • CupertinoTimerPicker
• TabBarView • CupertinoNavigationBar
• ListTile • CupertinoTabBar
• RaisedButton • CupertinoTabScaffold
• FloatingActionButton • CupertinoTabView
• FlatButton • CupertinoTextField
• IconButton • CupertinoDialog
• DropdownButton • CupertinoDialogAction
• PopupMenuButton • CupertinoFullscreenDialogTransition
• ButtonBar • CupertinoPageScaffold
• TextField • CupertinoPageTransition
• Checkbox • CupertinoActionSheet
• Radio • CupertinoActivityIndicator
• Switch • CupertinoAlertDialog
• Slider • CupertinoPopupSurface
• Date & Time Pickers • CupertinoSlider
• SimpleDialog
• AlertDialog
State Management Widget

• In Flutter, there are mainly two types of widget:

• StatelessWidget
• StatefulWidget
StatelessWidget

• The StatelessWidget does not have any state

information.
• It remains static throughout its lifecycle.
• The examples of the StatelessWidget are Text, Row,
Column, Container, etc.
StatelessWidget
• Here MyApp is a StatelessWidget and the each and
every widget has to override the function called Widget
build(BuildContet context) which returns one or more
widgets.
• So whenever MyApp is instantiated, it will call
the build(...) function and draw the widgets returned by
this function.
• Stateless Widget are immutable once drawn (i.e build)
• The build(...) function of the StatelessWidget is called
only ONCE and no amount of changes in any
Variable(s), Value(s) or Event(s) can call it again.
StatefulWidget
• A StatefulWidget has state information. It contains
mainly two classes:
• the state object.
• the widget.
• It is dynamic because it can change the inner data
during the widget lifetime.
• This widget does not have a build() method. It
has createState() method, which returns a class that
extends the Flutters State Class.
• The examples of the StatefulWidget are
• Checkbox
• Radio
• TextField etc.
StatefulWidget
StatefulWidget
• A stateful widget is implemented by two classes:
• a subclass of StatefulWidget
• a subclass of State.
• A subclass of StatefulWidget that defines the
widget and createState() create a State.
• A subclass of State that contains the state for that
widget and defines the widget’s build() method.
• When the widget’s state changes due to some
event, the state object calls setState(), telling the
framework to redraw the widget.
Life Cycle of StatefulWidget
Life Cycle of StatefulWidget
• createState():
• When we create a stateful widget, a createState() method is needed to return an instance
of state associated with the widget.
• initState():
• It is a method that is called just before the widget gets built. Inside this method, we can
initialize the variable that is required by the build method.
• build():
• This method displays the UI on the screen. It returns a widget. It is called after the
initState() method. This method rebuilds when setState is called.
• didUpdateWidget():
• This method is helpful to unsubscribe the old object and subscribe to the new one if it is
required for the object to be replaced with an updated widget configuration.
• setState():
• It is a method that is called when we need to update the UI. It can’t be called just after the
build method. When this method is called the UI gets rebuilt by calling the build method
again.
• dispose():
• This method is called after the state object is removed completely or called when the
screen is popped.
Basic Widgets
• Text Widget
• Button Widget
• Icon Widget
• Image Widget etc
Text Widget
• It is used to display text on screen.
TextStyle Properties
• color → Color
• The color to use when painting the text
• backgroundColor → Color
• The color to use as the background for the text.
TextStyle Properties
TextStyle decoration properties
• decoration → TextDecoration
• The decorations to paint near the text (e.g., an
underline/overline/lineThrough)
• decorationColor → Color
• The color in which to paint the text decorations.
• decorationStyle → TextDecorationStyle
• The style in which to paint the text decorations (e.g.,
dashed,dotted,double,solid)
• decorationThickness → double
• The thickness of the decoration stroke as a multiplier of
the thickness defined by the font.
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.
• If we have a widget that needs some background styling may be a color, shape,
or size constraints, we may try to wrap it in a container widget.
• It is also a class to store one or more widgets and position them on the screen
according to our needs.
• It allows many attributes to the user for decorating its child widgets, such as
using margin, which separates the container with other contents.
• 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
• alignment → AlignmentGeometry
• Align the child within the container.
• child → Widget
• The child widget contained by the container.
• color → Color
• The color to paint behind the child.
• height → double
• width → double
• margin → EdgeInsetsGeometry
• Empty space to surround the decoration and child.
• padding → EdgeInsetsGeometry
• Empty space to inscribe inside the decoration.
• transform → Matrix4
• The transformation matrix to apply before painting the container.
Container BoxDecoration
Row Widget
• A widget that displays its children in a horizontal
array.
• To cause a child to expand to fill the available
horizontal space, wrap the child in
an Expanded widget.
• The Row widget does not scroll (and in general it is
considered an error to have more children in
a Row than will fit in the available room).
• If you have a line of widgets and want them to be
able to scroll if there is insufficient room, consider
using a ListView.
Row Widget
• children → List<Widget>
• The widgets below this widget in the tree.
• crossAxisAlignment → CrossAxisAlignment
• How the children should be placed along the cross axis.
• mainAxisAlignment → MainAxisAlignment
• How the children should be placed along the main axis.
Column Widget
• children → List<Widget>
• The widgets below this widget in the tree.
• crossAxisAlignment → CrossAxisAlignment
• How the children should be placed along the cross axis.
• mainAxisAlignment → MainAxisAlignment
• How the children should be placed along the main axis.
Icon Widget