Flutter: Shared Preferences, Change Notifier - flutter

Question

This is the code of the count up app with change notifier and shared preferences.
I want it to save the counter in the model and show the last counter when it is opened, but it does not work.
When it is opened, it shows 0. Once I tap the add button, it shows the last counter plus 1.
Please tell me why it does not work and how can I fix it.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(
ChangeNotifierProvider<MyHomePageModel>(
create: (_) => MyHomePageModel(),
child: MyApp(),
)
);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Consumer<MyHomePageModel>(builder: (context, model, child) {
int _counter = model.getCounter();
return Scaffold(
appBar: AppBar(
title: Text('FlutteR Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: Button());
});
}
}
class Button extends StatelessWidget {
#override
Widget build(BuildContext context) {
final model = Provider.of<MyHomePageModel>(context, listen: false);
return FloatingActionButton(
onPressed: () => model.addCounter(),
tooltip: 'Increment',
child: Icon(Icons.add),
);
}
}
class MyHomePageModel extends ChangeNotifier {
int _counter = 0;
void _setPrefItems() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt('counter', _counter);
}
void _getPrefItems() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
_counter = prefs.getInt('counter') ?? 0;
}
void addCounter() {
_counter++;
_setPrefItems();
notifyListeners();
}
int getCounter() {
_getPrefItems();
return _counter;
}
}

Answer 1

2 things I see missing here.
There is no getter for your counter in your HomePageModel. You're calling the getCounter() method in your widget, but the method returns void and not the counter value.
You have a ChangeNotifier, but notifyListeners is never called.
I would recommend setting a getter for your counter and calling notifyListeners in your method.
void _getPrefItems() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
_counter = prefs.getInt('counter') ?? 0;
notifyListeners();
}
int get counter => _counter

Answer 2

void _getPrefItems() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
_counter = prefs.getInt('counter') ?? 0;
}
int getCounter() {
_getPrefItems();
return _counter;
}
_getPrefItems is async function, and when you call getCounter the _counter hasn't been reassigned yet, so it return the default value of _counter which is 0.
So all you have to do is change the getCounter function to async function
Future<int> getCounter() async {
await _getPrefItems();
return _counter;
}
I recommend you to put SharePreferences out of your model, then using FutureProvider, look at the full code, I didn't test it, but you get the idea.
import 'package:animations/animations.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return FutureProvider(
create: (_) => SharedPreferences.getInstance(),
lazy: false,
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Provider(
create: (_) => MyHomePageModel(prefs: Provider.of(context)),
child: Scaffold(
appBar: AppBar(
title: Text('FlutteR Demo Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Consumer<MyHomePageModel>(
builder: (context, model, child) => Text(
'${model.getCounter()}',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
floatingActionButton: Button(),
),
);
}
}
class Button extends StatelessWidget {
#override
Widget build(BuildContext context) {
final model = Provider.of<MyHomePageModel>(context, listen: false);
return FloatingActionButton(
onPressed: () => model.addCounter(),
tooltip: 'Increment',
child: Icon(Icons.add),
);
}
}
class MyHomePageModel extends ChangeNotifier {
final SharedPreferences prefs;
int _counter = 0;
MyHomePageModel({#required this.prefs});
void _setPrefItems() {
prefs.setInt('counter', _counter);
}
void _getPrefItems() {
_counter = prefs.getInt('counter') ?? 0;
}
void addCounter() {
_counter++;
_setPrefItems();
notifyListeners();
}
int getCounter() {
_getPrefItems();
return _counter;
}
}