How do you use a provider in flutter?

Whether you are developing a native application or a hybrid application, health management is a common issue to address. To manage overall state in a Flutter app, Provider is one of the most popular libraries.

 
In this tutorial, I will guide you, how to use the provider in a Flutter app. We will build the following application with 3 screens:

• Home
• Sure
• Settings

I’m assuming you have a basic understanding of the Flutter framework .

1. Concept of global state

If you’re already using a stateful widget, you know what state is and how to use local state in a Flutter app. But we want to use a global state so that any screen or widget can access the data.

So visually it will look like this.

• MyApp is the main widget or the root widget where we will link the App state or you can say a global state.
• All other screens are children of this MyAppwidget
• But since we have a world state, we can easily access it from anywhere.

I am using Android Studio to create flutter apps. But it is optional. You can also use the Visual Studio code editor .

2.1 Create a new Flutter project in Android Studio

Select New Flutter Project from the File – New menu.

 
You will see the following screen. Now select the Flutter app and click Next.

 
Now write a project name, select the path of the Flutter SDK, set the location of the project and click Next.

 
Now write a package name if you want another name and click Finish.

 
Now you will see the following screen:

2.2 Create some files and a directory

Create a directory name modelin the libdirectory. Now create 5 files with the .dartextension.

• model/ui.dart
• about.dart
• drawer_menu.dart
• home.dart
• settings.dart

 
Now open the pubspec.yamlfile and type flutter_lorem: ^1.1.0and provider: ^4.3.2+2just below cupertino_icons: ^1.0.0and click on Pub get to install the libraries.

We need to flutter_loremdisplay random text.

4. Important concept

Before we dig any further, let’s know some concepts. To use a global report by supplier, we must understand 3 classes:

1. ChangeNotifier
2. ChangeNotifierProvider
3. Consumer

ChangeNotifierProvider class comes from the Provider library . He listens to one ChangeNotifier and when he listens to something new by ChangeNotifier.notifyListenersis called, he rebuilds his addicts.

The Consumerbasically a widget by the provider’s library. It simply calls Provider.of in a new widget and delegates its buildimplementation to the constructor .

4. Create a template

Now open the model / ui.dartfile and write the following code:

import 'package:flutter/material.dart';

class UI with ChangeNotifier {
  double _fontSize = 0.5;

  set fontSize(newValue) {
    _fontSize = newValue;
    notifyListeners();
  }

  double get fontSize => _fontSize * 30;

  double get sliderFontSize => _fontSize;
}

Here we have created a class UIwhich implemented the ChangeNotifier. We have defined a private variable fontSizeand a few methods to access or modify the value.

In the set fontSize(newValue)method, you see that there is a notifyListerns()method at the end. If the fontSizevalue is changed, it informs its listeners. If you don’t use this method nothing will work, so this is very important.

Another thing is that the slider value for the font size is between 0.0 and 1.0. But we want a human readable font size. That’s why we multiply 30 by the _fontSizevalue.

double get fontSize => _fontSize * 30;

4. Modification of Main.dart

Open the main.dartfile and delete all the code. Now paste the following code into it.

Here we import our own custom widgets and most importantly the provider package by import ‘package:provider/provider.dart’;

MyAppis the main widget and using the main()function we create an instance of it.

Inside MyAppwe create a MultiProviderwidget, where in the providerslist we go ChangeNotifierProvider(create: (_) => UI()). UI is our data model class, and using it ChangeNotifierProviderwe create an instance of it.

In the child section we use the MaterialAppwidget with configured routing.

In your app, if you want to use many providers, just add additional items ChangeNotifierProvider(create: (_) => YOUR_DATA_MODEL())to the providerslist.

5. Create a drawer menu

We need 3 menu items. Home , About and Settings . Using the drawer menu system, we can easily do this.

Open the drawer_menu.dartfile and paste the following code.

The code is self-explanatory. Basically, it creates the menus, and if the user taps on a menu item, it will display that widget as a screen.

6. Home screen

Now we need to create the home screen where we will display random text.

So open the home.dartfile, copy the following code and paste it into it.

The code is easy to understand. Note only that we are using a row number widget . This means we want to access the data model here, which is linked to the top level root widget through the provider.Consumer23UIMyApp

Within it, the number of line 24, we pass a builderfunction which receives 3 points, and we can access it via the names: context, uiand child. uiis the UIclass instance which is technically instantiated and linked to our main widget MyApp.

Now in the generator function we place the widget where we want to access the font data .

If in your application you are using multiple data models, just mention the model name in the Consumer widget

So if the fontSizeis updated, it will use that updated data.

7. About the screen

Similar to the home screen, open the about.dartfile and copy-paste the following code.

8. Settings screen

This is the screen where the user will see a cursor and can change the font size.

Now open the about.dartfile and copy paste the following code

This part is similar to home.dart. But the only difference is that this widget can both access and update police data. In the Sliderwidget at line number 27, you will see on line number 30–32, we are updating the font size via ui.fontSize = newValue.So all other screens when appear will show the updated font size.

Conclusion

I like the Provider library for its ease of use. Unless your team prefers another state management library, just use it.