Skip to main content

Getting started with state management in Flutter (Part 2)

Getting started with state management in Flutter (Part 2)

Introduction to the Provider package

In part 1 of the introduction to state management, we introduced Flutter’s most basic constructs for state management. Using setState() and InheritedWidget's gave us the ability to control how our application re-draws itself based on state changes in real time. In part 2, we will introduce the Provider package, adding another tool in our toolbox for managing state. Provider gives us "syntactic sugar" on top of the InheritedWidget and gives us an easy to use API that help us to remove the amount of boiler plate code that we have to write which is always a win.

Referencing the Provider package in your Flutter application

When building Flutter apps we make use of the Dart package management system Pub is very similar to other package managers from other languages.

In order to install the Provider package into our project we will need to run the following command in the terminal at the root of our project.

flutter pub add provider

This will add a line in your pubspec.yaml that looks like this.

If your IDE does not automatically install the package you may need to run flutter pub get.

Converting our AppBloc from being an InheritedWidget to being a Provider

In part 1, we wrapped our Login page with an AppBloc. This gave us access to walk up the widget tree to find our instance of the AppBloc that holds our state.

Using the AppBloc.of syntax we were able to access our instance to read an update our app state and react based on the current state of our app on redraw of the Login page.

In our new AppBloc you see that we are no longer inheriting from InheritedWidget, it just looks like a plain old class object (POCO).

Our new MaterialApp has a home widget that uses the Provider.value constructor to create a provider using the AppBloc.

When we access our provider in our Login page we will now use a different syntax Provider.of<T>(BuildContext context, {bool listen}).

When we access our AppBloc using this syntax we will receive an instance our Provider.value that we created in our MaterialApp. This syntax should look familiar to our InheritedWidget syntax but removes a bunch of boiler plate code that we would have had to write using the raw InheritedWidget

Why use the Provider pattern

We just looked at a very simple example of using the Provider pattern. The provider pattern can be used to support a complex Flutter architecture that provider change notifiers that help you to redraw your widgets and replace setState and a bunch of other useful functionality. In a future post we will dig into more complex use cases of the provider pattern.

Leave me a comment or send me a tweet if you would like to see more from the Provider package to help build out your Flutter architecture to manage your apps state.


  1. NetEnt Poker Review | Online games for real money | Australia 1xbet korean 1xbet korean 바카라사이트 바카라사이트 우리카지노 쿠폰 우리카지노 쿠폰 9602021 past winning superlotto numbers

  2. The King of Dealer
    With an epic adventure on the 카지노 banks of the Nile, Book of William Harrah's has all you need to do for the success of William Harrah's Wild West.

  3. And those video games won't be the best ones to win either. You do not need to be a psychologist, a consumed marketer, or a casino operator to comprehend that. Fortunately, you don't need to be a hardcore gambler to know the way to|tips on how to} choose a winning slot machine either. Released in 2010, Gonzo's Quest nonetheless didn't let go of its place as one of many top slot machines on-line. When you play Space Wars for real cash, find a way to|you presumably can} choose to guess anyplace from 0.4 to 20 per spin. This on-line recreation is the web model of a classic popular slot you may discover at almost all the live casinos in Las Vegas and Atlantic City.


Post a Comment

Popular posts from this blog

Deploy your Flutter app to AppCenter using Fastlane Part 1 (Android)

Deploy your Flutter app to AppCenter using Fastlane Part 1 (Android) Your created a Flutter app on your local machine but how do you share it with the world One of the most satifying feelings is picking up a new technology and building features that work. But now we want to get our app into our user hands. We will eventually want to get our apps live on the app stores for Android and iOS. But first lets deploy our app to a place where our friends can test our app before we get a bunch of negative reviews on the app store. In part one we will set up Fastlane for Android, since Android setup has less steps. Using AppCenter as a testing tool AppCenter , Also known as the "Hockey App", is a tool that is designed for buidling, testing and deploying your mobile applications. In this post we will use AppCenter as the conduent for testing our applications before we deploy our app to the app store. AppCenter gives us the ability to create our own internal "test" app stor

Setting up your development environment for Flutter and Dart with VSCode

I have been working with Flutter for a few years now and have thoroughly enjoyed working with it to build complex UIs effortlessly in mobile and web. Flutter uses Dart as its programming language. Dart is a language that seems to take the best aspects of many programming languages and brings them all together to form an easy-to-use language. Dart is easy and familiar to adopt regardless of your development background or is easy to learn if you are starting out developing for the first time. More to come on Dart in future posts. The Flutter and Dart documentation provided by Google is vast, But with so much documentation out there is it can be hard to know where to start. This is why I am writing this "_getting started_" guide to try to help new developers get started with Flutter. When I am trying to help new brand new developers learn how to work with Flutter and Dart, the constant struggle is getting the development environment setup. My goal with this post is to get y