21. Creating a DataStorage Class in Flutter: Simplifying Data Persistence and Management in Your App

Screenshot from the tutorial

Creating a DataStorage Class in Flutter: Simplifying Data Persistence and Management

In modern app development, data persistence is crucial for creating a seamless user experience. Flutter, with its rich ecosystem, provides several ways to manage data. In this blog post, we will explore how to create a DataStorage class in Flutter that simplifies data persistence and management in your application. We will cover the foundational concepts and provide you with practical code snippets to implement your own data storage solution.

What is Data Persistence?

Data persistence refers to the capability of storing data in a way that it remains available even after the application is closed or the device is restarted. Common methods of data storage in Flutter include:

• Shared Preferences
• SQLite
• Cloud Firestore
• File Storage

For this tutorial, we will focus on using Shared Preferences, which is ideal for storing small amounts of data.

Setting Up Your Flutter Project

Before diving into the code, ensure that you have Flutter installed and set up. If you haven't created a Flutter project yet, you can do so with the following command:

flutter create data_storage_example

Navigate into your project directory:

cd data_storage_example

Adding Dependencies

To utilize Shared Preferences, add the following dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.6  # Check for the latest version

After adding the dependency, run:

flutter pub get

Creating the DataStorage Class

Now that we have set up our project and added the necessary dependency, let's create a DataStorage class to handle our data operations.

Step 1: Define the DataStorage Class

Create a new file named data_storage.dart in the lib directory. Here is a basic implementation of the DataStorage class:

import 'package:shared_preferences/shared_preferences.dart';

class DataStorage {
  // Save data to Shared Preferences
  Future<void> saveData(String key, String value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(key, value);
  }

  // Retrieve data from Shared Preferences
  Future<String?> getData(String key) async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(key);
  }

  // Remove data from Shared Preferences
  Future<void> removeData(String key) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove(key);
  }

  // Clear all data from Shared Preferences
  Future<void> clearAll() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.clear();
  }
}

Step 2: Using the DataStorage Class

Now that we have our DataStorage class set up, let's see how to use it in your Flutter app. Open the main.dart file and modify it as follows:

import 'package:flutter/material.dart';
import 'data_storage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Data Storage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final DataStorage _dataStorage = DataStorage();
  String _inputValue = '';
  String _retrievedValue = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Data Storage Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              onChanged: (value) {
                _inputValue = value;
              },
              decoration: InputDecoration(labelText: 'Enter some data'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () async {
                await _dataStorage.saveData('key', _inputValue);
              },
              child: Text('Save Data'),
            ),
            ElevatedButton(
              onPressed: () async {
                String? value = await _dataStorage.getData('key');
                setState(() {
                  _retrievedValue = value ?? 'No data found';
                });
              },
              child: Text('Retrieve Data'),
            ),
            SizedBox(height: 20),
            Text('Retrieved Value: $_retrievedValue'),
          ],
        ),
      ),
    );
  }
}

Explanation of the Code

1. DataStorage Class: This class provides methods to save, retrieve, remove, and clear data using Shared Preferences.
2. HomePage: In the HomePage widget, we have a simple UI with a TextField for user input, buttons to save and retrieve data, and a Text widget to display the retrieved value.
3. State Management: The setState method is used to update the UI whenever data is retrieved.

Running Your App

To run your app, execute the following command in your terminal:

flutter run

Once the app is running, you can input data and see it persist between app sessions.

Conclusion

In this tutorial, we created a DataStorage class in Flutter that simplifies data persistence using Shared Preferences. This implementation serves as a solid foundation for managing app data efficiently. As your app grows, you can extend this class to handle more complex data types or incorporate other storage solutions.

Feel free to explore, modify, and enhance the DataStorage class to suit your app's specific requirements. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios