Membuat Local Storage – Flutter

November 6, 2022

Local Storage

Kita akan membahas Local Storage atau Penyimpanan Data Lokal, yang akan menggunakan Plugin Shared Prefences untuk membantu kita Menyimpan apa yang kita inginkan.

Penyimpanan lokal membantu kita menyimpan data yang dapat digunakan kembali di lain waktu bahkan setelah aplikasi dimatikan. Salah satu kasus penggunaan yang sangat sederhana adalah ketika kita telah Menginput nama, dan kita Membutuhkan nama itu kembali tanpa harus Menulis ulang.

Dan kita akan menggunakan Plugin Shared Prefences untuk membuat Local Storage ini. Tapi Sebelumnya apa itu Shared Prefences

Shared Prefences

Shared Prefences adalah sekumpulan data dengan tipe key-value yang ingin anda simpan dalam aplikasi mobile, anda dapat menggunakan SharedPreferences API. Data dalam SharedPreferences akan disimpan dalam sebuah file yang mengandung key-value secara berpasangan. Setiap file ini dikelola oleh Android framework yang aksesnya dapat diatur secara private atau dibagikan.

Maka dalam materi ini kita bisa menggunakan Layout Form yang telah kita buat sebelumnya dalam materi Text Field. Lalu daftarkan dependensi plugin Shared Prefences pada file pubspec.yaml

dependencies:

flutter:

sdk: flutter

shared_preferences: ^2.0.15 //Dependensi Shared Prefences

Lalu buat varibel yang berisikan String

final pesanController = TextEditingController();

Setelah itu buat fungsi yang bernama ubahPesan dan muatPesan yang berisikan intance dari Shared Prefences dan juga beri setState yang berisikan fungsi untuk menyimpan dan mengambil data dari Local Storage

_ubahPesan(pesannya) async{

SharedPreferences pref = await SharedPreferences.getInstance();

setState(() {

pref.setString(‘pesan’, pesannya);

});

}

_muatPesan()async{

SharedPreferences pref = await SharedPreferences.getInstance();

setState(() {

_pesan = (pref.getString(‘pesan’) ?? ”);

});

}

Karena kita menggunakan Stateful Widget yang berarti statenya berubah ubah maka untuk menginisialisai data dari fungsi muatPesan maka kita perlu menggunakan initState untuk inisialisasi datanya

@override

void initState() {

super.initState();

_muatPesan();

}

Ubah is onPressed pada RaisedButton dengan memanggil fungsi ubahPesan dan muatPesan

RaisedButton(

child: Text(‘proses’),

onPressed: () {

_ubahPesan(pesanController.text);

_muatPesan();

}),

Bila selesai bisa kita jalankan kode diatas. Berikut hasilnya