Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      Academy Sports & Outdoors
      Academy Sports & Outdoors
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      AdviceWorks
      AdviceWorks
      NatWest Markets
      NatWest Markets
      Bridgestone
      Bridgestone

      Technologies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Block Chain Mobile App Embedded & Hardware
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      Innovate

      Blockchain Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combalt Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      Canada

      +1 416 907 6738
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

10+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Technologies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combalt
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
State management in flutter

The Battle Between The States (All About State Management in Flutter & Stateful Widgets, and BLoC Architecture)

Paridhi Wadhwani
Paridhi Wadhwani Lead Content Writer
Last Updated on January 31, 2023
June 12, 2020 7 min read

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:

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.

Stateless Widgets

[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. Learn How To Build First Reusable Widget Using Flutter?

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.

Stateful Widgets

[A bare minimum Stateful Widget]

You may also like to read;Top Flutter Libraries, Tools, Packages and Plugins

Flutter State Management

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.

setState()

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()

[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.

Widget Elementary Tree

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.

Widget Elementary Tree.

[Source: Blogspot]

In such scenarios, you will face the following two major problems:

Issue #1 Parent to Child Rendering

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.

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.

Issue #2 Child to Child Rendering

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.

Child to Child Rendering

[Source: Medium]

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 Flutter state management technique for the stateful widgets of your Flutter state management.

BLoC Architecture for State Management in Flutter

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 for Flutter state management best practices.

BLoC Architecture

[Source: https://www.raywenderlich.com]

For understanding the BLoC architecture and flutter state management best practices, 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.

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 in Flutter state management works.

BLoC architecture component

[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.

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 Flutter state management, 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:

Inherited Widget

[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 C
is also a text box widget (stateless), but that does not need to change state on button press.

Here I have presented sample code for the above-illustrated shopping cart example.

illustrated shopping cart
presses Widget A

Whenever a user adds an item by clicking on Widget A, the InheritedWidget _MyInherited is recreated.

InheritedWidget _MyInherited

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

MyInheritedWidgetState

Every time the user adds an item in the cart, the MyInheritedWidgetState rebuilds its state.

MyInheritedWidgetState

This class builds a widget tree whose parent is the MyInheritedWidget class.

MyInheritedWidget class.
widget tree

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

RaisedButton component

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.

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.

Take Away

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 and Flutter state management best practices. 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 state management best practices, 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.


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

MotionLayout in Android
Ritwik Verma
Mansi Kothari

March 28, 2023

Application Development

A Detailed Tutorial On How To Use MotionLayout In Android

By : Ritwik Verma & Mansi Kothari

Quick Summary In the world of Android development, a vast array of widgets and libraries are available that you can use to create breathtaking animations...

7 Minute Read
Read More
Flutter vs Swift
Ritwik Verma

March 6, 2023

Flutter

Flutter vs Swift Choose the Right Framework for Your iOS App Development

By : Ritwik Verma

Quick Summary: Flutter vs Swift is the new hot debate among product owners in 2023. As the Apple ecosystem evolves, the demand for iOS application...

12 Minute Read
Read More
Flutter Theming
Paridhi Wadhwani
Kinjal Dhamat

February 8, 2023

Flutter

Flutter Theming: Light and Dark Theme with Custom Color

By : Paridhi Wadhwani & Kinjal Dhamat

What is Flutter Theming? A theme is a generic styling element that represents the overall style, look, and feel of your application. When you wish...

5 Minute Read
Read More
india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Great Place to Work
Get in Touch
call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Bacancy Behance
  • Bacancy Uplabs
  • Bacancy Pinterest
  • Brochure
  • Quality Assurance
  • Resources
  • Tutorials
  • Customer Reviews
  • Privacy Policy
  • FAQs
  • Contact Us
  • Sitemap
  • Employee
bacancy google review 4.6
bacancy google review
bacancy glassdoor review 4.5
bacancy glassdoor review
bacancy clutch review 4.8
bacancy clutch review
bacancy goodfirms review 4.5
bacancy goodfirms review
X

Get Our Newsletter

Be The First To Get The Latest Updates And Tutorials.

Request A Free Consultation

book a 30 min call popup

Before You Go...

Try our free consultation to visualize the best outcome of your business ideas.

INSTANT 30 MIN FREE CONSULTATION CALL