flutter

Menyimpan dengan SharedPreferences dalam Flutter

1. Tambah Dependency

Buka file pubspec.yaml lalu cari bagian dependencies masukan kode:

shared_preferences: ^2.5.3
Lalu di terminal jalankan perintah flutter pub get
Keterangan:
  • flutter pub get adalah perintah untuk mendownload dependency lalu menginstallnya

2. File helper

Masukan kode berikut ini ke dalam file helper.dart:

import ‘package:shared_preferences/shared_preferences.dart’;
Future<bool> statusLogin() async {
  final prefs = await SharedPreferences.getInstance();
  bool? hasil = prefs.getBool(‘sudahPernahMasuk’);
  if (hasil == null) {
    return false;
  } else {
    return hasil;
  }
}
Future<void> simpanLogin() async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setBool(‘sudahPernahMasuk’, true);
}
Future<void> hapusLogin() async {
  final prefs = await SharedPreferences.getInstance();
  prefs.setBool(‘sudahPernahMasuk’, false);
}

Keterangan:

  • Future<TipeData> dan async menandakan bahwa fungsi ini adalah asynkronous
  • await digunakan agar program menunggu sampai mendapatkan hasil
  • Future<bool> -> bool adalah tipe data boolean yang harus direturn oleh fungsi ini
  • Future<void> -> void berarti fungsi ini tidak mereturn value
  • package:shared_preferences harus diimport
  • SharedPreferences.getInstance() : kode ini digunakan untuk membuat objek dari SharedPreferences
  • prefs.getBool(‘sudahPernahMasuk’): kode ini digunakan untuk mengambil nilai sudahPernahMasuk bertipe boolean
  • prefs.setBool(‘sudahPernahMasuk’, true): kode ini digunakan untuk memberi nilai true ke sudahPernahMasuk

3. Perubahan File login.dart

Bentuk file login adalah seperti terlihat dalam artikel ini.

Import file helper:

import ‘package:teks/helper.dart’;

Lalu cari kode berikut ini:

else if (username == ‘admin’ && password == ‘Testing’) {

Lalu masukan kode

 simpanLogin();

 

4. Perubahan File dashboard.dart

Bentuk file dashboard adalah seperti terlihat dalam artikel ini.

import dua file ini:

import ‘package:teks/login.dart’;
import ‘package:teks/helper.dart’;

Pada widget AppBar masukan kode berikut ini:

actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.exit_to_app),
            tooltip: ‘Comment Icon’,
            onPressed: () {
              hapusLogin();
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(builder: (context) => Login()),
              );
            },
          ),

Keterangan:

  • Navigator.pushReplacement digunakan untuk mengganti halaman dan membuat rute sebelumnya.

 

5. Perubahan file main.dart

Ganti semua kode file main.dart dengan kode berikut ini:

import ‘package:flutter/material.dart’;
import ‘package:teks/login.dart’;
import ‘package:teks/dashboard.dart’;
import ‘package:teks/helper.dart’;
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final bool sudahPernahMasuk = await statusLogin();
  runApp(
    MaterialApp(home: sudahPernahMasuk ? const Dashboard() : const Login()),
  );
}

Keterangan:

  • WidgetsFlutterBinding.ensureInitialized digunakan untuk memastikan binding sudah diinisialisasi sebelum runApp() dijalankan
  • sudahPernahMasuk ? const Dashboard() : const Login(), kode ini berarti jika nilai sudahPernahMasuk adalah true  maka tampilkan halaman Dashboard dan jika nilai sudahPernahMasuk adalah false maka tampilkan halaman Login

 

6. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5