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

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

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

None
แสดงไฟล์ 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 กันนะคับว่ามีอะไรบ้าง

None
int, real = float, text=String, blob = binary
None
Boolean = 0 or 1, Date Time = พวก TEXT or REAL or INTEGER
None
เปลี่ยนเทียบ type SQL กับใน Dart type

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

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

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

appBar: AppBar(
    title: Text("SQLITE of USERS"),
    actions: [
        IconButton(icon: Icon(Icons.person_add), onPressed: (){})
    ]
)
None
เมื่อมีการกดปุ่มขวาบน ก็จะมีการเพิ่ม 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" เข้าไปได้

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

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

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

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

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

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

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

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

ตอนนี้เราก้อจะสามารถใช้งาน 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) ตามนี้เลยนะคับ

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

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