Tutorial Membuat CRUD Flutter dengan Mudah

Last Updated on September 27, 2021 by

CRUD Flutter adalah salah satu proyek kecil-kecilan yang belakangan ini populer di kalangan web developer pemula. Sebelumnya, Anda pasti sudah sering mendengar istilah Aplikasi CRUD (Create, Read, Update, Delete) adalah aplikasi simpel yang digunakan dalam aplikasi sederhana maupun aplikasi kompleks.

Pada artikel ini, Web App akan mengajak Anda belajar membuat Flutter CRUD SQLite yang belakangan ini menjadi kombo sempurna dalam membangun aplikasi sederhana. Jika Anda tertarik dengan pembahasan Tutorial CRUD Flutter SQLite kali ini, pastikan Anda menyimak artikelnya sampai akhir!

Pengertian CRUD (Create, Read, Update, Delete)

Anda mungkin sudah sering mendengar istilah CRUD. Namun pembahasan kali ini hanya untuk mengingatkan Anda kembali tentang CRUD. Saat kita membangun API, hal yang terpenting dari API adalah kemampuannya dalam menyediakan empat tipe fungsi dasar.

Model harus dapat membuat, membaca, memperbarui, dan menghapus sumber daya. Ilmuwan dan ahli komputer sering menyebut fungsi-fungsi ini dengan akronim CRUD. Sebuah model harus memiliki kemampuan untuk melakukan paling banyak empat fungsi ini agar menjadi lengkap. Jika suatu tindakan tidak dapat dijelaskan oleh salah satu dari empat operasi ini, maka tindakan tersebut berpotensi menjadi modelnya sendiri.

Paradigma CRUD umum dalam membangun aplikasi web, karena menyediakan kerangka kerja yang mudah diingat untuk mengingatkan developer tentang bagaimana membangun model yang lengkap dan dapat digunakan.

Referensi pertama untuk operasi CRUD datang dari Haim Kilov pada tahun 1990 dalam sebuah artikel berjudul, “Dari semantik ke pemodelan data berorientasi objek.” Namun, istilah ini pertama kali dipopulerkan oleh buku James Martin tahun 1983, Managing the Data-base Environment. Berikut rinciannya:

• CREATE: prosedur yang digunakan untuk melakukan pernyataan INSERT untuk membuat record baru.
• READ: prosedur yang digunakan untuk membaca catatan tabel berdasarkan keynoted utama dalam parameter input.
• UPDATE: prosedur yang dipakai untuk engeksekusi pernyataan UPDATE pada tabel berdasarkan kunci utama yang ditentukan untuk catatan dalam klausa WHERE dari pernyataan tersebut.
• DELETE: prosedur yang dipakai untuk menghapus baris tertentu dalam klausa WHERE.

Flutter : Sekilas tentang Flutter

Flutter adalah framework yang belakangan ini banyak digunakan oleh para developer di seluruh dunia untuk mengembangkan aplikasi mobile dengan Android dan iOS. Google merilis Flutter pada bulan Mei 2017.  Flutter adalah framework open-source yang mudah untuk digunakan dan ramah untuk pemula.

Flutter terdiri dari dua bagian penting di dalamnya:

• SDK (Software Development Kit)

Kumpulan alat yang akan membantu Anda mengembangkan aplikasi. Ini termasuk alat untuk mengompilasi kode Anda ke dalam kode mesin asli (kode untuk iOS dan Android).

• Framework (Library UI berdasarkan widget)

Kumpulan elemen UI yang dapat digunakan kembali (tombol, input teks, bilah geser, dan sebagainya) yang dapat Anda sesuaikan untuk kebutuhan Anda sendiri.

Pengembangan aplikasi dalam Flutter, Anda harus menggunakan bahasa pemrograman Dart. Bahasa ini diciptakan oleh Google pada Oktober 2011. Terbilang masih baru, namun bahasa ini mengalami peningkatan pengguna secara pesat selama beberapa tahun terakhir. Ingin tahu lebih banyak tentang pengembangan aplikasi Flutter? Cek di sini!

Apa itu SQLite? : Pengertian SQLite

SQLite adalah paket perangkat lunak domain publik yang menyediakan sistem manajemen Database relasional, atau RDBMS. Database relasional digunakan untuk menyimpan catatan yang ditentukan pengguna dalam tabel besar. Selain penyimpanan dan manajemen data, mesin database dapat memproses perintah kueri kompleks yang menggabungkan data dari beberapa tabel untuk menghasilkan laporan dan ringkasan data.

Produk RDBMS populer lainnya termasuk Oracle Database, IBM DB2, dan Microsoft SQL Server di sisi komersial, dengan MySQL dan PostgreSQL menjadi produk open source yang populer.

“Lite” di SQLite tidak mengacu pada kemampuannya. Sebaliknya, SQLite ringan dalam hal kerumitan pengaturan, overhead administratif, dan penggunaan sumber daya. SQLite didefinisikan oleh fitur-fitur berikut:

• Serverless – SQLite tidak memerlukan proses atau sistem server terpisah untuk beroperasi. Pustaka SQLite mengakses file penyimpanannya secara langsung.
• Zero Configuration – Artinya, tidak pengaturan di dalam SQLite, karena tidak adanya server sehingga penggunaanya menjadi lebih mudah.
• Lintas Platform – Seluruh instance database berada dalam satu file lintas platform, tidak memerlukan administrasi.

Di atas adalah sebagian kecil dari fitur yang ada di SQLite. Masih ada banyak fitur lain yang berguna Anda. Ingin tahu lebih jauh tentang SQLite dan apa bedanya dengan MySQL? Kenalan lebih jauh dengan SQLite di sini sekarang!

Tutorial Membuat CRUD Flutter SQLite

Selanjutnya Web App akan membahas cara membuat Flutter CRUD SQLite dengan mudah. Untuk membuat CRUD Flutter SQLite sangat mudah, Anda hanya perlu mengikuti langkah-langkah berikut ini.

1. Membuat Project Baru di Flutter

Hal pertama yang harus Anda lakukan untuk membuat CRUD Flutter adalah Anda harus membuat project baru Anda sendiri di Flutter jika Anda belum memiliki project apapun yang membutuhkan CRUD. Berikut ini, WebApp akan memberikan contoh Aplikasi “Daftar Kegiatan” dalam Flutter.

a. Pertama-tama, pilih salah satu IDE yang kamu sukai. Pada contoh ini kami menggunakan Android Studio. Anda bisa gunakan IDE lainnya, lihat beberapa IDE terbaik lainnya di

b. Buatlah perintah seperti di bawah ini:

flutter create daftarkegiatan
flutter create --org com.webapp daftarkegiatan

Perintah ini akan membuat aplikasi Flutter dasar bisa terinstal di perangkat Anda dengan baik.
c. Buka Android Studio untuk jalankan aplikasinya.
d. Modifikasi file main.dart yang ada di direktori lab. Ganti kode dengan snippet di bawah ini lalu jalankan aplikasi.

import 'package:flutter/material.dart';
    

    void main() => runApp(App());
    

    // setiap komponen di Flutter adalah widget
    // bahkan keseluruhan aplikasi adalah widget
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Daftar Kegiatan',
          home: Scaffold(appBar: AppBar(title: const Text('To-Do List'))),
        );
      }
    }

e. Setelah menjalankan kode tersebut Anda akan melihat sebuah laman kosong dengan judul bar “Daftar Kegiatan”

f. Update code Anda agar sesuai seperti di bawah ini

import 'package:flutter/material.dart';
    

    void main() => runApp(App());
    

    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(title: 'Daftar Kegiatan', home: DaftarKegiatan());
      }
    }
    

    class DaftarKegiatan extends StatefulWidget {
      @override
      _DaftarKegiatanState createState() => _DaftarKegiatanState();
    }
    

    class _DaftarKegiatanState extends State<DaftarKegiatan> {
    

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: const Text('Daftar Kegiatan')));
      }
    }

g. Sekarang kita akan implementasikan fungsionalitas Daftar Kegiatan di dalam kelas State. Lihat kode di bawah ini:

class _DaftarKegiatanState extends State<DaftarKegiatan> {
     final List<String> _todoList = <String>[];
      final TextEditingController _textFieldController = TextEditingController();
    

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: const Text('Daftar Kegiatan')),
          body: ListView(children: _getItems()),
          floatingActionButton: FloatingActionButton(
              onPressed: () => _displayDialog(context),
              tooltip: 'Tambahkan',
              child: Icon(Icons.add)),
        );
      }
    

      void _addTodoItem(String title) {
        // Menutupnya di dalam state yang ditetapkan akan memberi notifikasi
        // aplikasi yang state nya telah berubah
        setState(() {
          _daftarkegiatan.add(judul);
        });
        _textFieldController.clear();
      }
    

      // Menghasilkan list dari widget item
      Widget _builddaftarItem(String judul) {
        return ListTile(title: Text(judul));
      }
    

      // Hasilkan item widget tunggal
      Future<AlertDialog> _displayDialog(BuildContext context) async {
        return showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: const Text('Tambahkan kegiatan dalam daftar'),
                content: TextField(
                  controller: _textFieldController,
                  decoration: const InputDecoration(hintText: 'Tambah kegiatan di sini'),
                ),
                actions: <Widget>[
                  FlatButton(
                    child: const Text('TAMBAH'),
                    onPressed: () {
                      Navigator.of(context).pop();
                      _addTodoItem(_textFieldController.text);
                    },
                  ),
                  FlatButton(
                    child: const Text('BATAL'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  )
                ],
              );
            });
      }
    

List<Widget> _getItems() {
        final List<Widget> _todoWidgets = <Widget>[];
        for (String title in _todoList) {
          _todoWidgets.add(_buildTodoItem(title));
        }
        return _todoWidgets;
      }
    }

1. Menambahkan Database SQLite

Setelah Anda  membuat aplikasinya, sekarang saatnya Anda menambahkan Database ke dalam aplikasi Anda untuk menyimpan data di Cloud. Anda bisa menggunakan database seperti Firebase atau SQLite. Namun pada artikel kali ini, kamu akan menggunakan SQLite.

Berikut adalah langkah-langkahnya melengkapi aplikasi CRUD Flutter Anda.

1. Menambahkan dependensi pada proyek Anda. Caranya dengan menambahkan paket sqflite dan path_provider di file pubspec.yaml proyek Anda. Berikut ini yang harus Anda siapkan.

• sqlite: SQLite package untuk mengintegrasikan fungsi database SQLite.
• path_provider: package yang berguna untuk menentukan jalur database.

2. Berikut ini adalah contoh kode untuk menambahkan dependensi

dependencies:
      flutter:
        sdk: flutter
      sqflite: ^1.3.0 
      path_provider: ^1.6.7 

3. Membuat mode data. Untuk melakukannya, kita harus membuat struktur data yang ingin kita manipulasi di dalam database. Kita pun harus membuat kelas dengan properti yang diperlukan dan metode untuk memetakan data sebelum dimasukkan ke dalam database. Ini dia contohnya:

class MemoModel{
      final int id;
      final String judul;
      final String konten;
    

      MemoModel({this.id,this.judul,this.konten});
    

      Map<String,dynamic> toMap(){ // digunakan saat menambahkan data ke database
        return <String,dynamic>{
          "id" : id,
          "judul" : judul,
          "konten" : konten,
        };
      }
    }

4. Menambahkan Import

Tambahkan import yang dibutuhkan dari database helper file.

import 'package:sqflite/sqflite.dart'; //sqflite package
    import 'package:path_provider/path_provider.dart'; //path_provider package
    import 'package:path/path.dart'; //digunakan untuk paths
    import './memo_model.dart'; //import model class
    import 'dart:io';
    import 'dart:async';

5. Inisialiasaikan Database CRUD Flutter Anda

Deklarasikan fungsi yang digunakan di atas untuk import dan membuka koneksi database. Lihat di bawah ini:

class MemoDbProvider{
        
    Future<Database> init() async {
        Directory directory = await getApplicationDocumentsDirectory(); //mengembalikan direktori yang menyimpan file permanen
        final path = join(directory.path,"memos.db"); //membuat jalur ke database
    

          return await openDatabase( //membuka database atau membuat database jika belum ada
            path,
            version: 1,
            onCreate: (Database db,int version) async{
              await db.execute("""
              CREATE TABLE Memos(
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              title TEXT,
              content TEXT)"""
          );
        });
      }
        
    }

6. Menggunakan Insert

Membuat sebuah fungsi untuk mendapatkan model data CRUD Flutter, mengkonversikannya ke map dan menambahkan data ke database menggunakan insert() helper method.

Future<int> addItem(MemoModel item) async{ //mengembalikan angka atau intem yang ditambahkan sebagai integer 
        
        final db = await init(); //buka database
        
        return db.insert("Memos", item.toMap(), //fungsi toMap() dari MemoModel
        conflictAlgorithm: ConflictAlgorithm.ignore, //abaikan konflik pada duplicate entries
        );
     }

7. Tambahkan Read

Menggunakan sqflite kita dapat melakukan query data dalam banyak cara dengan menggunakan argumen seperti where, groupBy, have, orderBy dan kolom di dalam query() helper.

Future<List<MemoModel>> fetchMemos() async{ //mengembalikan memos sebagai list (array)
        
        final db = await init();
        final maps = await db.query("Memos"); //query semua baris du dalam tabel sebagai array dari maps
    

        return List.generate(maps.length, (i) { //membuat list dari memos
          return MemoModel(              
            id: maps[i]['id'],
            title: maps[i]['title'],
            content: maps[i]['content'],
          );
      });
      }

8. Tambahkan delete

Gunakan argumen where di helper delete() untuk menghapus baris tertentu dari tabel.

Ingatlah untuk menggunakan whereArgs untuk meneruskan argumen ke pernyataan where untuk mencegah serangan injeksi SQL.

Future<int> deleteMemo(int id) async{ //mengembalikan angka dari item yang dihapus
        final db = await init();
      
        int result = await db.delete(
          "Memos", //tabel nama
          where: "id = ?",
          whereArgs: [id] // menggunakan whereArfs untuk menghindari injeksi SQL
        );
    

        return result;
      }

9. Tambahkan Update

Gunakan update() helper untuk memperbarui catatan apa pun dalam database. Untuk memperbarui catatan tertentu, gunakan argumen where.

Future<int> updateMemo(int id, MemoModel item) async{ // mengembalikan angka dari baris yang diupdate 
      
        final db = await init();
      
        int result = await db.update(
          "Memos", 
          item.toMap(),
          where: "id = ?",
          whereArgs: [id]
          );
          return result;
     }

10. Hasil Akhir

Integrasikan metode di atas dalam proyek Anda sesuai keinginan dan buat proyek Anda berfungsi penuh dengan database SQLite dan operasi CRUD Flutter. Jika Anda masih merasa kesulitan dalam prosesnya, uji metode di atas dengan cuplikan kode berikut.

import 'package:flutter/widgets.dart';
    import './dbprovider.dart';
    import './memo_model.dart';
    

    void main() async{
      WidgetsFlutterBinding.ensureInitialized();
      MemoDbProvider memoDb = MemoDbProvider();
    

      final memo = MemoModel(
        id: 1,
        title: 'Title 1',
        content: 'Note 1',
      );
    

      await memoDb.addItem(memo);
      var memos = await memoDb.fetchMemos();
      print(memos[0].title); //Title 1
    

      final newmemo = MemoModel(
        id: memo.id,
        title: 'Title 1 changed',
        content: memo.content,
      );
    

      await memoDb.updateMemo(memo.id, newmemo);
      var updatedmemos = await memoDb.fetchMemos();
      print(updatedmemos[0].title); //Title 1 changed
    

      await memoDb.deleteMemo(memo.id);
      print(await memoDb.fetchMemos()); //[]
    

    }

Itulah cara membuat CRUD Flutter SQLite dengan mudah. Jika Anda tertarik dengan informasi-informasi serupa, jangan lupa untuk allow notification di https://appkey.id atau bisa juga download aplikasi kami di Google Play Store agar Anda tidak ketinggalan informasi terbaru.