Know all about Flutter's Stateless and Stateful widgets, and the BLoC architecture to manage their states from the top Flutter App Development Company.

1. The Battle Between The
States (All About
Flutter Stateless &
Stateful Widgets, and
BLoC Architecture)
WWW.BACANCYTECHNOLOGY.COM

2. All things you come across in Flutter are
Widgets. Like Components/Controllers in
Ionic language, Activities in Android, or
React Native Components, everything you
create on your app screen is a Widget. So,
Buttons, Checkbox, Radio, ListView,
Drawer, Tabs, Grid, etc. that interact with
the visual aspect of your application are
widgets.
From this blog’s title, you would have made
out that there are two types of Widgets in
Flutter:Stateless & Stateful Widgets.
First, let us understand them:

3. Stateless Widgets do not have a specific
mutable state and are immutable, meaning
when the app is in action, the stateless
widgets cannot be redrawn. Hence, such
widgets do not have any internal state, and
you can modify their state only when they
are re-initialized.
Text, Column, Row, Container, etc. are
stateless widgets, and you need to pass
some parameters while creating these
widgets such as dimensions or decorations.
The state of such widgets remains the same
throughout the application lifetime.

4. [A bare minimum Stateless Widget]
On the contrary, Stateful Widgets have a
mutable state, and you can draw them n
number of times within their lifetime. Such
widgets are dynamic, and you can modify
their state without reinitiation.
Checkbox, Button, etc. are examples of
stateful widgets that generally contain an
inner value or data that determines their
state. The state of the widget may change as
a user selects an item of the checkbox or
presses a button.

5. [A bare minimum Stateful Widget]
You may also like to read;Top Flutter
Libraries, Tools, Packages and Plugins

6. State Change
Management

7. The state of a stateful widget can vary at
different stages during the app lifetime. On
every action, you need to define the state of
your stateful widget and reinitiate it. You
can execute the same by assigning
properties to the setState() method.
For a stateful widget, whenever you call this
function, it triggers the build() function of
the widget, which in turn redraws the
widget. Ideally, you should call the
setState() function under the onChanged
property of the widget.
Let us see a sample code where we imply
state change for a checkbox:
setState()

8. [Redrawing widget using setState()]
However, this method of widget redrawing
has some drawbacks. Before we get to the
issues, you need to understand the widget
hierarchy in your flutter application.

9. The following image will describe the
scenario well. Your application will be
categorized likewise. Now, for example, you
want to change the state of a child widget
when a parent widget is affected.
[Source: Blogspot]
In such scenarios, you will face the
following two major problems:
Widget Elementary Tree

10. Ideally, when you execute a setState()
function on a parent widget, it by-default
runs all its child widgets, whether or not
they are stateful widgets, or whether or not
they are stateful widgets need to be
redrawn.
[Source: Medium]
Issue #1 Parent to Child
Rendering

11. This way, all the child widgets are rendered
irrespective of a need to state-change. So,
you are unable to render a specific child
widget, keeping the rest unchanged.

12. Imagine you want to change the state of one
child widget when some action occurs on
another child widget. Both widgets are in
the same class and are rendered by one
parent widget. In such a case, you will be
unable to render a child widget from
another.
[Source: Medium]
Issue #2 Child to Child
Rendering

13. Now, to overcome these barriers of the
setState() method, and to enable MVC
architecture for your Flutter application,
there are some state management
techniques.
MobX, Scoped Model, Redux, and BLoC
Architecture can help you solve the issue.
However, Scoped Model and Redux again
face primary issues relevant to boilerPlate,
Scope, and data rendering.
So, let me share the most reliable state
management technique for the stateful
widgets of your Flutter app.

14. BLoC
Architecture

15. At their Google I/O conference (2018), Paolo
Soares and Cong Hui introduced the BLoC
architecture pattern for Business Logic
Component and applied it to the business
logic between various Dart applications.
Applying the BLoC architecture, you can
keep the business logic of your application
separate from the UI view by using Streams.
In this manner, it enables an MVVM
architecture for your app.
However, BLoC is a logic and not an
architectural theory, so you can choose any
suitable architecture for your application
and can still implement the BLoC logic.

16. [Source: https://www.raywenderlich.com]
For understanding the BLoC architecture,
you will first have to know some notions.
Streams yield multiple values that are
asynchronous events. Streams are similar to
the Future that the dart: async package
provides.

17. You can consider Sink as the end from
where you feed data in your application.
StreamController acts like the manager of
both Stream and Sink. It coordinates your
application functioning by handling the
business logic under it.
StreamBuilder is yet another manager that
observes StreamController and implements
the state change in your app.
Now, let us see how the BLoC architecture
works.

18. [Source: Medium]
The above diagram depicts a simple flow of
execution when a user interacts with your
application. When a user clicks a UI
component of your application, it sends an
event (action) to the BLoC component.

19. After that, the BLoC component interprets
the action and executes the required
business logic. It passes the state change of
the destination widget that will show the
results of his/her action.
Here, to understand the role of
InheritedWidget in the above figure, you
should read ahead.
Inherited Widget
To understand the concept of Inherited
Widgets, we will take an example, and for
that, you need to consider the following
widget-tree structure:

20. [Source: https://www.didierboelens.com]
Suppose Widget A is a button widget
(stateful) in our shopping cart example.
Widget B is a text box widget (stateful) that
changes state every time a user presses
Widget A (button). Widget Cis also a text
box widget (stateless), but that does not
need to change state on button press.

21. Here I have presented sample code for the
above-illustrated shopping cart example.
Whenever a user adds an item by clicking
on Widget A, the InheritedWidget
_MyInherited is recreated.

22. MyInheritedWidget contains a list of Items.
The static MyInheritedWidgetState
generates the state of the context
(BuildContext).

23. Every time the user adds an item in the cart,
the MyInheritedWidgetState rebuilds its
state.
This class builds a widget tree whose parent
is the MyInheritedWidget class.

24. WidgetA is a RaisedButton component that
invokes the addItem method of closest
MyInheritedWidget on user-press.

25. The number of items in the shopping cart
will be displayed in WidgetB, a simple text
component. It takes the updated value of
the cart-item from the closest
MyInheritedWidget.
In the above sample code, Widget A and
Widget B are rebuilt, and Widget C remains
unchanged as there is no need for it to
rebuild.

26. Google’s Flutter is an amazing language that
has proved its wonders. Whether Stateless
or Stateful Widgets, whatever type of app
you want to create for your users, you
would want the best of all Flutter app
development company. At Bacancy, we
have expert Flutter masters that can
accomplish almost anything that any other
language like Kotlin, Swift, or Java can
achieve.
Using the Flutter framework, our proficient
Flutter app developers can build next-
generation Android and iOS apps. Build
high-quality, native, and sophisticated
interfaces in no time with Flutter.
Take Away

27. Thank You