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 theApp state
or you can say a global state.- All other screens are children of this
MyApp
widget - 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 model
in the lib
directory. Now create 5 files with the .dart
extension.
model/ui.dart
about.dart
drawer_menu.dart
home.dart
settings.dart
Now open the pubspec.yaml
file and type flutter_lorem: ^1.1.0
and provider: ^4.3.2+2
just below cupertino_icons: ^1.0.0
and click on Pub get to install the libraries.
We need to flutter_lorem
display 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:
ChangeNotifier
ChangeNotifierProvider
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
build
implementation to the constructor .
4. Create a template
Now open the model / ui.dart
file 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 UI
which implemented the ChangeNotifier
. We have defined a private variable fontSize
and 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 fontSize
value 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 _fontSize
value.
double get fontSize => _fontSize * 30;
4. Modification of Main.dart
Open the main.dart
file 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’;
MyApp
is the main widget and using the main()
function we create an instance of it.
Inside MyApp
we create a MultiProvider
widget, where in the providers
list we go ChangeNotifierProvider(create: (_) => UI())
. UI
is our data model class, and using it ChangeNotifierProvider
we create an instance of it.
In the child section we use the MaterialApp
widget with configured routing.
In your app, if you want to use many providers, just add additional items ChangeNotifierProvider(create: (_) => YOUR_DATA_MODEL())
to the providers
list.
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.dart
file 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.dart
file, 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.Consumer
23
UI
MyApp
Within it, the number of line 24, we pass a builder
function which receives 3 points, and we can access it via the names: context
, ui
and child
. ui
is the UI
class 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 fontSize
is updated, it will use that updated data.
7. About the screen
Similar to the home screen, open the about.dart
file 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.dart
file 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 Slider
widget 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.
Nikunj is a forward thinking developer at Elitech Systems, offering more than four years of experience building, integrating, testing and supporting, iOS and Flutter applications. He’s a big fan of cross-platform programming and an expert in new ways to create silky smooth iOS applications & Cross Platform applications. His framework of choice is Swift. When he is not building and scaling back end systems, you’ll find him to reading or writing on technology and photography.
Comments are closed.