Menggunakan SQLite

by

Sampai modul sebelumnya, data yang telah dibuat hanya disimpan dalam memory. Ketika aplikasi dimatikan, data akan hilang. Untuk menyimpan data ke smartphone, akan digunakan SQLite.

SQLite adalah SQL database yang didevelop menggunakan Bahasa C. SQLite kecil, cepat dan realibel, hingga cocok digunakan untuk smartphone.

Instalasi SQLite

Untuk mengakses SQLite melalui flutter, digunakan plugin sqflite, dokumentasi lengkap lihat di https://pub.dev/packages/sqflite

Untuk instalasi, tambahkan dependencies pada pubsec.yaml. SIlakan cek pub.dev untuk instalasi versi terbaru.

sqflite: ^1.3.2+2

Menggunakan SQLite

Tutorial tidak akan membahas perintah SQL dan RDBMS, diharapkan Anda sudah memahaminya.

Untuk menggunakan SQLite, kita buat file baru helpers/db_helper.dart, kemudian import package yang digunakan.

Buat class baru untuk membuat database, table serta data manipulasi.

  • Static function db() untuk membuat databse.
  • Static function insert() untuk menyimpan data ke table my_coolspot.
  • Static function select() untuk mengambil data dari table my_coolspot.
import 'package:sqflite/sqflite.dart' as sql;
import 'package:path/path.dart' as path;

class DBHelper {
  static Future<sql.Database> db() async {
    final dbPath = await sql.getDatabasesPath();
    return sql.openDatabase(path.join(dbPath, 'coolSpot.db'),
        onCreate: (db, version) {
      return db.execute(
          'CREATE TABLE my_coolSpot(id TEXT PRIMARY KEY, title TEXT, img TEXT)');
    }, version: 1);
  }

  static Future<void> insert(String table, Map<String, Object> data) async {
    final db = await DBHelper.db();
    db.insert(table, data, conflictAlgorithm: sql.ConflictAlgorithm.replace);
  }

  static Future<List<Map<String, dynamic>>> select(String table) async {
    final db = await DBHelper.db();
    return db.query(table);
  }
}

Gunakan fungsi diatas pada file providers/cool_spot.dart. Lihat fungsi addSpot dan fetchData.

import 'dart:io';
import 'package:flutter/foundation.dart';

import '../models/spot.dart';
import '../helpers/db_helper.dart';

class CoolSpot with ChangeNotifier {
  List<Spot> _items = [];

  List<Spot> get items {
    return [..._items];
  }

  void addSpot(String pickedTitle, File pickedImg) {
    final newSpot = Spot(
        id: DateTime.now().toString(),
        img: pickedImg,
        title: pickedTitle,
        loc: null);

    _items.add(newSpot);
    notifyListeners();
    DBHelper.insert('my_coolspot',
        {'id': newSpot.id, 'title': newSpot.title, 'img': newSpot.img.path});
  }

  Future<void> fetchData() async {
    final dataList = await DBHelper.select('my_coolspot');
    _items = dataList
        .map((item) => Spot(
            id: item['id'],
            title: item['title'],
            img: File(item['img']),
            loc: null))
        .toList();
    notifyListeners();
  }
}

Gunakan fungsi fetchData() pada screens/spot_list_scr.dart. Perhatikan bagian body: FutureBuilder().

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import './add_spot_scr.dart';
import '../providers/cool_spot.dart';

class SpotListScr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Cool Spot'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(AddSpotScr.routeNm);
            },
          ),
        ],
      ),
      body: FutureBuilder(
        future: Provider.of<CoolSpot>(context, listen: false).fetchData(),
        builder: (ctx, snapshot) => snapshot.connectionState ==
                ConnectionState.waiting
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Consumer<CoolSpot>(
                child: Center(
                  child: Text('Belum ada cool spot nih..'),
                ),
                builder: (ctx, coolSpot, ch) => coolSpot.items.length <= 0
                    ? ch
                    : ListView.builder(
                        itemCount: coolSpot.items.length,
                        itemBuilder: (ctx, i) => ListTile(
                          leading: CircleAvatar(
                            backgroundImage: FileImage(coolSpot.items[i].img),
                          ),
                          title: Text(coolSpot.items[i].title),
                          onTap: () {}, //ke detail page
                        ),
                      ),
              ),
      ),
    );
  }
}

Sekarang data sudah disimpan dalam database SQLite.

Sharing is caring:

Leave a Comment