Bahir Dar University-BiT-Faculty of Computing

Course Name:-Mobile Application

Development
Chapter 6: State Management
compiled by Samuel. Ashagrre

MOBILE APPLICATION DEVELOPMENT 1

What is the State Management Flutter?
 A state is an information that can be read when the widget is built and
might change or be modified over the lifetime of the app. If you want to
change your widget, you need to update the state object, which can be done
by using the setState() function available for Stateful widgets. The setState()
function allows us to set the properties of the state object that triggers a
redraw of the UI.
State management is one of the most popular and necessary processes in
the lifecycle of an application. According to official documentation, Flutter is
declarative. It means Flutter builds its UI by reflecting the current state of
your app.

MOBILE APPLICATION DEVELOPMENT 2

What is the State Management Flutter?
 Managing State using setState() starts becoming horrific as the code grows.
because whenever you need to change the widget’s UI, you have to call
setState() inside the changing widget, so that it gets rebuilt, and since the
application is composed of hundreds of different widgets, so there could be
hundred different points where you have to take care of calling setState() and
managing state. Moreover, your front-end logic will be scattered in different
places in the UI code. So, using this raw technique to manage the state is not
a good option, we have a better approach to managing the state, which is not
just Easy but Effective, called Provider State Management.

MOBILE APPLICATION DEVELOPMENT 3

Provider State Management In Flutter
 Provider State Management, which is recommended by Google as well,
mainly provides you with a central point to manage the state, and to write
front-end logic.
A provider is a third-party library. Here, we need to understand three main
concepts to use this library.
1. ChangeNotifier
2. ChangeNotifierProvider
3. Consumer

MOBILE APPLICATION DEVELOPMENT 4

ChngeNotifier
 changeNotifier is a simple class, which provides change notifications to its
listeners. It is easy to understand, implement, and optimized for a small
number of listeners. It is used for the listener to observe a model for changes.
In this, we only use the notifyListener() method to inform the listeners.

Let's consider the example of the hotel booking app screen required to book
a hotel room. Simply we can handle the calculations in the BookingProvider
class wrap with the ChangeNotifier class.

MOBILE APPLICATION DEVELOPMENT 5

 ChngeNotifier
import 'dart:ffi';
import 'package:flutter/cupertino.dart'; void setToatalDays(int days, RoomModel room)
{
import
'package:video_stream/models/RoomModel.dart'; totalDays = days;
total = days * room.price;
notifyListeners();
class BookingProvider with ChangeNotifier { }
int totalDays = 0; }
int total = 0;

MOBILE APPLICATION DEVELOPMENT 6

ChangeNotifierProvider
 ChangeNotifierProvider is the widget that provides an instance of a
ChangeNotifier to its descendants. It comes from the provider package. The
following code snippets help to understand the concept of
ChangeNotifierProvider.
Here, we have defined a builder who will create a new instance of the
BookingProvider model. ChangeNotifierProvider does not rebuild
BookingProvider unless there is a need for this. It will also automatically call
the dispose() method on the BookingProvider model when the instance is no
longer needed.

MOBILE APPLICATION DEVELOPMENT 7

ChangeNotifierProvider
class MyApp extends StatelessWidget {
home:
@override ChangeNotifierProvider<BookingProvider>(
Widget build(BuildContext context) { builder: (_) => BookingProvider(),
return MaterialApp( child: MyApp(),
),
theme: ThemeData(
);
primarySwatch: Colors.indigo, }
), }

MOBILE APPLICATION DEVELOPMENT 8

ChangeNotifierProvider
If there is a need to provide more than one class, you can use MultiProvider.
The MultiProvider is a list of all the different Providers being used within its
scope. Without using this, we would have to nest our Providers with one being
the child of another and another. We can understand this from the below code.

MOBILE APPLICATION DEVELOPMENT 9

 ChangeNotifierProvider
Future<void> main() async {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider<BookingProvider>(
create: (_) => BookingProvider()),
ChangeNotifierProvider<ThemeModel>(
create: (_) => ThemeModel(theme: ThemeModel.light)),
],
child: const MyApp(),
),
);
}

MOBILE APPLICATION DEVELOPMENT 10

Consumer
It is a type of provider that does not do any fancy work. It just calls the provider
in a new widget and delegates its build implementation to the builder. The
following code explains it more clearly .

MOBILE APPLICATION DEVELOPMENT 11

Consumer
Consumer<BookingProvider>(
builder: (context, bookigProvider, child) {
return Padding(
padding: const EdgeInsets.only(bottom: 12, left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child:
Texts.subheads('Total', themeModel.priceColor),
),

MOBILE APPLICATION DEVELOPMENT 12

Consumer

Card(
elevation: 2,
color: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),

MOBILE APPLICATION DEVELOPMENT 13

Consumer
child: Padding(
padding: const EdgeInsets.symmetric( ],
vertical: 6, horizontal: 8), ),
),
child: Row( ),
],
children: [ ),
Texts.subheads( );
}),
"${bookigProvider.total.toString()} LKR",
themeModel.textColor),

MOBILE APPLICATION DEVELOPMENT 14

Consumer
 In the above example, you can see that the consumer widget only requires
a builder function, which is called whenever the ChangeNotifier changes. The
builder function contains three arguments, which are context,
bookingProvider, and child. The first argument, context, contains every build()
method. The second argument is the instance of the ChangeNotifier, and the
third argument is the child that is used for optimization. It is the best idea to
put the consumer widget as deep in the tree as possible.

MOBILE APPLICATION DEVELOPMENT 15

Pros and Cons of Flutter Provider state
management
 Advantages of using Flutter Provider state management
In Flutter, the Provider is a lightweight and adaptable state management option.
In comparison to other solutions, it allows for a more granular and localized approach
to state management.
Provider supports dependency injection, making sharing object instances across your
project simple.
It works well with Flutter features like streams, ChangeNotifier, and ValueNotifier.

MOBILE APPLICATION DEVELOPMENT 16

Pros and Cons of Flutter Provider state
management
 Disadvantages of using Flutter Provider state management
 For beginners, the provider can be tough to set up and understand.
 It might not be the ideal choice for managing more sophisticated
and dynamic states that must be shared by multiple widgets.
 The service lacks built-in support for time-travel debugging,
making debugging some bugs more difficult.

MOBILE APPLICATION DEVELOPMENT 17

Thank
you

MOBILE APPLICATION DEVELOPMENT 18