Flutter Secure Storage — Flutter Tutorial | Storing Data locally using Flutter Secure Storage

In this article we will discuss about how to store data locally in our flutter app securely using Flutter Secure Storage package.

🎥 Video Tutorial

🛠️ Dependencies

flutter_secure_storage | Flutter Package

📚 Summary

With the help of flutter secure storage, we will be able to store data in our flutter app securely in the form of key value pair. This flutter secure storage is more likely similar to Shared Preferences but the difference is that, this flutter secure storage has an additional layer of security. Using flutter secure storage, we can store all data types including String, int, double, bool, List<String> etc, locally inside our flutter app.

🔭 Implementation

In this article, let’s focus on storing, retrieving and deleting data from secure store.

→ Storing Data in Secure Storage:
We will try to have an input field (TextFormField widget), once the user clicks save, we will store the data of the text form field locally in secure storage.

 Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: kPadding,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              TextFormFieldBldr(textEditingController: textEditingController),
              
              PrimaryBtn(btnText: 'Store Data', btnFun: () {}),

            ],
          ),
        ),
      ),
    );
  }

Inside the button press event, let’s call the write method which will store the data inside secure storage. And the method is as follows.,

class SecureStorage {
  final FlutterSecureStorage storage = const FlutterSecureStorage();

  writeSecureData(String key, String value) async {
    await storage.write(key: key, value: value);
  }
}

For the write method, we need to pass the key and then the value that needs to be stored.

→ Reading and Deleting Data in Secure Storage:

Similarly the read and delete methods are as follows.,

class SecureStorage {
  final FlutterSecureStorage storage = const FlutterSecureStorage();

  writeSecureData(String key, String value) async {
    await storage.write(key: key, value: value);
  }

  readSecureData(String key) async {
    String value = await storage.read(key: key) ?? 'No data found!';
    print('Data read from secure storage: $value');
  }

  deleteSecureData(String key) async {
    await storage.delete(key: key);
  }
}

Now let’s try calling these respective functions (read, write and delete) inside the onpress event of button widgets. therefore our UI code will be updated as follows.,

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: kPadding,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
         
              TextFormFieldBldr(textEditingController: textEditingController),
             
              PrimaryBtn(
                  btnText: 'Store Data',
                  btnFun: () => SecureStorage()
                      .writeSecureData('name', textEditingController.text)),
             
              PrimaryBtn(
                  btnText: 'Read Data',
                  btnFun: () => SecureStorage().readSecureData('name')),
             
              PrimaryBtn(
                  btnText: 'Delete Data',
                  btnFun: () => SecureStorage().deleteSecureData('name')),
              
            ],
          ),
        ),
      ),
    );
  }

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=GJqfmmwhw-c

Get the complete source code here:👉 https://github.com/vijayinyoutube/flutter_secure_storage_app

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,