[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022

台北 & ⾼雄
來體驗 bloc ⼩⽅塊
的神奇魔法
Johnny Sung (宋岡諺)
Full stack developer

⼤綱
•Bloc 介紹
•舉個例⼦寫寫看
•怎麼測試？

https://www.redbubble.com/i/ipad-case/I-turn-co
ff
ee-into-code-by-DutchArt/23986463.MNKGF

BLoC stands for Business Logic Component.
Bloc is a design pattern created by Google to help separate
business logic from the presentation layer and enable a
developer to reuse code more efficiently.

https://pub.dev/packages/
fl
utter_bloc

Bloc 元件
•Cubit
•Bloc
•BlocBuilder

Bloc 元件
•BlocBuilder
•BlocSelector
•BlocProvider
•MultiBlocProvider
•BlocListener
•MultiBlocListener
•BlocConsumer
•RepositoryProvider
•MultiRepositoryProvider

https://www.getreligion.org/getreligion/2019/12/12/bible-trivia-time-for-hard-working-scribes-what-is-a-cubit-a-shekel-an-ephah
cubit /kj’ubɪt/ 腕尺
(Noun.): an ancient unit of length based on
the length of the forearm.
古時⼀種量度，⾃⼿肘⾄中指端，長約 18 英⼨
https://cdict.net/q/cubit

跟這個⼀點關係都沒有。

簡單來說，
Cubit 算是 Bloc 的簡化版。

發想步驟
•列出所有可能的事件 (Events)
•列出所有可能的狀態 (States)

舉個例⼦
(_/)
( •_•)
/>~ 🌰

// 抽象事件
abstract class MyBlocEvent {}
// 抓成績單
class GetScoringDataEvent extends MyBlocEvent {}

// 抽象狀態
abstract class MyBlocState {}
// 微笑狀態
class SmileState extends MyBlocState {}
// 哭泣狀態
class CryingState extends MyBlocState {}
// 初始狀態
class InitState extends MyBlocState {}
// 錯誤狀態
class ErrorState extends MyBlocState {
Error error;
ErrorState(this.error);
}

import 'package:bloc/bloc.dart';
class MyBloc extends Bloc<MyBlocEvent, MyBlocState> {
MyBloc() : super(InitState()) {
on<GetScoringDataEvent>((event, emit) {
emit(SmileState());
});
}
}

class ScoreRepository {
Future<int> getScore() async {
await Future.delayed(const Duration(seconds: 1)); // 等待 1 秒，模擬網路延遲
var rand = Random();
var score = rand.nextInt(100);
return score;
}
}
取成績單

import 'dart:convert';
import 'package:http/http.dart' as http;
Future<MyScoreResponseModel> getScore() async {
final response = await http.get(
Uri.parse(constServerDomain + "/score"),
headers: defaultHeaders());
final map = json.decode(response.body);
return MyScoreResponseModel(map);
}
（未來可⽤ API 取成績單）

late ScoreRepository _scoreRepo;
MyBloc(MyBlocState initialState) : super(initialState) {
_scoreRepo = ScoreRepository();
}
@override
Stream<MyBlocState> mapEventToState(MyBlocEvent event) async* {
if (event is GetScoringDataEvent) {
yield InitState();
try {
int score = await _scoreRepo.getScore();
if (score >= 60) {
yield SmileState();
} else {
yield CryingState();
}
} catch (e) {
yield ErrorState();
}
}
}
}
bloc: ^7.2.0
flutter_bloc: ^7.2.0

import 'package:bloc_demo/score_repository.dart';
import 'my_bloc_event.dart';
import 'my_bloc_state.dart';
on<GetScoringDataEvent>((event, emit) async {
try {
var value = await _scoreRepo.getScore();
if (value >= 60) {
emit(SmileState());
} else {
emit(CryingState());
}
}catch(error){
emit(ErrorState());
}
});
}
}
bloc: ^8.1.0

https://github.com/felangel/bloc/issues/2526

https://bloclibrary.dev/#/migration

on<GetScoringDataEvent>((event, emit) {
_scoreRepo.getScore().then((value) {
if (value >= 60) {
emit(SmileState());
} else {
}
}).catchError((error) {
emit(ErrorState());
});
});
}
}
try {
if (value >= 60) {
emit(SmileState());
} else {
}
}catch(error){
emit(ErrorState());
}
});
}
}

try {
if (value >= 60) {
emit(SmileState());
} else {
}
}catch(error){
emit(ErrorState());
}
});
}
}
Bloc 主邏輯

import 'package:bloc_demo/my_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late MyBloc _myBloc;
@override
void initState() {
super.initState();
_myBloc = MyBloc(scoreRepo: ScoreRepository());
}
@override
void dispose() {
_myBloc.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
// 內容在下⼀⾴
}
}
@override
return BlocBuilder<MyBloc, MyBlocState>(
bloc: _myBloc,
builder: (context, state) {
if (state is SmileState) {
return const Text('😄');
} else if (state is CryingState) {
return const Text('😭');
} else if (state is ErrorState) {
return Text(state.error.toString());
}
return const CircularProgressIndicator();
});
}
⽤ BlocBuilder 來顯⽰

abstract class DataBlocEvent {}
class MyBlocLoadEvent extends DataBlocEvent {}

abstract class DataBlocState {}
class DataBlocInitialState extends DataBlocState {}
class DataBlocLoadingState extends DataBlocState {}
class DataBlocLoadedState extends DataBlocState {
final String data;
DataBlocLoadedState(this.data);
}
class DataBlocNoDataState extends DataBlocState {}
class DataBlocErrorState extends DataBlocState {
final String error;
DataBlocErrorState(this.error);
}

class MyDataBloc extends Bloc<DataBlocEvent, DataBlocState> {
MyDataBloc() : super(DataBlocInitialState()) {
on<MyBlocLoadEvent>((event, emit) async {
if (state is DataBlocLoadingState) {
return;
}
emit(DataBlocLoadingState());
try {
final data = await fetchData();
if (data == '') {
emit(DataBlocNoDataState());
} else {
emit(DataBlocLoadedState(data));
}
} catch (e) {
emit(DataBlocErrorState(e.toString()));
}
});
}
} bloc: ^8.1.0

bloc: ^7.2.0
class MyDataBloc extends Bloc<DataBlocEvent, DataBlocState> {
MyDataBloc() : super(DataBlocInitialState()) {
}
@override
Stream<DataBlocState> mapEventToState(DataBlocEvent event) async* {
if (state is DataBlocLoadingState) {
return;
}
yield DataBlocLoadingState();
try {
final data = await _fetchData();
if (data == '') {
yield DataBlocNoDataState();
} else {
yield DataBlocLoadedState(data);
}
} catch (e) {
yield DataBlocErrorState(e.toString());
}
}
}

•Arrange – 準備，準備輸入資料與期待值
•Act – 執⾏，執⾏測試對象
•Assert – 驗證，驗證結果
單元測試原則 3A 原則

import 'package:flutter_test/flutter_test.dart';
int sum(int a, int b) {
return a + b;
}
void main() {
test('sum(1, 1) value should be 2', () {
// Arrange
int a = 1;
int b = 1;
// Act
int result = sum(a, b);
// Assert
expect(result, 2);
});
}
主程式

https://pub.dev/packages/bloc_test

官⽅範例

思考邏輯
•實作 == 與 hashCode
•或者⽤ equatable 套件
https://pub.dev/packages/equatable

思考邏輯
•實作 == 與 hashCode
https://pub.dev/packages/equatable

思考邏輯
•改⽤ isA() 只判斷型態

void main() {
blocTest<MyBloc, MyBlocState>(
'emits [SmileState] when GetScoringDataEvent is added',
build: () {
return MyBloc(scoreRepo: ScoreRepository());
},
act: (bloc) => bloc.add(GetScoringDataEvent()),
expect: () =>
<TypeMatcher<MyBlocState>>[isA<InitState>(), isA<SmileState>()],
);
}
https://open.spotify.com/album/0y3CDnUguGkRr3lnjD8rrV

我說球，並不是這麼踢的
https://static-arc.appledaily.com.tw/20140622/UHJ6DEJUQCOXDNKXDRORCRCLWA/img/VRMCXKN4CGZUWQQ4TWL3NYF6TQ.jpg

http://newsimg.5054399.com/uploads/userup/1904/041A2194415.jpg
哦，那要怎麼踢？

因為你沒有辦法控制外部依賴。

https://img.eservice-hk.net/upload/2018/09/27/162655_d80410cf055dac9ce4ac0dbfd0bbc976.jpg

Test Double
•Dummy objects are passed around but never actually used. Usually they are just
used to
fi
ll parameter lists.
•Fake objects actually have working implementations, but usually take some
shortcut which makes them not suitable for production.
•Stubs provide canned answers to calls made during the test.
•Spies are stubs that also record some information based on how they were called.
One form of this might be an email service that records how many messages it was
sent.
•Mocks: objects pre-programmed with expectations which form a speci
fi
cation of the
calls they are expected to receive.
https://martinfowler.com/articles/mocksArentStubs.html#RegularTests

Test Double
•Dummy object: 為了拿來填參數所使⽤的其實⽤不到它的空物件
（null 也算是⼀種 Dummy object）。
•Fake object: 擁有類似正式程式碼的邏輯，只是簡化實作。
•Stub: 回應固定罐頭訊息的物件。
•Spy: 是 Stub 的⼀種，會紀錄怎麼被呼叫的，⽤來驗證待測物的⾏為是
否正確。
•Mocks: 使⽤ Mock Library 動態產⽣，提供 Stub, Spy, Dummy 等功能
http://teddy-chen-tw.blogspot.com/2014/09/test-double2.html
https://martinfowler.com/articles/mocksArentStubs.html#RegularTests

Dependency Injection
https://abdelmajid-baco.medium.com/understanding-dependency-injection-with-c-7da4ad9986e9
依賴注入

Dependency Injection
•Constructor Injection
•Property Injection
•Method Injection
(DI, 依賴注入)

https://ae01.alicdn.com/kf/Hd669ca14ba1c40809de41fc53bcc96c4r/PCI-Express-to-PCI-Adapter-Card-PCIe-to-Dual-Pci-Slot-Expansion-Card-USB-3-0.jpg_Q90.jpg_.webp
主邏輯
插槽
正式程式

主邏輯
假的程式
插槽
https://shopee.tw/PCI-%E6%95%B8%E5%AD%97%E7%87%88%E8%99%9F-
%E9%9B%BB%E8%85%A6%E4%B8%BB%E6%9D%BF%E6%95%85%E9%9A%9C%E5%B0%8F%E8%A8%BA%E6%96%B7%E5%8D%A1-%E6%B8%AC%E8%A9%A6%E5%8D%A1-
%E9%9B%BB%E8%85%A6%E9%99%A4%E9%8C%AF%E5%8D%A1-%E9%99%84%E8%AA%AA%E6%98%8E%E6%9B%B8-i.45286897.10679723263?
sp_atk=50331a4e-4049-4d31-8e57-5d0dde855783&xptdk=50331a4e-4049-4d31-8e57-5d0dde855783
https://www.ruten.com.tw/item/show?21926902268524

假的程式
插槽
測試程式

import 'dart:math';
abstract class ScoreRepoInterface {
Future<int> getScore();
}
class ScoreRepository implements ScoreRepoInterface {
@override
await Future.delayed(const Duration(seconds: 1));
var rand = Random();
var score = rand.nextInt(100);
return score;
}
}
class StubScoreRepository implements ScoreRepoInterface {
int score;
StubScoreRepository({required this.score});
@override
return score;
}
}
插槽
正式程式假的程式 (Stub)

https://img.ltn.com.tw/Upload/news/600/2021/07/22/3612749_1_1.jpg

ScoreRepoInterface scoreRepo;
MyBloc({required this.scoreRepo}) : super(InitState()) {
emit(InitState());
int score = await scoreRepo.getScore();
if (score >= 60) {
emit(SmileState());
} else {
}
});
}
}
製作插槽

'emits [SmileState] when GetScoringDataEvent is added',
build: () {
ScoreRepoInterface scoreRepo = StubScoreRepository(score: 60);
return MyBloc(scoreRepo: scoreRepo);
},
act: (cubit) => cubit.add(GetScoringDataEvent()),
expect: () =>
<TypeMatcher<MyBlocState>>[isA<InitState>(), isA<SmileState>()],
);
測試 Bloc (1)

'emits [CryingState] when GetScoringDataEvent is added',
build: () {
ScoreRepoInterface scoreRepo = StubScoreRepository(score: 40);
return MyBloc(scoreRepo: scoreRepo);
},
act: (cubit) => cubit.add(GetScoringDataEvent()),
expect: () =>
<TypeMatcher<MyBlocState>>[isA<InitState>(), isA<CryingState>()],
);
測試 Bloc (2)

stream /str'im/
⽔流,⼩河
(Noun.) a natural body of running water
flowing on or under the earth.
https://techcrunch.com/2009/04/27/facebook-opens-up-its-stream-api-to-developers/
https://cdict.net/q/stream
串流

Stream
Stream<int> sampleOfStream() async* {
yield 1;
yield 2;
yield 3;
yield 4;
// Do something
yield 5;
}

再舉個例⼦
https://is4-ssl.mzstatic.com/image/thumb/Podcasts125/v4/a3/a6/b5/a3a6b53f-ac3b-26f5-8d4e-094aea97f5ed/mza_17261924418676775272.jpg/500x500bb.jpg

abstract class MyBlocState {}
class InitState extends MyBlocState {}
class NumberState extends MyBlocState {
final int number;
NumberState(this.number);
}
定義狀態 (States)
•初始狀態
•取得數字狀態

abstract class MyBlocEvent {}
class StartGettingNumberEvent extends MyBlocEvent {}
class StopGettingNumberEvent extends MyBlocEvent {}
定義事件 (Events)
•開始取數字
•停⽌取數字

import 'dart:math';
class NumberLoop {
bool _isCancelled = true;
Stream<int> numberLoop() async* {
_isCancelled = false;
var rnd = Random();
while (!_isCancelled) {
yield rnd.nextInt(10000);
}
}
cancel() {
_isCancelled = true;
}
bool isRunning() {
return !_isCancelled;
}
}
1. 產⽣⼀個數字
2. 等待⼀秒
3. 重複 (1) 步

Stream<int> numberLoop() {
var rnd = Random();
return Stream.periodic(
const Duration(seconds: 1), (x) => rnd.nextInt(10000))
.takeWhile((element) => !_isCancelled);
}
var rnd = Random();
while (!_isCancelled) {
yield rnd.nextInt(10000);
}
}

import 'dart:math';
abstract class NumberLoopInterface {
void cancel();
bool isRunning();
Stream<int> numberLoop();
}
class NumberLoop implements NumberLoopInterface {
bool _isCancelled = true;
@override
void cancel() {
_isCancelled = true;
}
@override
bool isRunning() {
// ...略
return !_isCancelled;
}
@override
// ...略
}
}
製作插槽 (1)

import 'package:bloc_demo2/number_loop.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
NumberLoopInterface numberLoop;
MyBloc({required this.numberLoop}) : super(InitState()) {
on<StartGettingNumberEvent>((event, emit) async {
// ... 略
});
on<StopGettingNumberEvent>((event, emit) {
numberLoop.cancel();
});
}
}
製作插槽 (2)

class StubNumberLoop implements NumberLoopInterface {
List<int> numbers;
StubNumberLoop({required this.numbers});
@override
Stream<int> numberLoop() {
return Stream.fromIterable(numbers);
}
@override
void cancel() {
}
@override
bool isRunning() {
return true;
}
}
製作 Stubs

void main() {
test('test NumberLoop', () {
var loop = StubNumberLoop(numbers: [1, 2, 3]);
expect(loop.numberLoop(), emitsInOrder([1, 2, 3]));
});
}
測試 Stubs

import 'package:bloc_demo2/my_bloc.dart';
import 'package:bloc_test/bloc_test.dart';
void main() {
blocTest('test MyBloc',
build: () {
return MyBloc(numberLoop: StubNumberLoop(numbers: [1, 2, 3]));
},
act: (bloc) => bloc.add(StartGettingNumberEvent()),
expect: () => [NumberState(1), NumberState(2), NumberState(3)]);
}
測試 Bloc

總結回顧
•學到 Bloc 元件怎麼使⽤
•定義所有的事件 (Events) 與狀態 (States)
•測試 3A 原則：Arrange, Act, Assert
•善⽤ Dependency Injection 製作插槽
•外部依賴要⽤ Test double 把它換掉

@override
return FutureBuilder<int>(
future: fetchData(),
initialData: 0,
builder: (context, snapshot) {
if (snapshot.hasData) {
if (snapshot.data! >= 60) {
} else {
}
} else if (snapshot.hasError) {
return Text(snapshot.error.toString());
} else {
}
});
}
@override
bloc: _myBloc,
if (state is SmileState) {
} else if (state is CryingState) {
} else if (state is ErrorState) {
return Text(state.error.toString());
}
});
}
BlocBuilder FutureBuilder
Q1: BlocBuilder 跟 FutureBuilder 的差異？

@override
bloc: _myBloc,
if (state is NumberState) {
return Text(state.number.toString());
}
return const Text('- - - -');
});
}
@override
return StreamBuilder<int>(initialData: null,
stream: _numberLoop.numberLoop(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.toString());
} else if (snapshot.hasError) {
return Text(snapshot.error.toString());
}
return const Text('- - - -');
});
}
BlocBuilder StreamBuilder
Q2: BlocBuilder 跟 StreamBuilder 的差異？

https://github.com/j796160836/bloc_demo
範例 1

https://github.com/j796160836/bloc_demo2
範例 2

[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022

Similar to [Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022 (20)

More from Johnny Sung

More from Johnny Sung (20)

Recently uploaded

Recently uploaded (20)

[Flutter] 來體驗 bloc 小方塊的神奇魔法 @Devfest 2022