7. Penyimpanan Shared Preferences

Seringkali kita perlu menyimpan beberapa data bersama dengan sebuah aplikasi. SharedPreferences memberikan sebuah opsi penyimpanan yang mungkin cocok dengan data yang kita ingin simpan. Tutorial kali ini akan membahas bagaimana mengakses dan menyimpan data menggunakan SharedPreferences.

Perlu dicatat bahwa SharedPreferences hanya bisa menyimpan bentuk data sederhana seperti String, Double, Integer, Boolean, atau Long. Jika data yang ingin disimpan lebih kompleks, gunakan sistem database lain seperti SQL.

Install Package

Install terlebih dahulu shared preferences

terminal

pub add shared_preferences

Setelah menginstall package yang kita ingin gunakan selanjutnya kita akan memulai menerapkan shared_preferences.

Menerapkan Package Pada Introduction

Kita akan membuat aksi untuk skip & done. Jadi halaman introduction ini akan muncul ketika aplikasi baru pertama kali diinstall saja. Caranya adalah seperti berikut :

1. Ubahlah class Introduction yang sebelumnya stateless menjadi state full dengan menekan lampu kuning pada class Introduction
2. Buatlah proses untuk menjalankan SharedPreferences nya

introduction.dart

class _IntroductionState extends State<Introduction> {
    SaveAction() async {
        final SharedPreferences prefs = await SharedPreferences.getInstance();
        prefs.setBool('isIntro', true);
        Navigator.pushNamedAndRemoveUntil(context, '/login', (route) => false);
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(

1. Jalankan prosesnya pada aksi onskip & ondone
   introduction.dart

    showSkipButton: true,
    skip: const Text("Skip", style: TextStyle(color: Colors.white)),
    next: const Text("Next", style: TextStyle(color: Colors.white)),
    done: const Text("Done",
        style:
            TextStyle(fontWeight: FontWeight.w700, color: Colors.white)),
    onDone: () => SaveAction(),
    onSkip: () => SaveAction(),
    dotsDecorator: DotsDecorator(
    size: const Size.square(10.0),
    activeSize: const Size(50.0, 10.0),
    activeColor: const Color.fromARGB(255, 224, 214, 214),
    color: Colors.white,
    spacing: const EdgeInsets.symmetric(horizontal: 3.0),
    activeShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25.0)),
    ),
   

Pada main.dart kita akan setting ketika mempunyai data isIntro yang bernilai true maka akan langsung dilarikan ke login & jika belum ada data isIntro maka akan dilarikan ke introduction. Caranya adalah seperti berikut:

1. Ubah class MyApp yang sebelumnya stateless menjadi state full dengan menekan lampu kuning pada class MyApp
2. Lalu kita akan membuat proses untuk pengecekan datanya yang sudah disimpan pada SharedPreferences

main.dart

class _MyAppState extends State<MyApp> {
bool? intro;

cekData() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
    if (prefs.getBool('isIntro') != null) {
        intro = prefs.getBool('isIntro');
    }
    });
}

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

@override
Widget build(BuildContext context) {
    return FutureBuilder(
        .....

3. Lalu pada root kita akan membuat kondisinya

main.dart

return MaterialApp(
  title: 'Flutter Demo',
  debugShowCheckedModeBanner: false,
  initialRoute: intro == null || intro == false
      ? "/intro"
      : "/login",
  routes: {
    '/': (context) => Home(),
    '/splash': (context) => SplashScreen(),
    '/intro': (context) => Introduction(),
    '/login': (context) => Login(),
    '/register': (context) => Register(),
  },
);

Keterangan

• Buat variabel untuk mengecek data yang nantinya kita panggil, dan kita berikan ? agar bisa diisi dengan null terlebih dahulu
• getInstance : untuk mengambil data yang disimpan pada SharedPreferences
• Lalu data tersebut kita cek jika data intro belum tersimpan maka variabel intro masih null dan jika sudah tersimpan maka variabel intro akan berisikan true
• initState : proses yang akan dijalankan sebelum tampilan di render / di tampilkan

Latihan Shared Preferences

1. Pada proses login buatlah variabel shared preferences untuk menyimpan data response login (buat variabel tersebut dengan nama isLogin)
2. Pada route buat aksi dimana ketika ada data isLogin akan diarahkan langsung ke home dan tidak perlu lagi ke login