Belajar Shared Preference Flutter

Bismillah, Assalamu’alaykum Warahmatullahi Wabarakatuh
Halo teman-teman semua! Pada kali ini kita akan belajar mengenai Shared Preference.

Shared Preference dapat dikatakan sebagai Plugin yanag digunakan untuk menyimpan simple data atau data sederhana pada device storage, dan tidak disarankan untuk menyimpan data yang penting seperti database. Jika teman-teman ingin menyimpan database di local storage, lebih disarankan menggunakan SQFLite ya..

Jadi seperti apa sih contoh penggunaan Shared Preference pada Flutter ?

Hari ini kita akan belajar Shared Preference, Yukk kita cari tau dulu apa itu Shared Preference!

Nah, untuk contoh sederhana kita dapat menggunakan program default ketika kita membuat project baru Flutter aja yaa..

Ketika kita running MyApp akan tampil seperti Counter Apps gitu kan ya, dan ketika di klik angkanya akan bertambah bukan? namun ketika kita tutup aplikasinya dan dijalankan kembali akan kembali ke defaultnya yaitu 0. Dengan menggunakan Shared Preference kita bisa menyimpan perubahan terakhir yang kita lakukan pada aplikasi. Jadi, ketika di Run kembali tidak akan kembali ke defaultnya lagi.

Bagaimana cara mengimplementasikan Shared Preference ?

Pertama, Tambahkan plugin Shared Preference pada pubspec.yaml

untuk menyesuaikan versi SDK yang terinstal, disini aku menggunakan versi 2.0.5 ya.

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.5

Selanjutnya, Mari kita modifikasi Class MyApp

Hasil Runningnya akan seperti gambar berikut:

Jadi kita akan menambahkan Button Minus dan Button Add, serta FloatingActionButton untuk mengganti tema aplikasi.

Di class kita bisa tambahkan variable counter dan isDark terlebih dahulu ya, untuk Text angka dan tema aplikasinya nanti.

class _MyAppState extends State<MyApp> {
  int counter = 0;
  bool isDark = false;

Lalu, kita tambahkan function untuk Add dan Minus dan juga untuk Theme

class _MyAppState extends State<MyApp> {
  int counter = 0;
  bool isDark = false;
//untuk mengurangi angka
  void minus() {
    //seperti ini
    counter = counter - 1;
    setPreference();
  }
  //untuk menambah angka
  void add() {
    counter = counter + 1;
    setPreference();
  }
  // untuk mengganti thema
  void changeTheme() {
    isDark = !isDark;
    setPreference();
  }
  // untuk refresh
  void refresh() {
    counter = 0;
    isDark = false;
    setPreference();
  }
  ThemeData dark = ThemeData(
    brightness: Brightness.dark,
    primaryColor: Color(0xff39A2DB),
    primarySwatch: Colors.amber,
    accentColor: Color(0xffA2DBFA),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        primary: Colors.white,
        side: BorderSide(
          color: Colors.white,
          width: 2,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50),
        ),
      ),
    ),
  );
  ThemeData bright = ThemeData(
    brightness: Brightness.light,
    primaryColor: Color(0xff39A2DB),
    primarySwatch: Colors.amber,
    accentColor: Color(0xffA2DBFA),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: OutlinedButton.styleFrom(
        primary: Colors.black,
        side: BorderSide(
          color: Colors.black,
          width: 2,
        ),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(50),
        ),
      ),
    ),
  );

Untuk implementasi Shared Preference, kita bisa tambahkan Code berikut:

Future<void> setPreference() async {
    final jembatan = await SharedPreferences
        .getInstance(); // untuk mengambil data dan memaasukkan data kedalam storage
   
    if (jembatan.containsKey('myData')) {
      jembatan.clear(); // setiap menjalankan function di clear dulu datanya
    }
   
    final myData = json.encode({
      'counter': counter.toString(),
      'isDark': isDark.toString(),
    });
    jembatan.setString('myData', myData);
    setState(() {});
  }
  //GetPreference
  Future<void> getPreference() async {
    final jembatan = await SharedPreferences.getInstance();
    if (jembatan.containsKey('myData')) {
      final myData =
          json.decode(jembatan.getString('myData')!) as Map<String, dynamic>;
      counter = int.parse(myData["counter"]);
      isDark = myData['isDark'] == "true" ? true : false;
    }
  }

Pada function setPreference, Future diibaratkan sebagai pendengar atau pendeteksi perubahan yang terjadi pada objek, Future merupakan representasai dari permintaan Asynchronous. Selain itu, ketika menggunakan Asynchronous kita perlu melakukan pengecekan terlebih dahulu ketika memanggil data dengan menggunakan If Else.

Untuk mengirim data ke storage, kita bisa juga bisa menggunakan code seperti berikut didalam function setPreference setelah mendeklarasikan code pengambilan data

jembatan.setInt('counter', counter); // mengirim data counter ke storage

Tapi, jika data yang akan dikirim lebih dari satu atau lebih, lebih di sarankan menggunakan json.encode kedalam suatu variable seperti kodingan diatas, yaitu :

//karena json berupa string maka data harus di set menjadi string 
final myData = json.encode({
      'counter': counter.toString(),
      'isDark': isDark.toString(),
    });
    jembatan.setString('myData', myData);
    //setelah itu panggil setPreference ketika setiap memanggil data
    // karena setiap function butuh setState, kita bisa menuliskannya satu kali saja
    // di dalam sharedPreferenced
    setState(() {});

Nah, pada GetPreference kita ubah jsonnya menjadi decode, karena ketika di simpan datanya berupa String, kita convert lagi data counter menjadi Integer dan isDark menjadi nilai boolean kembali.

Setelah menambahkan semua function diatas, kita bisa memanggilnya di dalam Widget Build

Panggil variabel counter di Widget Text, pada onPress Button minus tambahkan function minus, function add di Button Add dan changeTheme pada onPress FloatingActionButton,

Widget build(BuildContext context) {
   
       return Scaffold(
          appBar: AppBar(
            title: Text('Counter Apps'),
            actions: [
              IconButton(onPressed: refresh, icon: Icon(Icons.refresh))
            ],
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Angka saat ini adalah : $counter',
                  style: TextStyle(fontSize: 25),
                ),
                SizedBox(
                  height: 50,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    OutlinedButton(
                      onPressed: minus,
                      child: Icon(Icons.remove),
                    ),
                    OutlinedButton(
                      onPressed: add,
                      child: Icon(Icons.add),
                    ),
                  ],
                )
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: changeTheme,
            child: Icon(Icons.color_lens),
          ),
    
    );

Untuk menerapkan Shared Preference, pada Widget tambahkan Future Builder dan

FutureBuilder digunakan untuk menjalankan function getPreference dan Scaffold dibungkus dengan MaterialApp untuk mengubah theme

@override
  Widget build(BuildContext context) {
    print('build');
    return FutureBuilder(
      future: getPreference(),
      builder: (context,_)=> MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: isDark ? dark : bright,
        home:
    Scaffold(
      appBar: AppBar(
        title: Text('Counter Apps'),
        actions: [IconButton(onPressed: refresh, icon: Icon(Icons.refresh))],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Angka saat ini adalah : $counter',
              style: TextStyle(fontSize: 25),
            ),
            SizedBox(
              height: 50,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                OutlinedButton(
                  onPressed: minus,
                  child: Icon(Icons.remove),
                ),
                OutlinedButton(
                  onPressed: add,
                  child: Icon(Icons.add),
                ),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: changeTheme,
        child: Icon(Icons.color_lens),
      ),
              ),
            ));
  }
}

Ketika di Running, aplikasi akan tampil seperti berikut :

https://drive.google.com/file/d/1ZM1rLPCFMNHCklpfJv9V4k26YtzjC7Cm/view?usp=sharing

Sekian untuk tutorial pada kali ini, semoga bermanfaat yaa, Semangat Belajar ^^