Flutter

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...

Ikhwan Written by Ikhwan · 2 min read >

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 memiliki fungsi yang sama dengan SharedPreferences di Android, dan UserDefaults di iOS.

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: 0.5.12+4

2. MySharedPref.dart

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

import 'package:explore_data/useCase/sharedPreferences/ExampleModel.dart';
import 'package:shared_preferences/shared_preferences.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);
  }

  Future<String> getValue() async => (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 untuk mempermudah dalam mengconvert object json menjadi string

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({
    this.greeting,
    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. Activity

Gunakan code berikut untuk activity:

import 'package:explore_data/useCase/sharedPreferences/MySharedPref.dart';
import 'package:flutter/material.dart';

class SharedPrefActivity extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SharedPrefActivityState();
}

class SharedPrefActivityState extends State<SharedPrefActivity> {
  MySharedPref _mySharedPref = MySharedPref();

  String _value = "Kosong";
  TextEditingController _inputController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: [
            Align(
              alignment: Alignment.center,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 24, bottom: 4),
                    child: Text("Simpan nilai",
                        style: TextStyle(fontWeight: FontWeight.bold)),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 24, right: 24, bottom: 8),
                    child: TextField(
                      controller: _inputController,
                    ),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _mySharedPref.setValue(_inputController.value.text);
                      _inputController.text = "";
                    },
                    child: Text("Simpan"),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 12, bottom: 8),
                    child: Text("Ambil nilai",
                        style: TextStyle(fontWeight: FontWeight.bold)),
                  ),
                  Container(
                    margin: EdgeInsets.only(bottom: 8),
                    child: Text("Nilai: $_value"),
                  ),
                  RaisedButton(
                    onPressed: () {
                      setState(() {
                        _mySharedPref.getValue().then((value) {
                          if (value != null) _value = value;
                        });
                      });
                    },
                    child: Text("Ambil"),
                  )
                ],
              ),
            )
          ],
        ));
  }
}

Setelah itu panggil class SharedPrefActivity di runApp. Maka hasilnya kurang lebih akan seperti berikut:

Hasil

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

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

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *