[FLUTTER] Tìm hiểu về cách sử dụng SQLite trong Flutter

Để lưu những dữ liệu theo dạng bảng dễ dàng cho việc truy vấn và thay đổi, chúng ta cần sử dụng SQLite

I. Khái quát về Sqlite trong Flutter

Trong Flutter chúng ta sử dụng thư viện sqflite, thư viện này sẽ hỗ trợ chúng ta:

• Sử dụng trên đa nền tảng Android, iOS, MacOS.
• Hỗ trợ transactions và batches.
• Tự động quản lý phiên bản (version) trong khi mở.
• Hỗ trợ các câu lệnh truy vấn CRUD (Create – Read – Update – Delete) đầy đủ.
• Thực hiện các xử lý trên background của iOS và Android.

II. Cách sử dụng Sqlite trong Flutter

1. Thêm thư viện

1.1. Thêm thư viện sqflite và path (dùng để xác định vị trí lưu database trong bộ nhớ) vào phần dependencies trong file pubspec.yaml

2. Cài đặt thư viện

2.1. Đầu tiên chúng ta cần tạo một class model Student, đây sẽ là dữ liệu chúng ta dùng trong quá trình lưu trữ.

class Student {
  int id;
  String name;
  int grade;

  Student({required this.id, required this.name, required this.grade});
}

Nếu bạn chưa biết rõ về Sql cũng như các câu lệnh của chúng, hãy tìm hiểu về chúng trước khi tiếp tục: SQL Introduction (w3schools.com)

2.2. Tiếp theo chúng ta khởi tạo database

class StudentDatabase {
  static Database? _database;

  static Future<Database> getInstance() async {
    _database ??= await openDatabase(

        /// use join to create path for db, then the path will be path/student.db
        join(await getDatabasesPath(), "student.db"),

        /// This function will be called in the first time database is created
        onCreate: (db, version) {
      return db.execute(
          "CREATE TABLE student(id INTEGER PRIMARY KEY, name TEXT, grade INTEGER)");
    },

        /// This version will use when you want to upgrade or downgrade the database
        version: 1,
        singleInstance: true);
    return _database!;
  }
}

• Hàm onCreate() được gọi tại lần đầu mà database được khởi tạo
• Version chính là phiên bản của database, nếu bạn muốn thay đổi cấu trúc của database thì chúng ta phải thay đổi version.

Tiếp theo ta thêm các hàm phục vụ cho việc chuyển đổi dữ liệu khi muốn thêm vào database cũng như lấy dữ liệu ra từ database

class Student{
...

Map<String, dynamic> toMap() => {'id': id, 'name': name, 'grade': grade};

factory Student.fromMap(Map<String, dynamic> map) {
  return Student(id: map['id'], name: map['name'], grade: map['grade']);
}
...
}

Ở đây mình có viết thành một project CRUD, với các phân tần giữa data và UI rõ ràng, để có thể hiểu hơn về project này hãy đọc đến cuối bài viết.

2.3. Thêm một trường dữ liệu vào bảng

Future<DataResult> insertStudent(Student student, String tableName) async {
    try{
      Database db = await StudentDatabase.getInstance();
      int lastInsertedRow = await db.insert(tableName, student.toMap(),
          conflictAlgorithm: ConflictAlgorithm.replace);
      return DataResult.success(lastInsertedRow);
    }catch(ex){
      return DataResult.failure(DatabaseFailure(ex.toString()));
    }
  }

• Hàm insert() có hai tham số truyền vào là tên của bảng và dữ liệu chúng ta muốn thêm vào bảng, dữ liệu này đã được chuyển thành một map để có thể thực hiện thêm vào database.
• Tham số conflictAlgorithm: được sử dụng để xác định các xử lý khi có sự trùng lặp dữ liệu xảy ra, ở đây tham số này có giá trị là ConflictAlgorithm.replace có nghĩa là nếu trùng primary key thì giá trị cũ sẽ được thay thế bằng giá trị mới.
• Nếu hàm insert thực hiện thành công sẽ trả về id của hàng vừa được thêm.
• Nếu không thành công sẽ trả về giá trị 0.

2.4. Lấy thông tin của tất cả các trường

Trong Android Studio có một công cụ hỗ trợ chúng ta xem được các cơ sở dữ liệu đang có trong app, đó chính là App Inspection

Tại đây chúng ta có thể thấy được bảng “student” đã được thêm 33 trường dữ liệu, vậy bây giờ chúng ta muốn lấy tất cả những dữ liệu này ra thì phải làm thế nào?

Future<DataResult> getAllStudent() async{
    try{
      Database db = await StudentDatabase.getInstance();
      final List<Map<String,dynamic>> maps = await db.query("student");
      List<Student> students = maps.map((e) => Student.fromMap(e)).toList();
      return DataResult.success(students);
    }catch(ex){
      return DataResult.failure(DatabaseFailure(ex.toString()));
    }
  }

Chúng ta chỉ cần sử dụng hàm query, truyền vào tham số là bảng mà chúng ta cần lấy dữ liệu.

• Dữ liệu trả về sẽ ở dạng List<Map<String,dynamic>>, vì vậy chúng ta cần chuyển đổi chúng sang dạng của lớp Student sử dụng hàm fromMap() đã được thêm trong class Student

2.5. Thay đổi thông tin của một trường.

Future<DataResult> updateStudent(Student student) async{
    try{
      Database db = await StudentDatabase.getInstance();
      int numberOfChanges = await db.update("student", student.toMap(),where: "id = ?",whereArgs: [student.id]);
      return DataResult.success(numberOfChanges);
    }catch(ex){
      return DataResult.failure(DatabaseFailure(ex.toString()));
    }
  }

Để thực hiện được việc thay đổi dữ liệu của một trường chúng ta cần sử dụng hàm update()

• Các tham số truyền vào gồm có tên bảng, dữ liệu thay đổi (được chuyển sang map), điều kiện thay đổi và tham số cho điều kiện đó.
• Có thể thấy phần thay đổi dữ liệu này khá giống với phần thêm dữ liệu, chỉ khác chúng ta có thêm hai tham số khá quan trọng là “where” và “whereArgs”.
• Giá trị trả về của hàm update() là số lượng thay đổi đã diễn ra.

2.6. Xóa thông tin của một trường

Future<DataResult> deleteStudent(int id) async{
    try{
      Database db = await StudentDatabase.getInstance();
      int numberOfRowEffected = await db.delete("student",where: "id = ?",whereArgs: [id]);
      return DataResult.success(numberOfRowEffected);
    }catch(ex){
      return DataResult.failure(DatabaseFailure(ex.toString()));
    }
  }

Để thực hiện việc xóa dữ liệu chúng ta sẽ cần dùng đến hàm delete()

• Gần giống với hàm update chúng ta cũng cần có hai tham số “where” và “whereArgs”
• Giá trị trả về sẽ là hàng bị thay đổi giá trị.

III. Tổng kết

Phần Sql này khá là khó và khô khan đối với những người mới học, mới tiếp cận, vì vậy mọi người cần luyện tập thêm để trở nên master phần này nhé.

Link github của project mình tự làm cho mọi người tham khảo: lamdev99/sqflite_crud (github.com)

Tài liệu tham khảo:

• sqflite | Flutter Package (pub.dev)
• Persist data with SQLite | Flutter

Author: LamNT59

[FLUTTER] Cách viết Unit Test trong Flutter (Phần 2)

Lời ngỏ

Mỗi ngôn ngữ, hay framework đều có các cách để triển khai Unit Test khác nhau. Tuy nhiên trong bài viết này mình sẽ chú trọng vào Unit Test trong Flutter.

B. Cách triển khai Unit Test trong Flutter

1. Cài đặt thư viện

Để có thể viết Unit Test trong Flutter, chúng ta cần thêm thư viện test, nhớ thêm vào phần dev_dependencies nhé.

2. Cấu hình và giải thích

• Đầu tiên chúng ta tạo một hàm xử lý để giả định cho một chức năng trong app

class Calculation{
  int add(int a, int b){
    return a+b;
  }
  int subtract(int a, int b){
    return a-b;
  }
}

• Trong class Calculation, chúng ta có hàm xử lý là hàm “add”,”subtract”, đây chính là hàm chúng ta cần viết unit test. Bước tiếp theo là tạo một class để viết unit test.

• Ở trong phần package tree của project chúng ta sẽ thấy một package tên là “test”.

Đây sẽ là nơi chúng ta viết các unit test cho ứng dụng.

Có thể thấy ở bên trong folder này đã có một class được viết sẵn có tên là “widget_test.dart”, đây sẽ là class dùng trong việc test các widget của ứng dụng.

• Chúng ta tạo thêm một file đặt tên là “calculation_test” (Hãy đặt tên của file theo những chức năng, lớp mà chúng ta muốn test để dễ trong việc phân biệt và tìm kiếm.

• Chúng ta tạo một class “main”, bên trong sẽ viết các hàm unit test

import 'package:flutter_test/flutter_test.dart';
import 'package:unit_test_sample/calculation.dart';

void main(){
  /// Init class which needs tested
  Calculation calculation = Calculation();
  /// Test function add
  test("Sum of two integer ", () {
    int result = calculation.add(5, 4);
    expect(result, 9);
  });
}

• Ở đây ta sử dụng hàm “test” để viết các unit test cho từng chức năng.

Hàm “test” này có 2 tham số cần truyền vào đó là:

• Mô tả của test, nơi chúng ta có thể mô tả xem hàm test này đang test chức năng nào, hoặc có thể bổ sung thêm một vài mô ta cho input chúng ta truyền vào (ví dụ như input đó bị lỗi, sai, hay đúng).
• Tham số còn lại chính là một hàm, ở đây chúng ta sẽ viết các bước để có thể gọi được đến hàm cần test (ở đây là hàm “add”), cuối cùng chúng ta sử dụng hàm “expect” để kiểm tra kết quả của hàm test với kết quả mà chúng ta mong đợi. Tham số đầu tiên sẽ là kết quả của hàm được test, tham số còn lại là kết quả mà chúng ta mong muốn.

Như vậy phần chuẩn bị hàm test đã xong, giờ việc chúng ta cần làm là chạy thôi:

• Ấn chuột phải rồi chọn “run test in calculation” hoặc ấn tổ hợp phím Ctrl + Shift + F10:
• Sau một lúc chạy thì ở phía dưới sẽ hiển thị một màn hình kết quả test:

Nếu có tick xanh ở trước mô tả “Sum of two integer”, có nghĩa là test của chúng ta đã chạy đúng như mong đợi.

Thử thay đổi kết quả mong đợi để xem chuyện gì xảy ra:

test("Sum of two integer ", () {
    int result = calculation.add(5, 4);
    expect(result, 8);
  });

Ngay lập tức test của chúng ta đã chạy sai, trong phần log lỗi cũng đã chỉ ra cho chúng ta biết chúng ta sai ở đâu.

• Expected (kết quả mong đợi) là 8 trong khi Actual (kết quả được tính toán) là 9, từ đó chúng ta sẽ rất dễ dàng trong việc fix lỗi.

Khi có nhiều hàm test cùng liên quan đến một vấn đề, chúng ta có thể cho chúng vào trong một “group” để dễ quản lý hơn.

void main() {
  /// Init class which needs tested
  Calculation calculation = Calculation();
  group(
    "Calculate with integer",
    () {
      /// Test function add
      test("Sum of two integer ", () {
        int result = calculation.add(5, 4);
        expect(result, 9);
      });

      /// Test function subtract
      test("Subtraction of two integer ", () {
        int result = calculation.subtract(5, 4);
        expect(result, 1);
      });
    },
  );
}

Và khi chạy lên chúng ta sẽ được kết quả như sau:

3. Tài liệu tham khảo

• An introduction to unit testing | Flutter

Chúc các bạn luôn nhìn thấy một màu xanh lá khi chạy Unit Test

Tác giả: LamNT59

[FLUTTER] Một số widget hữu ích trong Flutter (Phần 1)

Giới thiệu

Khi làm việc với Flutter có lẽ ai cũng biết câu nói:

Trong Flutter, (gần như) mọi thứ đều là widget.

Nhưng cũng chính vì có quá nhiều widget, lập trình viên đôi khi cảm thấy khó khăn trong việc lựa chọn, thậm chí là không biết đến sự tồn tại của một widget đã được viết sẵn phục vụ cho những yêu cầu thường gặp, thành ra phải tự code lại tốn nhiều thời gian mà chưa chắc đã thực sự tốt.

Vì vậy, trong bài viết này, mình sẽ giới thiệu một số widget có thể sẽ giúp ích trong quá trình anh em làm việc với Flutter.

À, nhưng trước hết, mình vẫn muốn recommend anh em kênh youtube chính thức của Flutter, có playlist Widgets of the Week (có lẽ nhiều người đều biết đến list này), mình thường xuyên vào đây xem khi có thời gian rảnh 😀

1. FittedBox

Chắc hẳn khi đọc tên thì anh em cũng đã tưởng tượng được ra tác dụng của widget này. Cũng giống như khi sử dụng các widget liên quan tới image, chúng ta có thuộc tính fit để thể hiện cách vẽ widget con (điều này chắc ai cũng biết rồi).

Nhưng có một cách sử dụng khá hay mà mình mới được biết gần đây là làm cho các text trở nên responsive, khi độ lớn của widget cha thay đổi, text bên trong cũng thay đổi theo, ví dụ mình hoạ tại đây.

FittedBox(
    fit: BoxFit.fitWidth,
    child: Text("Fitted Box"),
)

2. Wrap

Widget này gần tương tự với Flex (lớp cha của Row và Column), nhưng khác ở điểm có thể tự sắp xếp các widget con sang cột / hàng mới tuỳ vào kích thước còn lại. Ví dụ

Một số thuộc tính trong Wrap như sau:

• direction: xác định trục chính (vertical / horizontal)
• spacing: khoảng cách giữa các widget trong trục chính (Main Axis).
• runSpacing: khoảng cách giữa các widget trong trục phụ (Cross Axis).
• alignment: vị trí theo trục chính của các widget con khi được wrap sang một hàng / cột mới (start, center, spaceBetween, …)
• runAlignment: vị trí theo trục phụ của các widget con khi được wrap sang một hàng / cột mới.

Ngoài ra còn một số thuộc tính nữa anh em có thể đọc thêm tại link doc của Flutter.

3. Flexible, Expanded và Spacer

Tại sao mình lại đưa ra một lúc 3 widget? Bởi vì 3 widget này khá tương đồng nhau về cách sử dụng, để mình giải thích cho nhé.

3.1. Flexible

Hãy tưởng tượng, anh em muốn làm một giao diện có các widget con bên trong có thể thay đổi kích thước theo widget cha (không nên nhầm lẫn với việc size màn hình thay đổi nhé), như vậy thì không thể sử dụng các widget có size cố định, chúng ta hãy nghĩ ngay đến việc sử dụng 3 widget trên xem sao ^^

Ví dụ, chúng ta có 1 Row, bên trong gồm có 4 Container chứa Text, vậy làm thế nào để:

• Container 1 chiếm 10%
• Container 2 chiếm 20%
• Container 3 chiếm 30%
• Container 4 chiếm 40%

Rất đơn giản, anh em chỉ cần wrap từng widget con vào trong widget Flexible và cho chúng hệ số flex như sau:

SizedBox(
          height: 100,
          child: Row(
            children: [
              Flexible(
                  flex: 1, child: Container(color: Colors.red.shade100)),
              Flexible(
                  flex: 2,
                  child: Container(
                    color: Colors.red.shade200,
                  )),
              Flexible(
                  flex: 3,
                  child: Container(
                    color: Colors.red.shade300,
                  )),
              Flexible(
                  flex: 4,
                  child: Container(
                    color: Colors.red.shade400,
                  )),
            ],
          ),
        ),

Kích thước của children sẽ được tính như sau:

• Tính tổng hệ số flex của các widget có trong parent (Bao gồm Flexible, Spacer và Expanded): ví dụ ở trên sẽ là 1 + 2 + 3 + 4 = 10
• Đặt kích thước của widget theo tỉ lệ hệ số flex / tổng, Ví dụ Container 1 sẽ chiếm 1/10 tức 10% width của row

Vậy là chúng ta đã có một giao diện động mà không cần sử dụng các kích thước cố định 😀 :D.

Nhưng nếu giữa các widget Flexible mà có widget kích thước cố định thì sao? Sẽ không có vấn đề gì cả, flutter sẽ trừ đi phần cố định chia theo hệ số flex như trên

3.2. Expanded

Expanded cũng giống như Flexible, chỉ khác là nó sẽ luôn muốn chiếm hết không gian còn lại nếu có thể, còn Flexible thì mặc định sẽ chỉ chiếm vừa đủ không gian bằng widget con của nó, và có một điều cần lưu ý:

Flexible(

      fit: FlexFit.tight,
      ...
),

sẽ tương đương với:

Expanded(
      ...
)

Chỉ là đặt tên như vậy sẽ tường minh hơn, dễ trong việc sử dụng hơn 😀 😀

3.3. Spacer

Đúng như cái tên của nó, widget này đơn giản là chỉ tạo ra khoảng trắng, được sử dụng giống 2 widget trên, cũng có hệ số flex

Lưu ý:

• Các widget này phải được sử dụng trực tiếp dưới widget cha là các widget flex như Flex, Row, Column.
• Mặc định hệ số flex sẽ luôn là 1

(Còn tiếp…)

Tham khảo

widgets library – Dart API (flutter.dev)

My 10 Most Favorite Flutter Widgets – YouTube