Flutter: review package (sqflite)

สำหรับ database เราจะมาทดลองใช้งาน sqflite กันนะคับ จิงๆแล้วมันก็คือ SQLite นี่แหละคับ เพียงแต่มีคนทำ library ใหม่เป็น sqflite ใช้ยังไงเด๋วเรามาดูกัน (ใช้งาน cross-platform ได้ด้วย)

https://www.sqlite.org/lang.html มาดู Syntax ทั้งหมดได้จากนี่นะคับ

จัดว่าเป็น Flutter Favorite เชื่อถือได้

คือจริงๆแล้ว sqflite เป็นฐานข้อมูลแบบฝังตัว (embeded database) หรือ relational database พวก SQL คับ ในการทำ app mobile ถ้าเราเก็บข้อมุลไว้ในเครื่องข้อมูลก็จะไม่หายไปไหน เหมือนกับพวก shared_preferences นะคับ แต่วิธีนี้จะเก็บข้อมูลได้ค่อนข้างเยอะ และเรียกใช้งานด้วยคำสั่ง SQL (SELECT, UPDATE, CREATE, DELETE).

แสดงไฟล์ db ที่จะมีอยุ่ในเครื่องของเรา เมื่อมีการ create db โดย .db เราสามารถเปิดดูได้ด้วยโปรแกรม sqlite GUI นะ (เพราะเป็นไฟล์ไง ปิดเครื่องไปก็ไม่หายไปไหนนะ)

ถ้าเราต้องการดูค่าของ db เราสามารถเข้าไปหา path ได้จาก
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'user.db');
print(path);
// => /data/user/0/com.example.form_and_db/databases/user.db

ทีนี้เรามาดู SQlite Datatypes กันนะคับว่ามีอะไรบ้าง

int, real = float, text=String, blob = binary

Boolean = 0 or 1, Date Time = พวก TEXT or REAL or INTEGER

เปลี่ยนเทียบ type SQL กับใน Dart type

ขอข้ามวิธีการ install ไปเลยนะคับ วิธีการ implement ก้อจะใช้ SQL เป็นหลักนะคับ

1. เริ่มขึ้นโครง page ขึ้นมาโดยจะแสดงรายชื่อของ customers เป็น ListView() นะคับ แบบนี้ก่อน

สร้างโครง Scaffold ขึ้นมาก่อน

2. จากนั้นเพิ่มในส่วน AppBar นิดหน่อยเพื่อให้เพิ่ม customers เข้ามาได้

appBar: AppBar(
    title: Text("SQLITE of USERS"),
    actions: [
        IconButton(icon: Icon(Icons.person_add), onPressed: (){})
    ]
)

เมื่อมีการกดปุ่มขวาบน ก็จะมีการเพิ่ม customers เข้ามาได้เรื่อยๆ

3. import package ที่ต้องใช้เพิ่ม 2 ตัว เพื่อทุ่นเวลาในการสร้าง Alert และ Form นะคับ

import 'package:rflutter_alert/rflutter_alert.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

4. สร้าง form ขึ้นมาหลังจากมีการกดปุ่ม Add users ด้านขวาบนนะคับ

final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>(); // สร้าง key ขึ้นมารับค่าจาก form

ถัดไป ให้สร้าง method ขึ้นมารับเมื่อมีการกดปุ่ม โดยให้เรียกไปที่ _insertForm() และสร้าง method _insertForm() ขึ้นมาเพื่อเรียน AlertDialog และใส่ Form เข้าไปด้านในให้เรากรอก “Name-Surname” เข้าไปได้

ui และ code จะหน้าตาประมาณนี้คับ และได้ output ออกมาเป็น json เมื่อมีการกดปุ่ม

5. ต่อมาเราจะเข้ามาดูเรือง database กันจริงๆแล้วนะคับ โดยถ้าดูจาก readme ก้อจะเห็นว่า วิธีการใช้ก็จะต้อง openDatabase() และ close() ตามปกติเลย

ให้เริ่มสร้าง file ใหม่ขึ้นมาหนึ่งไฟล์ ตั้งชื่อว่า database_q.dart เพื่อไว้สำหรับ initial database เป็น class นึงและเราจะทำการ INSERT และ SELECT database (ต้องทำความเข้าใจตามลำดับแบบนี้นะคับ)

Created file database และสร้าง method (get, insert) เพื่อ select and insert data.

แน่นอนว่าส่วนของ ListTile ที่นำมาโชว์ ก้อคือค่าของ List<Map> customers

ถึงขั้นตอนนี้เราจะสามารถ insert ค่าเข้า database และ get ค่าออกมาโชวได้เแล้วนะ ตามภาพด้านบน

ต่อไปจะมาทำ update และ delete กันบ้างโดย การ update, delete จะต้องรู้ด้วยว่าจะ ใช้ id อะไร จึงต้องรับค่า id เข้ามาด้วย (สร้าง method ขึ้นมาเพิ่มอีก 2 ตัว)

Method of update and delete data, ทุกๆครั้งที่ update กับ delete ก้อจะ _getCustomer() อีกรอบเพื่อ rebuild หน้าจอนะ

ต่อมาเราจะใช้ทำให้ตัว ListTile ของเราเนี่ย สามารถ scroll ซ้าย-ขวาได้ เพื่อให้เราสามารถเรียกใช้ update หรือ delete ได้นะคับ ซึ่งใน Flutter จะมี Widget ที่มีความสามารถนี้คือ Dismissible( )

ใช้ Dismissible ครอบ ListTile เพื่อให้สามารถปัดซ้ายขวาได้ (ในรูปกำหนดให้ปัดด้านซ้ายก่อน ด้วย background)

ต่อมาเราจะกำหนดให้ปัดจากด้านขวาบ้าง โดยการกำหนด secondaryBackground

หลังจากสร้างส่วนของ ui ให้สามารถ scroll left and right ได้แล้ว ต่อมาเราจะมากำหนดต่อนะคับ ว่าให้ทำอะไร โดยใช้ property confirmDismiss: ของ Dismissible() นั่นแหละ

กำหนดเงื่อนไขเมื่อมีการปัดด้านขวาเข้ามา ก้อให้ขึ้น popup ก่อนที่จะ delete จริง

ต่อไปเราจะมาสร้าง method สำหรับ Update ข้อมูล เพื่อใช้ในการ edit นะคับ โดยการ copy มาจาก _insertForm() ได้เลย

สร้าง _updateForm() ขึ้นมา เพื่อจะนำไปใช้เรียกใน confirmDismiss:

จากนั้นก้อมาเรียกใช้ต่อใน case else ของเงื่อนไขใน confirmDismiss:

ตอนนี้เราก้อจะสามารถใช้งาน db “sqflite” ได้ครบหมดแล้วนะคับ ไม่ว่าจะเป็น

• get value from db
• insert value to db
• update value to db
• delete value in db

โดยทำผ่าน methods และเรียกใช้งานผ่านทาง Widgets ของ Flutter นะคับ โดย code จะมี 2 ส่วนคือ ส่วนที่เป็น การ initial db (database.dart) ขึ้นมา และ ส่วนที่เรียกใช้งาน (test_db.dart) ตามนี้เลยนะคับ

database.dart

test_db.dart

My repo:
https://github.com/atthana/test_sqflite

แล้วพบกันใหม่คับ