Membuat CRUD dengan Local Storage di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar membuat aplikasi sederhana yang dapat menjalankan fungsi CRUD dengan local storage di flutter. Ayo ikuti tutorial selengkapnya di bawah ini.

Local Storage

Local storage merujuk pada mekanisme penyimpanan data di perangkat secara lokal. Dengan menggunakan local storage, Anda dapat menyimpan data seperti pengaturan pengguna, preferensi, atau bahkan cache data secara persisten di perangkat pengguna. 

Dengan menggunakan local storage anda tidak perlu mengakses internet untuk mengambil data dari database. Pada kesempatan kali ini, kita akan membuat aplikasi kontak sederhana yang memanfaatkan local storage. Di tutorial ini anda akan mempelajari CRUD, dan penyimpanan lokal dengan flutter

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Cara Membuat Aplikasi Kontak di Flutter

1. Buatlah sebuah project flutter baru dengan nama flutter_contact. Atau dengan nama yang anda inginkan.

2. Buka pubspec.yaml lalu tambahkan shared_preferences: ^2.0.17 kemudian save file untuk mendownload package contonya bisa kalian lihat seperti gambar di bawah ini.

Menambahkan Package

3. Buka lib/main.dart. Lalu isi dengan script di bawah ini.

  import 'dart:convert';

  import 'package:flutter/material.dart';
  import 'package:flutter_contact/add_data_page.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  
  import 'edit_data_page.dart';
  
  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: DataContact(),
      );
    }
  }
  
  class DataContact extends StatefulWidget {
    @override
    State<DataContact> createState() => _DataContactState();
  }
  
  class _DataContactState extends State<DataContact> {
  
    //variabel data untuk menampung data dari local storage
    List<Map<String, String>> data = [];
  
    @override
    void initState() {
      super.initState();
  
      //saat state berubah jalankan fungsi getData
      getData();
    }
  
    // fungsi untuk mengambil data dari SharedPreferences
    Future<void> getData() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
  
      //digunakan untuk mendapatkan nilai dari SharedPreferences dengan kunci 'data'
      List<String> dataList = prefs.getStringList('data') ?? [];
  
      //variabel untuk menampung data yang sudah diparse
      List<Map<String, String>> parsedData = [];
  
      //melakukan perulangan dari dataList
      for (String dataItem in dataList) {
  
        //jsonDecode berfungsi untuk mengkonversi data json menjadi dart objek
        //data yang sudah dikonversi akan disimpan ke dalam variabel decoodedData
        Map<String, dynamic> decodedData = jsonDecode(dataItem);
  
        Map<String, String> parsedItem = {};
  
        //melakukan perulangan pada decodedData
        decodedData.forEach((key, value) {
  
          parsedItem[key] = value.toString();
  
        });
  
        //data yang sudah diparse ditambahkan ke parsedData
        parsedData.add(parsedItem);
      }
  
      //perubahan state, perbarui data
      setState(() {
        data = parsedData;
      });
    }
  
    //metode untuk menghapus data
    Future<void> deleteData(int index) async {
      //adalah metode yang digunakan untuk mendapatkan instance (instansiasi) objek SharedPreferences dalam Flutter.
      SharedPreferences prefs = await SharedPreferences.getInstance();
      //digunakan untuk mendapatkan nilai dari SharedPreferences dengan kunci 'data'
      List<String> dataList = prefs.getStringList('data') ?? [];
  
      //menghilangkan data dari dataList berdasarkan index
      dataList.removeAt(index);
  
      //set ulang local storage dengan data yang diperbarui
      prefs.setStringList('data', dataList);
  
      //jalankan fungsi getData
      getData();
    }
  
    //membuka halaman EditPage
    void openEditPage(Map<String, String> data) {
      Navigator.push(
        context,
        //fungsi untuk berpindah halaman
        MaterialPageRoute(
          //data adalah parameter yang dikirimkan dan akan ditampilkan di halaman openeditpage
          builder: (context) => EditDataPage(data: data),
        ),
  
        //fungsi yang akan dijalankan setelah proses update dijalankan
      ).then((_) {
        getData();
      });
    }
  
    //fungsi untuk membuka halaman addpage
    void openAddPage() {
      Navigator.push(
        context,
        //fungsi untuk berpindah halaman
        MaterialPageRoute(
          builder: (context) => AddDataPage(),
        ),
  
        //fungsi yang akan dijalankan setelah proses update dijalankan
      ).then((_) {
        getData();
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Contact App'),
        ),
        //jika data kosong maka tampilkan tulisan belum ada data di tengah layar
        //jika data ada maka tampilkan datanya dengan listview builder
        body: data.isEmpty
            ? Center(
                child: Text('Belum ada data'),
              )
            : ListView.builder(
                // Menampilkan daftar kontak dalam bentuk ListView
                itemCount: data.length, //total panjang data
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: ListTile(
                      title: Text('Name: ${data[index]['name']}'), //menampilkan nama
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('Email: ${data[index]['email']}'), //menampilkan email
                          Text('Phone: ${data[index]['phoneNumber']}'), //menampilkan nomor telpon
                          Text('Address: ${data[index]['address']}'), //menampilkan alamat
                        ],
                      ),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          // Tombol edit untuk mengedit data
                          // saat ditekan akan menjalankan fungsi openEditPage dan membawa parameter
                          IconButton(
                            icon: Icon(Icons.edit), //icon edit
                            onPressed: () => openEditPage(data[index]),
                          ),
  
                          // Tombol hapus untuk menghapus data
                          // saat ditekan akan menjalankan fungsi deleteData dan membawa parameter
                          IconButton(
                            icon: Icon(Icons.delete), //icon delete
                            onPressed: () => deleteData(index),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => openAddPage(),
          child: Icon(Icons.add), // Ikona FAB
          backgroundColor: Colors.blue, // Warna latar belakang FAB
        ),
      );
    }
  }

4. Buat file baru di dalam folder lib/add_data_page.dart kemudian isi dengan script di bawah ini.

import 'dart:convert';

  import 'package:flutter/material.dart';
  import 'package:flutter_contact/main.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  
  class AddDataPage extends StatefulWidget {
    @override
    _AddDataPageState createState() => _AddDataPageState();
  }
  
  class _AddDataPageState extends State<AddDataPage> {
    //variabel yang akan kita gunakan untuk mengecek keadaan form
    //digunakan sebagai variabel validasi
    final formKey = GlobalKey<FormState>();
  
    //inisiasi field teks
    final TextEditingController nameController = TextEditingController();
    final TextEditingController emailController = TextEditingController();
    final TextEditingController addressController = TextEditingController();
    final TextEditingController phoneNumberController = TextEditingController();
  
    //fungsi untuk menyimpan form
    void saveForm() {
      
      //jika statenya sah atau valid maka jalankan penyimpanan data
      if (formKey.currentState!.validate()) {
        String name = nameController.text;
        String email = emailController.text;
        String address = addressController.text;
        String phoneNumber = phoneNumberController.text;
  
        //metode untuk menyimpan data
        saveData(name, email, address, phoneNumber);
      }
    }
  
    //metode untuk menyimpan data
    Future<void> saveData(String name, String email, String address, String phoneNumber) async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
  
      //mengambil data dari localstorage dengan kunci key
      List<String> dataList = prefs.getStringList('data') ?? [];
  
      //membuat variabel objek dengan data yang diisi melalui form
      Map<String, String> newData = {
        'name': name,
        'email': email,
        'address': address,
        'phoneNumber': phoneNumber
      };
  
      dataList.add(jsonEncode(newData)); // Menambahkan data baru ke dalam daftar
  
      prefs.setStringList('data', dataList); // Menyimpan daftar data ke local storage
  
      Navigator.pop(context);
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Add Contact Profile'),
        ),
        //singlechildscrollview adalah widget yang digunakan agar component di dalamnya dapat discroll
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Form(
              key: formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  TextFormField(
                    controller: nameController,
                    decoration: InputDecoration(labelText: 'Name'),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Please enter your name';
                      }
                      return null;
                    },
                  ),
                  TextFormField(
                    controller: emailController,
                    decoration: InputDecoration(labelText: 'Email'),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Please enter your email';
                      }
                      return null;
                    },
                  ),
                  TextFormField(
                    controller: phoneNumberController,
                    decoration: InputDecoration(labelText: 'Phone Number'),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Please enter your Phone Number';
                      }
                      return null;
                    },
                  ),
                  TextFormField(
                    controller: addressController,
                    maxLines: 5,
                    decoration: InputDecoration(labelText: 'Address'),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Please enter your address';
                      }
                      return null;
                    },
                  ),
                  SizedBox(height: 16,),
                  ElevatedButton(
                    //saat tombol diklik jalankan fungsi saveForm
                    onPressed: saveForm,
                    child: Text('Save'),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    }
  }

5. Buat file baru di dalam folder lib/edit_data_page.dart kemudian isi dengan script di bawah ini.

import 'dart:convert';

  import 'package:flutter/material.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  
  class EditDataPage extends StatefulWidget {
    final Map<String, String> data;
    // Variabel data sebagai parameter untuk EditDataPage
  
    EditDataPage({required this.data});
    // Konstruktor EditDataPage dengan parameter data yang harus diberikan
  
    @override
    _EditDataPageState createState() => _EditDataPageState();
    // Membuat state EditDataPage
  }
  
  class _EditDataPageState extends State<EditDataPage> {
    TextEditingController nameController = TextEditingController();
    TextEditingController emailController = TextEditingController();
    TextEditingController phoneNumberController = TextEditingController();
    TextEditingController addressController = TextEditingController();
    // Membuat objek TextEditingController untuk mengendalikan input teks pada TextField
  
    @override
    void initState() {
      super.initState();
      initializeControllers();
      // Memanggil fungsi initializeControllers saat initState dipanggil
    }
  
    void initializeControllers() {
      nameController.text = widget.data['name'] ?? '';
      emailController.text = widget.data['email'] ?? '';
      phoneNumberController.text = widget.data['phoneNumber'] ?? '';
      addressController.text = widget.data['address'] ?? '';
      // Menetapkan nilai awal pada TextEditingController berdasarkan data yang diberikan
    }
  
    Future<void> saveData() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      // Mendapatkan instance SharedPreferences
  
      List<String> dataList = prefs.getStringList('data') ?? [];
      // Mendapatkan daftar data dari SharedPreferences, jika tidak ada maka menggunakan list kosong
  
      Map<String, String> newData = {
        'name': nameController.text,
        'email': emailController.text,
        'phoneNumber': phoneNumberController.text,
        'address': addressController.text,
      };
      // Membuat map newData berisi data yang diperbarui dari TextEditingController
  
      int dataIndex = dataList.indexOf(jsonEncode(widget.data));
      // Mencari indeks data yang akan diperbarui dalam daftar menggunakan fungsi jsonEncode
  
      if (dataIndex != -1) {
        dataList[dataIndex] = jsonEncode(newData);
        // Jika data ditemukan, perbarui data tersebut dengan newData
      }
  
      prefs.setStringList('data', dataList);
      // Menyimpan daftar data yang diperbarui ke SharedPreferences
  
      Navigator.pop(context);
      // Kembali ke halaman sebelumnya setelah data disimpan
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Edit Contact Profile'),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextFormField(
                  controller: nameController,
                  decoration: InputDecoration(labelText: 'Name'),
                ),
                TextFormField(
                  controller: emailController,
                  decoration: InputDecoration(labelText: 'email'),
                ),
                TextFormField(
                  controller: phoneNumberController,
                  decoration: InputDecoration(labelText: 'phoneNumber'),
                ),
                TextFormField(
                  controller: addressController,
                  maxLines: 5,
                  decoration: InputDecoration(labelText: 'Address'),
                ),
                ElevatedButton(
                  onPressed: saveData,
                  child: Text('Save'),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }

6. Semua step sudah kita keerjakan, saatnya melakukan uji coba. Untuk penjelasan saya sertakan di dalam script di atas. Jika masih kurang jelas, silahkan tanya langsung di kolom komentar di bawah ini. Silahkan jalankan project dengan emulator, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Halaman belum ada data, halaman tambah data, halaman sudah ada data

Sekian tutorial kita kali ini tentang cara membuat CRUD dengan local storage di flutter. Semoga tutorial singkat ini membantu. Sekian dan terima gaji.