Introduction:

Storing data locally is a common requirement in mobile app development. In Flutter, you can use the Shared Preferences package to easily store and retrieve key-value pairs locally on the device. This tutorial will guide you through the process of implementing local data storage using Shared Preferences in Flutter.

Store Data Locally in Flutter using Shared Preferences

Content:

1. Create a new Flutter project:

Before we begin, make sure you have Flutter installed and set up on your machine. Create a new Flutter project by running the following command in your terminal:

Copy Code


flutter create shared_preferences_example

Read more"Explore Flutter Widgets to Create Cross-Platform Apps"

2. Open the pubspec.yaml file:

Once the project is created, navigate to the root directory of your project and open the pubspec.yaml file.

3. Add the shared_preferences dependency:

In the pubspec.yaml file, add the following line under the dependencies section:

Copy Code


dependencies:
  shared_preferences: ^2.0.12

Save the file and run flutter pub get in your terminal to fetch the package.

4. Import the necessary packages:

To work with Shared Preferences, import the following packages at the top of the main.dart file:

Copy Code


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

5. Implement the data storage logic:

Inside the main.dart file, define a SharedPreferences instance and implement the logic to store and retrieve data using Shared Preferences.

a. Initialize SharedPreferences: Create a method called initSharedPreferences() to initialize the SharedPreferences instance:

Copy Code


Future<void> initSharedPreferences() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  // Save the instance to a global variable for easy access
  sharedPreferences = prefs;
}

Call this method at the beginning of the main() function:

Copy Code


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initSharedPreferences();
  runApp(MyApp());
}

b. Store data using Shared Preferences: Create a method called storeData() to store data using Shared Preferences. For example, let’s store a user’s name:

Copy Code


void storeData(String name) {
  sharedPreferences.setString('name', name);
}

c. Retrieve data using Shared Preferences: Create a method called retrieveData() to retrieve data using Shared Preferences. For example, let’s retrieve the stored user name:

Copy Code


String retrieveData() {
  return sharedPreferences.getString('name') ?? '';
}

6. Use the data storage logic in your app:

In your app, use the storeData() and retrieveData() methods to store and retrieve data respectively. For example, you can update the app’s UI based on the stored user name.

7. Run the app:

Save the changes and run the app using the following command in your terminal:

Copy Code


flutter run

Sample Code:

Copy Code


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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _textController = TextEditingController();
  String _savedData = '';

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

  void saveData() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('textKey', _textController.text);
    setState(() {
      _savedData = _textController.text;
    });
    _textController.clear();
  }

  void loadData() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedData = prefs.getString('textKey') ?? '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shared Preferences Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shared Preferences Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(
                controller: _textController,
                decoration: InputDecoration(
                  labelText: 'Enter some text',
                ),
              ),
              SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: saveData,
                child: Text('Save Data'),
              ),
              SizedBox(height: 16.0),
              Text('Saved Data: $_savedData'),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

Conclusion:

Congratulations! You have successfully implemented local data storage using Shared Preferences in Flutter. By using the Shared Preferences package, you can easily store and retrieve key-value pairs locally on the device, enabling you to save and retrieve user preferences, settings, and other persistent data in your Flutter app. Start utilizing Shared Preferences to enhance the

Post Views: 627