Design a site like this with
Get started

Provider: State Management in Flutter

What is State Management?
The state of an app is any data that exists in the memory when the app is running . This state is crucial to rebuild the UI . It may range from assets to variables whose change of value may affect the UI .

What does Provider do?
Provider is Google’s recommended way of handling an app’s state . It can be imported and used in the form of a package available at .

Advantages of Provider
(1) Change of state across the app
(2) Low complexity
(3) Developer-friendly

Steps to Provider
(1) Install the package
(2) Import the package
(3) Declare the class name and the widget name inside ChangeNotifierProvider
(4) Put business logic or the values to be updated inside Change Notifier followed by notifyListeners() to listen for change
(5) Call the function to activate and view the state change inside a widget or class

Provider Implementation in Flutter (Dart)

import ‘package:flutter/material.dart’;
import ‘package:provider/provider.dart’;

void main() {
// Declare the class name and the widget name inside ChangeNotifierProvider
runApp( ChangeNotifierProvider(
create: (_) => CountNotifier(),
child: CounterApp(),),

// logic or the values to be updated stay here
class CountNotifier with ChangeNotifier {
int _counter = 0;
int get counter => _counter;
void incrementCounter() {

// testing the value change in Log / Run using debugPrint()
debugPrint(“Incrementing and notifying”);

// using listeners to notify the change
class CounterApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,),
home: MyHomePage(title: ‘CounterApp (Provider + ChangeNotifier)’),

class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({Key? key, required this.title}) : super(key: key);
Widget build(BuildContext context) {
debugPrint(“Tishan builds Flutter Provider”);
return Scaffold(
appBar: AppBar( title: Text(this.title),),
body: Center( child: Column(
children: <Widget>[
Text(‘Your number of clicks so far today is: ‘),
// updating and displaying the changed-value in a Text widget
floatingActionButton: FloatingActionButton(
onPressed: () =><CountNotifier>().
tooltip: ‘Increment’,
child: Icon(Icons.add),),

// One may display the state-change elsewhere in another widget similarly


Published by Farial Mahmod Tishan

Life-long learner. Developing Flutter apps on Parrot Linux OS .

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: