• Flutter: ลองเขียนแอปสไตล์ BLoC Pattern สำหรับ Noob

เรามาอธิบายโครงสร้างแอปแบบคร่าวๆกันก่อน

• Model ข้อมูล todo แต่ละอันจะประกอบไปด้วย title detail กับ complete และเพิ่มเติมที่มองไม่เห็นแต่สำคัญมากคือ uuid (คำอธิบายจะมีเพิ่มด้านล่าง)
• Screen แอปเราจะประกอบไปด้วย 2 หน้า 1. หน้าที่แสดงชุดข้อมูลของ todo หรือหน้าหลัก 2. หน้าที่แสดงรายละเอียด/แก้ไข/เพิ่ม todo
• Widget จะเป็น custom widget ที่นำมาใช้แสดงใน Screen โดยอาจจะนำมาแยกใส่ลง widget เพราะ มีการถูกใช้ซ้ำๆ หรือเพื่อจัดระเบียบให้โค๊ดดูสวยงาม เป็นระเบียบขึ้น
• Provider แอปต้องมีส่วนของตัวให้บริการ 2 อย่าง คือ ตัวสร้าง uuid และตัวจัดเก็บข้อมูล local storage
• Bloc โค๊ดที่ทำหน้าที่จัดการ ประสานงาน ของข้อมูลที่ถูกเรียกไปมาในแอป แล้วถูกนำไปใช้แสดงผลในหน้า screen หรือ UI ของเรา

พื้นฐานเพิ่มเติมที่ต้องใช้

flutter_bloc

• การสร้าง uuid หรือ Unique Id หรือ รหัสไอดีเฉพาะ ที่ทุกครั้งที่สร้างจะไม่ซ้ำกัน เราจะนำมันไปใช้ระบุให้ todo แต่ละอันของเรา เนื่องจากเรามี todo ในลักษณะเป็นชุดข้อมูล ถ้าเราอยากสร้าง หรือแก้ไข todo ที่ถูกตัว โดยเฉพาะเมื่อเรามี todo หลายอันที่เหมือนกัน เราก็จะไม่สับสน เพราะ todo แต่ละอันมี uuid ของตัวเอง
• JSON Serialization เราจะอิมพอร์ท json_annotation เข้ามาใช้ช่วยแปลงข้อมูล todo ที่เป็น class อยู่ให้กลายเป็น json เพื่อให้ง่ายต่อการจัดเก็บข้อมูลลงในเครื่อง
• Path Provider ทำหน้าที่ดึงข้อมูลที่อยู่ ที่สามรถใช้จัดเก็บข้อมูลในเครื่อง โดยเราจะเอาที่อยู่นี้ใช้บันทึกข้อมูล todo ลงไปเป็น text file โดย text นี้ก็จะเป็น json

มาเริ่มส่วนโค๊ดกัน

แก้

pubspec.yaml

กันก่อน

dependencies

meta: ">=1.1.0 <2.0.0"

equatable: ^1.2.2

flutter_bloc: ^6.0.2

path_provider: ^1.6.11

json_annotation: ^3.0.1

และใน `dev_dependencies` เราเพิ่ม

build_runner: ^1.10.0

json_serializable: ^3.0.1

blocs

models

providers

screens

widgets

ที่โฟลเดอร์ provider สร้างไฟล์ uuid.dart ขึ้นมา

providers/uuid.dart

xxx-xxxxxxx

Uuid().generateV4();

providers/providers.dart

export './uuid.dart';

ที่โฟลเดอร์ models มาทำโครงสร้างสำหรับข้อมูล todo

complete

title

detail

uuid

title

uuid

complete

detail

models/todo.dart

import 'package:json_annotation/json_annotation.dart';

import 'package:simple_todos_bloc/providers/providers.dart';

providers.dart

part 'todo.g.dart';

@immutable      // <-- เพื่อให้มันใจว่าตัวแปรทั้งหมดถูกประกาศเป็น final

@JsonSerializable()     // <-- เพื่อบอกให้ สคริป JSON Serialization เราทราบว่า คลาสนี้จะถูกนำไปแปลงเป็น json ได้

class TodoModel extends Equatable {

final bool complete;

final String id;

final String title;

final String detail;

TodoModel({
this.complete = false, // <-- ค่าแรกเริ่มเป็น false
String id,
this.title,
this.detail = ''}): // <-- ค่าแรกเริ่มเป็น สตริงว่างๆ ถ้าไม่ถูกระบุมา
this.id = id ?? Uuid().generateV4(),   // <-- ค่าแรกเริ่มถูกสร้างโดย Uuid().generateV4()
super();

// เนื่องจากภาษา dart ไม่มีวิธีการ copy by value สำหรับ class ดังนั้นเราจะต้องสร้างขึ้นมาเอง
// วิธีเรียก TodoModel newTodo = oldTodo.copyWith();
// ถ้าไปแก้ค่าใน newTodo ก็จะไม่ไปกระทบกับ oldTodo

TodoModel copyWith({bool complete, String id, String title, String detail}) {

return TodoModel(

complete: complete ?? this.complete,

id: id ?? this.id,

title: title ?? this.title,

detail: detail ?? this.detail);

}

// เพื่อให้ดีบัคได้ง่าย เราก็จะแก้ toString() ตอนสั่ง print ออกมาจะได้เห็นค่าข้างใน class แทนที่เดิมไม่ได้แก้ จะเห็นเป็นที่ของ memory

@override
String toString() {

return 'todo { title: $title, complete: $complete, detail: $detail, id: $id}';

}


// ฟังก์ชั่นสำหรับแปลง class เป็น json (JSON Serialization)

factory TodoModel.fromJson(Map<String, dynamic> json) => _$TodoModelFromJson(json);

// ฟังก์ชั่นสำหรับแปลง json เป็น class (JSON Serialization)
Map<String, dynamic> toJson() => _$TodoModelToJson(this);

@override
List<Object> get props => [complete,id,title,detail];

}

List<TodoModel> todos;

List<TodoModel>

@immutable

@JsonSerializable()

class TodoList extends Equatable {


final List<TodoModel> todos;

TodoList(this.todos);  //<-- รับ List<TodoModel> เข้ามาได้เลย

// เพื่อให้ดีบัคได้ง่ายเหมือนเดิม

@override

String toString() {

return 'todoList { todos: $todos }';

}

// (JSON Serialization)

factory TodoList.fromJson(Map<String, dynamic> json) =>

_$TodoListFromJson(json);

//  (JSON Serialization)

Map<String, dynamic> toJson() => _$TodoListToJson(this);

@override
List<Object> get props => [todos];

}

@JsonSerializable()

models/models.dart

export './todo.dart';

กลับมาที่ Providers อีกอันที่เราต้องสร้าง storage

providers/storage.dart

import 'package:simple_todos_bloc/models/models.dart';

import 'package:path_provider/path_provider.dart';

Future<Directory> getDirectory() async

Future<Directory> getDirectory() async {

Directory path = await getApplicationDocumentsDirectory();

if (path == null) {

return null;

}

return path;

}

getDirectory()

final String tag = '__todos__';

Future<File> _getLocalFile() async {


final dir = await getDirectory();

return File('${dir.path}/ArchSampleStorage__$tag.json');


}

Future<File> _getLocalFile() async

loadTodos()

saveTodos()

loadTodos()

saveTodos()

Future<List<TodoModel>> loadTodos() async {

try {

final file = await _getLocalFile();   // --> ดึงไฟล์ todos มา

final string = await file.readAsString();  // --> อ่านไฟล์แบบ string

final json = await jsonDecode(string);  // \--> แปลง string เป็น json ที่โปรแกรมเข้าใจ

final todos = TodoList.fromJson(json);  // \--> แปลง json เป็น class แล้วนำไปใช้งานได้ตามปกติเลย

return todos.todos;

} catch (e) {     // \--> กรณีที่เราเปิดแอปเป็นครั้งแรก

print('not init');

return TodoList([

TodoModel(title: 'Welcome to Simple Todo', )

]).todos;

}

}

Future<File> saveTodos(List<TodoModel> todos) async {

final file = await _getLocalFile();   **// --> ดึงไฟล์ todos มา**

TodoList temp = TodoList(todos);    **// --> แปลง List<TodoModel> เป็น TodoList**

return file.writeAsString(jsonEncode(temp));   **// --> แปลง TodoList เป็น json แล้วบันทีกลงไฟล์แบบ string**

}

export './storage.dart';

providers/providers.dart

export './storage.dart';
export './uuid.dart';

มาทำในส่วนของ bloc กันต่อ

**blocs/todos/todos_event.dart**

• LoadTodos — เรียกเมื่อต้องการให้ bloc ไปดึงข้อมูล todos จาก local storage มาใช้
• AddTodos — เรียกเมื่อต้องการเพิ่ม todo อันใหม่เข้าไปใน todos โดยตอนเรียกจะต้องส่ง todo ไปด้วย
• UpdateTodos — เรียกเมื่อต้องการอัพเดท todo เดิม ตอนเรียกก็จะต้องส่ง todo ที่ถูกแก้ไขไปด้วย
• DeleteTodos — เรียกเมื่อต้องการลบ todo เดิม ออกไปจาก todos ตอนเรียกก็จะต้องส่ง todo ที่ต้องการลบด้วย

**blocs/todos/todos_state.dart**

• TodosLoading — แจ้ง UI ว่าตอนนี้ ข้อมูลยังไม่พร้อมใช้งาน ให้โชว์ว่ากำลังโหลดอยู่
• TodosLoaded — แจ้ง UI ว่า ข้อมูล todos พร้อมแล้ว และนำ todos มาใช้แสดงผลได้
• TodosNotLoaded — แจ้ง UI ว่าเกิดปัญหาขึ้น ให้โชว์ error

**blocs/todos/todos_bloc.dart**

_mapToState()

• _mapLoadTodosToState() — เมื่อรับ event

  LoadTodos

  มา เราก็จะรัน

  FileStorage().loadTodos();

  เพื่อไปดึง todos มาจาก local storage แล้วส่งต่อไป state

  TodosLoaded(todos);

  แต่ ถ้าเกิดปัญหาผิดพลาดอะไรขึ้นมา

  TodosNotLoaded();

  ถูกเรียกแทน
• _mapAddTodosToState(AddTodos event) — เมื่อรับ event

  AddTodos

  มา

final List<TodoModel> updatedTodos = List.from((state as TodosLoaded).todos);  // --> สร้าง list ใหม่ที่ลอกข้อมูลมาจาก list เก่า เราไม่อยากให้ list เก่าเกิดการ mutate หรือกลายพันธุ์ เพราะ flutter_bloc จะใช้ list เก่า กับ list ใหม่ เทียบกัน แล้วนำไปตัดสินว่า UI ส่วนไหนต้องถูกสร้างใหม่บ้าง

updatedTodos.add(event.todo);   // --> เพิ่ม todo ไปที่ list ใหม่

_saveTodos(updatedTodos);   // --> บันทึก list ใหม่ ไปยัง local storage

yield TodosLoaded(updatedTodos);   // --> เรียก state TodosLoaded

• _mapUpdateTodosToState(UpdateTodos event) — เมื่อรับ event

  UpdateTodos

  มา

// สร้าง list ใหม่โดย list ใหม่ จะถูก map เปรียบเทียบตามเงื่อนไข ถ้าเป็น id ของ todo ที่เราต้องการแก้ เราถึงจะเอา todo อันใหม่ไปแทนที่อันเก่า สุดท้ายจะได้ list ที่อัพเดทเรียบร้อย
final List<TodoModel> updatedTodos = (state as TodosLoaded).todos.map((todo) { return todo.id == event.updateTodo.id ? event.updateTodo : todo; }).toList();

yield TodosLoaded(updatedTodos); // --> เรียก state TodosLoaded

_saveTodos(updatedTodos);  // --> บันทึก list ใหม่ ไปยัง local storage

• _mapDeleteTodosToState(DeleteTodos event)

// สร้าง list ใหม่โดย list ใหม่ จะถูก where หาตามเงื่อนไข ถ้าไม่ใช่ id ของ todo ที่เราต้องการลบ ก็จะถูกนำไปใส่ใน list อันใหม่ list ใหม่ก็จะลบ todo ที่ไม่ต้องการออกไปแล้ว
final List<TodoModel> updatedTodos = (stateas TodosLoaded).todos.where((todo) => todo.id != event.deleteTodo.id).toList();

yield TodosLoaded(updatedTodos);  // --> เรียก state TodosLoaded

_saveTodos(updatedTodos);  // --> บันทึก list ใหม่ ไปยัง local storage

**blocs/todos/todos.dart**

export 'todos_bloc.dart';
export 'todos_event.dart';
export 'todos_state.dart';

**blocs/blocs.dart**

export './todos/todos.dart';

มาทำส่วนของการแสดงผลกันต่อ

ก่อนไปส่วน Screens เรามาทำ widgets กันก่อน

TodosLoading

widgets/loading_indicator.dart

CircularProgressIndicator()

center

widgets/widgets.dart

export './loading_indicator.dart';

มาเข้าส่วน Screens กัน

1. todos.dart

   แสดงชุดข้อมูลของ todo หรือหน้าหลัก

2. detail-add.dart

   แสดงรายละเอียด/แก้ไข/เพิ่ม todo

todos.dart

detail-add.dart

สุดท้าย

**main.dart**

จบแล้วววว~~~

Cheersupzoo/simple_todos_bloc

A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…

github.com

แนะนำเรื่องถัดไป

• บอกต่อความท้าทายการทำหุ่นยนต์ ผ่านน้องไอโกะกันเถอะ
• Flutter: ลองเขียนแอปสไตล์ BLoC Pattern สำหรับ Noob
• Flutter | มาลองทำแอป Icon Showcase || Part I การดีไซน์