Last Updated on 2021-10-12 by Clay
In the process of developing an application, it is inevitable that there will be data storage requirements, whether it is parameter settings of the App, or the configuration of the user.
Of course, if we want to develop an App specifically for recording, such as accounting application, we still have to set up SQLite or other databases to complete this work.
But on the other hand, if you just want to store user settings, it seems unnecessary to create a SQLite database. Of course it is not impossible, but we can use a simpler way to do it.
What I want to record today is the very famous persistent storage package shared_preferences on Flutter.
This package encapsulates SharedPreferences on Android, NSUserDefaults on iOS and Mac OS, allowing us to use this package on Flutter to simultaneously complete data storage on different platforms.
Preparation
First, we need to add the package name shared_preferences we need to use in the pubspec.yaml file.
Do not forget to use flutter pub get.
Example
On the head of program, we need to import 'package:shared_preferences/shared_preferences.dart'.
Because the storage method of the shared_preferences package is a key-value data format, we need to set the key and value of the stored data.
That is my variable key and value in the _HomePageState.
Then I created a text display field, input field and a button. Whenever the button is clicked, the string in the input field is assigned to the text display field and SharedPreferences object, and the stored value is updated.
Every time the mobile device opens the application, the data of SharedPreferences will also be loaded to confirm the last saved data.
Please see below for detailed code and demo results.
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Init
String key = "show";
String value = "Nothing";
TextEditingController controller = TextEditingController();
void initState() {
super.initState();
_loadData();
}
_loadData() async {
SharedPreferences sp = await SharedPreferences.getInstance();
setState(() {
value = (sp.getString(key) ?? "Nothing");
});
}
_updateData() async {
SharedPreferences sp = await SharedPreferences.getInstance();
setState(() {
sp.setString(key, controller.text);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Your message: ${value}"),
// Input box
TextField(
autofocus: true,
controller: controller,
decoration: InputDecoration(
labelText: "You can enter any string",
hintText: "Your message",
),
)
],
),
),
// Button
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
value = controller.text;
_updateData();
});
},
child: Icon(Icons.arrow_back),
),
);
}
}
Output:
References
- https://pub.dev/packages/shared_preferences
- https://medium.com/flutterdevs/using-sharedpreferences-in-flutter-251755f07127
- https://flutter.dev/docs/cookbook/persistence/key-value