Penyimpanan data lokal pada Flutter (shared_preferences)

Biasanya setiap aplikasi mobile memiliki data yang disimpan pada lokal device. Seperti token yang biasa dijadikan penanda user sudah pernah login atau belum pada aplikasi. Dengan hal tersebut user tidak harus login berulang kali setiap aplikasi dibuka. Pada flutter kita menggunakan shared_preferences untuk penyimpanan data lokal yang bersifat key-value pairs. Package ini akan membungkus fungsi native seperti SharedPreferences di Android, dan UserDefaults di iOS.

Tulisan ini termasuk ke pada rangkaian pembahasan penyimpanan data lokal pada Flutter:

1. [Tulisan ini] Penyimpanan data lokal pada Flutter (shared_preferences)
2. Penyimpanan data lokal pada Flutter (sqflite)
3. Cara untuk melakukan migration pada SQFLite

Kita langsung aja ke codenya ya, Yuk Ngoding.

1. Tambahkan package

Pada pubspec.yaml tambahkan package shared_preferences dan jalankan flutter pub get

  shared_preferences: ^2.1.2

2. shared_preferences.dart

Disini mimin biasanya membuat class khusus untuk menghandle data lokal tersebut. Buat file dengan nama MySharedPref.dart dan tambahkan code berikut:

import 'package:shared_preferences/shared_preferences.dart';

import '../../models/example_model.dart';

class MySharedPref {
  static const String keyValue = "value";
  static const String keyExampleModel = "exampleModel";

  Future<SharedPreferences> getPreferences() async =>
      await SharedPreferences.getInstance();

  setValue(String value) async {
    (await getPreferences()).setString(keyValue, value);

    /// Other than strings
    // (await getPreferences()).setInt(keyValue, 10);
    // (await getPreferences()).setBool(keyValue, true);
    // (await getPreferences()).setDouble(keyValue, 1.5);
    // (await getPreferences()).setStringList(keyValue, <String>['Earth', 'Moon', 'Sun']);
  }

  Future<String?> getValue() async {
    /// Other than strings
    // final int? counter = (await getPreferences()).getInt(keyValue);
    // final bool? repeat = (await getPreferences()).getBool(keyValue);
    // final double? decimal = (await getPreferences()).getDouble(keyValue);
    // final List<String>? items = (await getPreferences()).getStringList(keyValue);

    return (await getPreferences()).getString(keyValue);
  }

  setModel(ExampleModel model) async {
    (await getPreferences())
        .setString(keyExampleModel, exampleModelToJson(model));
  }

  Future<ExampleModel?> getModel() async {
    var data = (await getPreferences()).getString(keyExampleModel);
    if (data != null) return exampleModelFromJson(data);
    return null;
  }

  Future<bool> clearAllData() async {
    var sharedPref = await SharedPreferences.getInstance();
    sharedPref.remove(keyValue);
    sharedPref.remove(keyExampleModel);
    return true;
  }
}

• keyValue dan keyExampleModel adalah key yang kita gunakan untuk mengambil nilai dari SharedPreferences
• Method getPreferences() digunakan untuk mendapatkan object SharedPreferences yang digunakan untuk mengelola data lokal
• setValue dan getValue merupakan contoh sederhana dalam menyimpan value dengan tipe data String.
• setModel dan getModel merupakan contoh menyimpan object dengan mengubahnya menjadi string agar bisa disimpan pada SharedPreferences
• Method clearAllData digunakan untuk menghapus semua data lokal pada SharedPreferences

* Tips: gunakan quicktype atau javiercbk untuk mempermudah dalam mengconvert object json menjadi dart class.

Oh y berikut contoh dari class model yang digunakan.

// To parse this JSON data, do
//
//     final exampleModel = exampleModelFromJson(jsonString);

import 'dart:convert';

ExampleModel exampleModelFromJson(String str) =>
    ExampleModel.fromJson(json.decode(str));

String exampleModelToJson(ExampleModel data) => json.encode(data.toJson());

class ExampleModel {
  ExampleModel({
    required this.greeting,
    required this.instructions,
  });

  String greeting;
  List<String> instructions;

  factory ExampleModel.fromJson(Map<String, dynamic> json) => ExampleModel(
        greeting: json["greeting"],
        instructions: List<String>.from(json["instructions"].map((x) => x)),
      );

  Map<String, dynamic> toJson() => {
        "greeting": greeting,
        "instructions": List<dynamic>.from(instructions.map((x) => x)),
      };
}

3. Screen

Gunakan code berikut untuk activity:

import 'package:flutter/material.dart';

import '../repository/local/shared_preferences.dart';

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({super.key});

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  final MySharedPref _mySharedPref = MySharedPref();

  String _value = "Empty";
  final TextEditingController _inputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Explore SharedPreferences"),
      ),
      body: Container(
        margin: const EdgeInsets.symmetric(
          vertical: 12,
          horizontal: 16,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              "Save value",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24,
              ),
            ),
            Container(
              margin: const EdgeInsets.only(
                bottom: 8,
              ),
              child: TextField(
                controller: _inputController,
              ),
            ),
            ElevatedButton(
              onPressed: () {
                _mySharedPref.setValue(_inputController.value.text);
                _inputController.text = "";
              },
              child: const Text("Save"),
            ),
            Container(
              margin: const EdgeInsets.only(top: 32, bottom: 8),
              child: const Text(
                "Get Value",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 24,
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(bottom: 8),
              child: Center(
                child: Text("Value: $_value"),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _mySharedPref.getValue().then((value) {
                    if (value != null) _value = value;
                  });
                });
              },
              child: const Text("Get"),
            )
          ],
        ),
      ),
    );
  }
}

Setelah itu panggil class ExampleScreen. Maka hasilnya kurang lebih akan seperti berikut:

Sekian tulisan kali ini. Pada tulisan selanjutanya kita akan membahas cara penyimpanan data lokal lainnya pada Flutter, ditunggu ya. Terimakasih dan semoga bermanfaat 😀

Tulisan ini termasuk ke pada rangkaian pembahasan penyimpanan data lokal pada Flutter:

1. [Tulisan ini] Penyimpanan data lokal pada Flutter (shared_preferences)
2. Penyimpanan data lokal pada Flutter (sqflite)
3. Cara untuk melakukan migration pada SQFLite

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Membuat animasi dengan Motion Layout di Android (Part-1)
• Memulai aplikasi iOS dengan XIB di XCode
• Mengelompokkan Berbagai Widget dengan Column