Web Analytics
  • Culture
      Back
      Agile Mindset

      Agile is not a principal or a method, but it’s an integral part of being Agile that is guided by principles, defined by values and manifested through various practices.

      Bacancy Values

      You add value to your customer when you deliver a product or service that has been designed specifically to solve their problem.

      Bacancy Culture

      Core Team will work as Scrum Team where Team will have quarterly goal to make sure that we run financial, administrative and project management prospective.

  • What we do
      Back
      Product Engineering

      Seize the opportunity to make your product stand out. We enable our clients

      AI & ML

      We automate businesses and optimize processes by deploying smart AI and...

      Blockchain

      Get a full spectrum of blockchain development services from us to bring scalability...

      IOT

      Improve Business Productivity and Efficiency using our high-end IOT professional services...

      Digital Transformation

      We truly become a part of your business by helping you think through the...

  • Who we work with
      Back
      Real Estate

      We can help you uncover the hidden revenue opportunities to showcase your...

      Finance & Insurance

      In the emerging technological environment, we are offering reliable banking and financial...

      Oil & Gas

      Reshape your energy landscape and gain better control by harnessing the best...

      Healthcare

      Utilizing advanced technologies to provide best software, web & mobile development services...

      Travel & Transport

      Manage your logistics and transportation business at the ease of your fingertips...

      Startups

      We can help you to build your MVP with advanced technologies....

  • About Us
      Back
      About

      Agile, A Process Delivering Values & Successful Products

      Blog

      Abstract Technology News Driven by Sources

      Career

      If you are passionate about your career, have creative flair and good craft skills, we want you!

  • Technology
      Back

      Front-End

      AngularJS ReactJS Vue.JS JavaScript Backbone.JS Ember.JS MEAN MERN

      Back-End

      Ruby on Rails Node.JS Golang Laravel PHP Python .NET Yii

      Mobile

      Android iOS React Native Flutter Ionic Kotlin

      CMS & CRM

      Spree Magento Wordpress Drupal Umbraco Woocommerce Salesforce Microsoft Dynamics 365<
      Explore All
  • Talk to Us
Talk to Us
Close
    MENU
  • Culture
    • Agile Mindset
    • Bacancy Values
    • Bacancy Culture
  • What we do
    • Product Engineering
    • AI & ML
    • Blockchain
    • IOT
    • Digital Transformation
  • Who we work with
    • Real Estate
    • Finance & Insurance
    • Oil & Gas
    • Healthcare
    • Travel & Transport
    • Startups
  • About Us
    • About
    • Blog
    • Career
  • Technology
      Front-End
    • AngularJS
    • ReactJS
    • Vue.JS
    • JavaScript
    • Backbone.JS
    • Ember.JS
    • MEAN
    • MERN
    • Back-End
    • Ruby on Rails
    • Node.JS
    • Golang
    • Laravel
    • PHP
    • Python
    • .NET
    • Yii
    • Mobile
    • Android
    • iOS
    • React Native
    • Flutter
    • Ionic
    • Kotlin
    • CMS & CRM
    • Spree
    • Magento
    • Wordpress
    • Drupal
    • Umbraco
    • Woocommerce
    • Salesforce
    • Microsoft Dynamics 365
    • Explore All
  • Contact Us
  • CLOSE
State management in flutter

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

Paridhi Wadhwani
Paridhi Wadhwani Technical Writer
June 12, 2020 7 min read

Last Updated on November 18, 2020

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.

Parent to Child Rendering

[Source: Medium]

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.

Paridhi Wadhwani
Paridhi Wadhwani View all post
A Vivacious soul with an Idealistic mindset. I am an originator who specializes in content writing, social media marketing, and everything that lies in the vicinity. Writing about trending technologies and emerging domains is my core expertise, and I write to ignite, illustrate, and substantiate. I often submerge into spirituality, cooking, or talking without warning.

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
Flutter Vs React Native
FlutterReact Native
Flutter Vs React Native: Head to Toe Comparison [2021 Edition]
February 15, 2021 by: Paridhi Wadhwani
Felgo Vs Flutter Vs React Native
Flutter
Felgo vs. Flutter vs. React Native: An in-Depth Comparison
January 6, 2021 by: Archita Nayak
flutter m-commerce app
Flutter
Benefits of Using Flutter M-Commerce App for Your eCommerce Business
December 15, 2020 by: Riken Solanki

Top 1% IT Talent

Bacancy Technology is an exclusive hub of top dedicated software developers, UI/UX designers, QA experts, and product managers with an incredibly rare and hidden talents you will ever come across. We let you access the top 1% IT talent from independent software developers to the fully managed teams.

Time Zone Aligned

Timezone is never a constraint when you are working with Bacancy Technology. We follow one very simple principle – our developers and your time zone. Hire dedicated software developers from us and make collaboration in a faraway to work according to your time zone, deadline, and milestone.

Experienced Team

Whether you are looking for skilled developers in emerging technologies or looking for an extended arms to augment your existing team, we can lend a helping hand in both situations. We are a full-stack software development company with 300+ skilled and experienced software developers whom you can hire at your convenience to address the ongoing business challenges

Let us help you build a modern digital business to overcome traditional culture and succeed in the age of digital transformation.

  • USA
  • Canada
  • Australia
  • India
  • UAE
  • Sweden

USA

Bacancy Technology LLC

Florida

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Canada

Bacancy Technology Inc

Toronto

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

Phone

+1 416 907 6738

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Australia

Bacancy Technology

South Australia

351A Hampstead Rd, Northfield SA 5085

Phone

(02) 8005 8222

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

India

Bacancy Technology Pvt Ltd

Ahmedabad

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

Pune

2nd Floor, Marisoft-1, Marigold IT Park, Pune

Phone

079- 40037674

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

UAE

Bacancy Technology

Dubai

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

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Sweden

Bacancy Technology

Hagersten

Junkergatan 4, 126 53 Hagersten

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

How Can We Help?

  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solution
  • Contact Us
DMCA.com Protection Status
Request A Free Consultation