20. Reading and Writing Data to Persistent Storage in Flutter

Screenshot from the tutorial

Reading and Writing Data to Persistent Storage in Flutter

In the world of mobile app development, storing and retrieving data efficiently is crucial for providing a seamless user experience. Flutter, Google's UI toolkit for building natively compiled applications, offers various options for managing persistent storage. In this blog post, we'll explore how to read and write data to persistent storage in Flutter, making use of the shared_preferences package for simplicity.

What is Persistent Storage?

Persistent storage refers to a storage solution that retains data even when the application is closed or the device is turned off. In Flutter, there are several ways to achieve persistent storage, including:

• Shared Preferences: Ideal for storing small amounts of key-value data.
• SQLite: A relational database for larger datasets.
• File Storage: For storing files on the device.

For this tutorial, we will focus on the shared_preferences package, which is perfect for simple use cases like saving user preferences or application settings.

Setting Up the Flutter Project

To get started, we need to create a new Flutter project and add the shared_preferences dependency.

Step 1: Create a New Flutter Project

Open your terminal and run:

flutter create persistent_storage_example

Navigate to the project directory:

cd persistent_storage_example

Step 2: Add Dependencies

Open the pubspec.yaml file and add the shared_preferences dependency under dependencies:

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.13  # Check for the latest version on pub.dev

Run the following command to install the package:

flutter pub get

Reading and Writing Data

Now that we have set up our project and installed the necessary dependencies, let's implement the functionality to read and write data.

Step 3: Import the Package

In your lib/main.dart file, import the shared_preferences package:

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

Step 4: Create the User Interface

We will create a simple user interface that allows users to enter a name, save it, and display it. Update the MyApp class as follows:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Persistent Storage Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  String _savedName = '';

  @override
  void initState() {
    super.initState();
    _loadName();
  }

Step 5: Load and Save Data

Next, we will implement the methods to load and save the name using shared_preferences:

  Future<void> _loadName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedName = prefs.getString('name') ?? '';
    });
  }

  Future<void> _saveName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString('name', _controller.text);
    _loadName();  // Refresh the saved name
  }

Step 6: Build the User Interface Components

Now, let's build the user interface components that will allow users to enter their name and view it:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Persistent Storage Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(labelText: 'Enter your name'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveName,
              child: Text('Save Name'),
            ),
            SizedBox(height: 20),
            Text('Saved Name: $_savedName'),
          ],
        ),
      ),
    );
  }
}

Running the Application

You can now run your application using the following command:

flutter run

You should see a simple interface with a text field. Enter your name, press the "Save Name" button, and your name will be saved and displayed below.

Conclusion

In this tutorial, we explored how to read and write data to persistent storage in Flutter using the shared_preferences package. This approach is suitable for simple key-value storage needs, such as user preferences or application settings.

Further Reading

• Flutter Documentation on Shared Preferences
• Flutter Documentation on State Management

By mastering persistent storage in Flutter, you can enhance your applications with features like user preferences and settings, making them more engaging and user-friendly. 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