Flutter

Penyimpanan data lokal pada Flutter (sqflite)

Sebelumnya kita telah membahas penyimpanan lokal dengan menggunakan shared_preferences. Kali ini kita bakal bahas tentang sqflite. Sqflite adalah penyimpanan data lokal yang...

Ikhwan Written by Ikhwan · 3 min read >

Sebelumnya kita telah membahas penyimpanan lokal dengan menggunakan shared_preferences. Kali ini kita bakal bahas tentang sqflite. Sqflite adalah penyimpanan data lokal yang mana bentuknya itu berupa table. Jika kita membutuhkan penyimpanan lokal berupa table, package ini merupakan opsi terbaik yang tersedia untuk saat ini.

Kita langsung aja ke code ya, Yuk Ngoding,

1. Tambahkan package

Pada pubspec.yaml tambahkan package dan jalankan flutter pub get

  sqflite: ^1.3.2+3

2. MySqflite.dart

Pada tulisan ini kita akan menyimpan data mahasiswa ke Sqflite. Kita akan membuat class mahasiswa dan class MySqflite untuk mengoperasikan penggunaan sqflite. Pertama kita akan buat class mahasiswa.

class MahasiswaModel {
  MahasiswaModel({
    this.nim,
    this.name,
    this.department,
    this.sks,
  });

  String nim;
  String name;
  String department;
  int sks;
}

Setelah itu kita lanjut ke MySqflite.dart.

import 'package:explore_data/useCase/sqflite/MahasiswaModel.dart';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';

class MySqflite {
  static final _databaseName = "MyDatabase.db";

  static final _databaseV1 = 1;
  static final tableMahasiswa = 'mahasiswa';

  static final columnNim = 'nim';
  static final columnName = 'name';
  static final columnDepartment = 'department';
  static final columnSKS = 'sks';

  // make this a singleton class
  MySqflite._privateConstructor();

  static final MySqflite instance = MySqflite._privateConstructor();

  static Database _database;

  Future<Database> get database async {
    if (_database != null) return _database;
    _database = await _initDatabase();
    return _database;
  }

  _initDatabase() async {
    var databasesPath = await getDatabasesPath();
    String path = join(databasesPath, _databaseName);

    return await openDatabase(path, version: _databaseV1,
        onCreate: (db, version) async {
      var batch = db.batch();
      _onCreateTableMahasiswa(batch);

      await batch.commit();
    });
  }

  void _onCreateTableMahasiswa(Batch batch) async {
    batch.execute('''
          CREATE TABLE $tableMahasiswa (
            $columnNim TEXT PRIMARY KEY,
            $columnName TEXT,
            $columnDepartment TEXT,
            $columnSKS INTEGER
          )
          ''');
  }

  ///TABLE MAHASISWA
  Future<int> insertMahasiswa(MahasiswaModel model) async {
    var row = {
      columnNim: model.nim,
      columnName: model.name,
      columnDepartment: model.department,
      columnSKS: model.sks
    };

    Database db = await instance.database;
    return await db.insert(tableMahasiswa, row);
  }

  Future<List<MahasiswaModel>> getMahasiswa() async {
    Database db = await instance.database;
    var allData = await db.rawQuery("SELECT * FROM $tableMahasiswa");

    List<MahasiswaModel> result = [];
    for (var data in allData) {
      result.add(MahasiswaModel(
          nim: data[columnNim],
          name: data[columnName],
          department: data[columnDepartment],
          sks: int.parse(data[columnSKS].toString())));
    }

    return result;
  }

  Future<MahasiswaModel> getMahasiswaByNIM(String nim) async {
    Database db = await instance.database;
    var allData = await db.rawQuery(
        "SELECT * FROM $tableMahasiswa WHERE $columnNim = $nim LIMIT 1");

    if (allData.isNotEmpty) {
      return MahasiswaModel(
          nim: allData[0][columnNim],
          name: allData[0][columnName],
          department: allData[0][columnDepartment],
          sks: int.parse(allData[0][columnSKS]));
    } else {
      return null;
    }
  }

  Future<int> updateMahasiswaDepartment(MahasiswaModel model) async {
    Database db = await instance.database;
    return await db.rawUpdate(
        'UPDATE $tableMahasiswa SET $columnDepartment = ${model.department} '
        'Where $columnNim = ${model.nim}');
  }

  Future<int> deleteMahasiswa(String nim) async {
    Database db = await instance.database;
    return await db
        .rawDelete('DELETE FROM $tableMahasiswa Where $columnNim = $nim');
  }

  clearAllData() async {
    Database db = await instance.database;
    await db.rawQuery("DELETE FROM $tableMahasiswa");
  }
}
  • Class merupakan singleton agar bisa diakses melalui instance
  • Kita membuat beberapa static variable, agar ketika pengoperasian sqflite kita bisa mengacu ke variable tersebut dan terhindar dari typo.
  • Pada method _initDatabase kita mendifinikasan path dari sqflite, beserta nama, versi, dan juga proses onCreate. Ketika mengalami kenaikan versi kita menambahkan onUpgrade pada method ini. (Terkait migrasi database kita bahas di tulisan selanjutnya ya.)
  • Method yang lainnya digunakan sesuai dengan nama method tersebut. Pengoperasiannya berkaitan dengan query yang secara umum banyak digunakan.

3. Activity

Pada bagian activity kita hanya akan mencoba untuk menyimpan data ke sqflite, dan menampilkannya. Gunakan code berikut ini:

import 'package:explore_data/useCase/sqflite/MahasiswaModel.dart';
import 'package:explore_data/useCase/sqflite/MySqlflite.dart';
import 'package:flutter/material.dart';

class SqfliteActivity extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SqfliteActivityState();
}

class SqfliteActivityState extends State<SqfliteActivity> {
  final keyFormMahasiswa = GlobalKey<FormState>();

  TextEditingController controllerNim = TextEditingController();
  TextEditingController controllerName = TextEditingController();
  TextEditingController controllerDepartment = TextEditingController();
  TextEditingController controllerSks = TextEditingController();

  String nim = "";
  String name = "";
  String department = "";
  int sks = 0;

  List<MahasiswaModel> mahasiswa = [];

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

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      mahasiswa = await MySqflite.instance.getMahasiswa();
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          margin: EdgeInsets.only(top: 36, left: 24, bottom: 4),
          child: Text("Input Mahasiswa",
              style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Form(
          key: keyFormMahasiswa,
          child: Container(
            margin: EdgeInsets.only(left: 24, right: 24),
            child: Column(
              children: [
                TextFormField(
                  controller: controllerNim,
                  decoration: InputDecoration(hintText: "NIM"),
                  validator: (value) => _onValidateText(value),
                  keyboardType: TextInputType.number,
                  onSaved: (value) => nim = value,
                ),
                TextFormField(
                  controller: controllerName,
                  decoration: InputDecoration(hintText: "Nama"),
                  validator: (value) => _onValidateText(value),
                  onSaved: (value) => name = value,
                ),
                TextFormField(
                  controller: controllerDepartment,
                  decoration: InputDecoration(hintText: "Jurusan"),
                  validator: (value) => _onValidateText(value),
                  onSaved: (value) => department = value,
                ),
                TextFormField(
                  controller: controllerSks,
                  decoration: InputDecoration(hintText: "SKS"),
                  validator: (value) => _onValidateText(value),
                  keyboardType: TextInputType.number,
                  onSaved: (value) => sks = int.parse(value),
                ),
              ],
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(left: 24, right: 24),
          child: RaisedButton(
            onPressed: () {
              _onSaveMahasiswa();
            },
            child: Text("Simpan"),
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: 24, left: 24, bottom: 4),
          child: Text("Data Mahasiswa",
              style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Expanded(
            child: ListView.builder(
                itemCount: mahasiswa.length,
                padding: EdgeInsets.fromLTRB(24, 0, 24, 8),
                itemBuilder: (BuildContext context, int index) {
                  var value = mahasiswa[index];
                  return Container(
                    margin: EdgeInsets.only(bottom: 12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text("Nim: ${value.nim}"),
                        Text("Name: ${value.name}"),
                        Text("Department: ${value.department}"),
                        Text("SKS: ${value.sks}"),
                      ],
                    ),
                  );
                }))
      ],
    ));
  }

  String _onValidateText(String value) {
    if (value.isEmpty) return 'Tidak boleh kosong';
    return null;
  }

  _onSaveMahasiswa() async {
    FocusScope.of(context).requestFocus(new FocusNode());

    if (keyFormMahasiswa.currentState.validate()) {
      keyFormMahasiswa.currentState.save();
      controllerNim.text = "";
      controllerName.text = "";
      controllerDepartment.text = "";
      controllerSks.text = "";

      await MySqflite.instance.insertMahasiswa(MahasiswaModel(
          nim: nim, name: name, department: department, sks: sks));

      mahasiswa = await MySqflite.instance.getMahasiswa();
      setState(() {});
    }
  }
}

4. Hasil

Setelah itu, panggil class SqfliteActivity di runApp. Maka hasilnya kurang lebih akan seperti berikut:

Hasil

Sekian tulisan kali ini, terimakasih dan semoga bermanfaat ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

Cara untuk Migrasi ke Flutter 2

Ikhwan in Flutter
  ·   2 min read

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *