An easy tutorial about the usage of a flutter tightly closed storage package.
It is a bundle that ought to be used in instances the place your personal information such as password electronic mail have to be kept. It is an choice bundle to the Shared Preferences package. In each packages, it ensures that your facts is stored as a key fee pair locally. Flutter Secure Storage is additionally storing them securely and encrypted.
Let’s begin.
First of all you have to add flutter_secure_storage bundle to your pubspec.yaml.
flutter_secure_storage: ^5.1.0
Configure Android version
android {
...
defaultConfig {
...
minSdkVersion 18
...
}
}
After this configurations, we have to make a display sketch for check the package.
In this instance, we will attempt to retailer the username and password. Let’s code classification for Secure Storage.
We are developing a FlutterSecureStorage occasion in the class. For key-value pairs, we title the keys as ‘username’ and ‘password’. We create the set and get methods.
import 'package:flutter/foundation.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
class SecureStorage {
// Create storage
final storage = const FlutterSecureStorage();
final String _keyUserName = 'username';
final String _keyPassWord = 'password';
Future setUserName(String username) async {
await storage.write(key: _keyUserName, value: username);
}
Future<String?> getUserName() async {
return await storage.read(key: _keyUserName);
}
Future setPassWord(String password) async {
await storage.write(key: _keyPassWord, value: password);
}
Future<String?> getPassWord() async {
return await storage.read(key: _keyPassWord);
}
}
We create textformfields for username and password. We are growing TextEditingControllers for these textformfields and developing an occasion from the SecureStorage type that we coded before.
Then we write the get and set strategies genuinely that we organized earlier.
Get Methods :
<void> fetchSecureStorageData() async {
_userNameController.text = await _secureStorage.getUserName() ?? ‘’;
_passwordController.text = await _secureStorage.getPassWord() ?? ‘’;
}
Set Methods :
await _secureStorage.setUserName(_userNameController.text);
await _secureStorage.setPassWord(_passwordController.text);
This is the code of the screen :
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final GlobalKey<FormState> _formKey = GlobalKey();
final TextEditingController _userNameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
final SecureStorage _secureStorage = SecureStorage();
@override
void initState() {
super.initState();
fetchSecureStorageData();
}
Future<void> fetchSecureStorageData() async {
_userNameController.text = await _secureStorage.getUserName() ?? '';
_passwordController.text = await _secureStorage.getPassWord() ?? '';
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircleAvatar(
child: Icon(Icons.key),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
'Flutter Secure Storage',
style: Theme.of(context).textTheme.headline5,
),
)
],
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: TextFormField(
controller: _userNameController,
decoration: InputDecoration(
hintText: 'Username',
focusedBorder: UiHelper.textFieldBorder,
enabledBorder: UiHelper.textFieldBorder,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password',
focusedBorder: UiHelper.textFieldBorder,
enabledBorder: UiHelper.textFieldBorder,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () async {
await _secureStorage.setUserName(_userNameController.text);
await _secureStorage.setPassWord(_passwordController.text);
},
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 20.0),
child: Text('Save'),
),
),
),
),
],
),
),
),
),
);
}
}
This is the last end result :
Finally, when we shut and open the application, we see that the username and password are saved.
All Done👍
