Bloc là một lib để quản lý state cho Flutter application. B.L.o.C nghĩa là Business Logic Component. Nhận ‘Event’ như là input và trả về output là ‘State’. Bloc được xây dựng dựa trên RxDart.
Chúng ta có thể chia Flutter application architecture thành 3 lớp sau:
- Biển diễn của View Layer.
- Bloc
- Data Layer
Vậy có nghĩa là Bloc đứng giữa 2 lớp View và Data.
1. Data Layer
Có nhiệm vụ cung cấp data từ bất kể nguồn nào. Data Provider cung cấp data tho và repository sẽ là trình đóng gói một hoặc nhiều data providers.
2. Bloc hay Business Logic
Có nhiệm vụ nhận event từ lớp biểu diễn và trả về state mới. Hoạt động như một cầu nối giữa lớp data và lớp presentation.
3. Presentation Layer
Có nhiệm vụ render chính nó dựa trên một hoặc nhiều state của bloc. Nó cũng xử lý các sự kiện input của user và lifecycle event của application.
Một số concept cho Bloc
1. Events
Event được truyền vào một Bloc. Nó giống như concept action trong Redux. Trong lớp presentation, event được tạo ra bởi tương tác của user như button click và truyền vào Bloc. Một event có thể bao gồm vài data được thêm vào.
2. States
State là một phần của application state. Nó là output của Bloc. Khi state thay đổi, thành phần UI sẽ được thông báo và dựa vào current state, nó sẽ tự render lại.
Transition
Thay đổi từ một state sang state khác gọi là transition. Nó bao gồm current state, event và state tiếp theo.
Tóm lại:
- Một Bloc phải extend base class Bloc của core bloc package.
- Một Bloc phải định nghĩa initial state (state ban đầu).
- Phải implement function mapEventToState. Function này nhận event vào như là tham số. Nó trả về output là stream của state mới.
- Để truy cập vào current state của bloc, chúng ta có thể sử dụng thuộc tính currentState.
- Một bloc phải có phương thức dispatch. Dispatch nhận một event và trigger mapEventToState. Dispatch có thể gọi trong lớp presentation trong bloc.
- onTransition được gọi trước khi update state bloc được update.
- onError có thể override để biết được exception của bloc.
Dưới đây là một số code demo về Bloc:
Bước 1: Tạo Events
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">part</span> of <span class="token string">'settings_bloc.dart'</span><span class="token punctuation">;</span> <span class="token metadata symbol">@immutable</span> <span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">SettingsEvent</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> <span class="token keyword">dynamic</span> payload<span class="token punctuation">;</span> <span class="token function">SettingsEvent</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">FontSize</span> <span class="token keyword">extends</span> <span class="token class-name">SettingsEvent</span> <span class="token punctuation">{</span> <span class="token function">FontSize</span><span class="token punctuation">(</span>double payload<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Bold</span> <span class="token keyword">extends</span> <span class="token class-name">SettingsEvent</span> <span class="token punctuation">{</span> <span class="token function">Bold</span><span class="token punctuation">(</span>bool payload<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Italic</span> <span class="token keyword">extends</span> <span class="token class-name">SettingsEvent</span> <span class="token punctuation">{</span> <span class="token function">Italic</span><span class="token punctuation">(</span>bool payload<span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bước 2: Tạo State
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">part</span> of <span class="token string">'settings_bloc.dart'</span><span class="token punctuation">;</span> <span class="token metadata symbol">@immutable</span> <span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name">SettingsState</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> double sliderFontSize<span class="token punctuation">;</span> <span class="token keyword">final</span> bool isBold<span class="token punctuation">;</span> <span class="token keyword">final</span> bool isItalic<span class="token punctuation">;</span> <span class="token function">SettingsState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>sliderFontSize<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isBold<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isItalic<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> double <span class="token keyword">get</span> fontSize <span class="token operator">=</span><span class="token operator">></span> sliderFontSize <span class="token operator">*</span> <span class="token number">30</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">InitialSettingsState</span> <span class="token keyword">extends</span> <span class="token class-name">SettingsState</span> <span class="token punctuation">{</span> <span class="token function">InitialSettingsState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span>sliderFontSize<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> isBold<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> isItalic<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">NewSettingState</span> <span class="token keyword">extends</span> <span class="token class-name">SettingsState</span> <span class="token punctuation">{</span> NewSettingState<span class="token punctuation">.</span><span class="token function">fromOldSettingState</span><span class="token punctuation">(</span>SettingsState oldState<span class="token punctuation">,</span> <span class="token punctuation">{</span>double sliderFontSize<span class="token punctuation">,</span> bool isBold<span class="token punctuation">,</span> bool isItalic<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">super</span><span class="token punctuation">(</span> sliderFontSize<span class="token punctuation">:</span> sliderFontSize <span class="token operator">?</span><span class="token operator">?</span> oldState<span class="token punctuation">.</span>sliderFontSize<span class="token punctuation">,</span> isBold<span class="token punctuation">:</span> isBold <span class="token operator">?</span><span class="token operator">?</span> oldState<span class="token punctuation">.</span>isBold<span class="token punctuation">,</span> isItalic<span class="token punctuation">:</span> isItalic <span class="token operator">?</span><span class="token operator">?</span> oldState<span class="token punctuation">.</span>isItalic<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Bước 3: Tạo Bloc
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token keyword">import</span> <span class="token string">'dart:async'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:bloc/bloc.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:meta/meta.dart'</span><span class="token punctuation">;</span> <span class="token keyword">part</span> <span class="token string">'settings_event.dart'</span><span class="token punctuation">;</span> <span class="token keyword">part</span> <span class="token string">'settings_state.dart'</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">SettingsBloc</span> <span class="token keyword">extends</span> <span class="token class-name">Bloc</span><span class="token operator"><</span>SettingsEvent<span class="token punctuation">,</span> SettingsState<span class="token operator">></span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> SettingsState <span class="token keyword">get</span> initialState <span class="token operator">=</span><span class="token operator">></span> <span class="token function">InitialSettingsState</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token metadata symbol">@override</span> Stream<span class="token operator"><</span>SettingsState<span class="token operator">></span> <span class="token function">mapEventToState</span><span class="token punctuation">(</span>SettingsEvent event<span class="token punctuation">)</span> <span class="token keyword">async*</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event <span class="token operator">is</span> FontSize<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">yield</span> NewSettingState<span class="token punctuation">.</span><span class="token function">fromOldSettingState</span><span class="token punctuation">(</span>currentState<span class="token punctuation">,</span> sliderFontSize<span class="token punctuation">:</span> event<span class="token punctuation">.</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event <span class="token operator">is</span> Bold<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">yield</span> NewSettingState<span class="token punctuation">.</span><span class="token function">fromOldSettingState</span><span class="token punctuation">(</span>currentState<span class="token punctuation">,</span> isBold<span class="token punctuation">:</span> event<span class="token punctuation">.</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event <span class="token operator">is</span> Italic<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">yield</span> NewSettingState<span class="token punctuation">.</span><span class="token function">fromOldSettingState</span><span class="token punctuation">(</span>currentState<span class="token punctuation">,</span> isItalic<span class="token punctuation">:</span> event<span class="token punctuation">.</span>payload<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bước 4: Tạo BlocProvider trong main.dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/home.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/about.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/settings.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:flutter_bloc/flutter_bloc.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/bloc/settings/settings_bloc.dart'</span><span class="token punctuation">;</span> <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> BlocProvider<span class="token operator"><</span>SettingsBloc<span class="token operator">></span> blocProvider <span class="token operator">=</span> BlocProvider<span class="token operator"><</span>SettingsBloc<span class="token operator">></span><span class="token punctuation">(</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>_<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">SettingsBloc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">runApp</span><span class="token punctuation">(</span>blocProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">MyApp</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">MaterialApp</span><span class="token punctuation">(</span> initialRoute<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span> routes<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token string">'/'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'/about'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">About</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'/settings'</span><span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">Settings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bước 5: Sử dụng state Bloc và dispatch events
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <span class="token keyword">import</span> <span class="token string">'package:flutter/material.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/drawer_menu.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:states_bloc/bloc/settings/settings_bloc.dart'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'package:flutter_bloc/flutter_bloc.dart'</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Settings</span> <span class="token keyword">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span> double _value <span class="token operator">=</span> <span class="token number">0.5</span><span class="token punctuation">;</span> bool isBold <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> bool isItalic <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token metadata symbol">@override</span> Widget <span class="token function">build</span><span class="token punctuation">(</span>BuildContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">final</span> SettingsBloc settingsBloc <span class="token operator">=</span> BlocProvider<span class="token punctuation">.</span>of<span class="token operator"><</span>SettingsBloc<span class="token operator">></span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">Scaffold</span><span class="token punctuation">(</span> appBar<span class="token punctuation">:</span> <span class="token function">AppBar</span><span class="token punctuation">(</span> backgroundColor<span class="token punctuation">:</span> Colors<span class="token punctuation">.</span>teal<span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">'Settings'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> drawer<span class="token punctuation">:</span> <span class="token function">DrawerMenu</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> body<span class="token punctuation">:</span> BlocBuilder<span class="token operator"><</span>SettingsBloc<span class="token punctuation">,</span> SettingsState<span class="token operator">></span><span class="token punctuation">(</span> builder<span class="token punctuation">:</span> <span class="token punctuation">(</span>context<span class="token punctuation">,</span> state<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">Column</span><span class="token punctuation">(</span> crossAxisAlignment<span class="token punctuation">:</span> CrossAxisAlignment<span class="token punctuation">.</span>start<span class="token punctuation">,</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Padding</span><span class="token punctuation">(</span> padding<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>left<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span> top<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Font Size: ${state.fontSize.toInt()}'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span> fontSize<span class="token punctuation">:</span> Theme<span class="token punctuation">.</span><span class="token function">of</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">.</span>textTheme<span class="token punctuation">.</span>headline<span class="token punctuation">.</span>fontSize<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Slider</span><span class="token punctuation">(</span> min<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> value<span class="token punctuation">:</span> state<span class="token punctuation">.</span>sliderFontSize<span class="token punctuation">,</span> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>newValue<span class="token punctuation">)</span> <span class="token punctuation">{</span> settingsBloc<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">FontSize</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Container</span><span class="token punctuation">(</span> margin<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">symmetric</span><span class="token punctuation">(</span>horizontal<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Row</span><span class="token punctuation">(</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Checkbox</span><span class="token punctuation">(</span> value<span class="token punctuation">:</span> state<span class="token punctuation">.</span>isBold<span class="token punctuation">,</span> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>newVal<span class="token punctuation">)</span> <span class="token punctuation">{</span> settingsBloc<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">Bold</span><span class="token punctuation">(</span>newVal<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Bold'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token function">getStyle</span><span class="token punctuation">(</span>state<span class="token punctuation">.</span>isBold<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Container</span><span class="token punctuation">(</span> margin<span class="token punctuation">:</span> EdgeInsets<span class="token punctuation">.</span><span class="token function">symmetric</span><span class="token punctuation">(</span>horizontal<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">,</span> child<span class="token punctuation">:</span> <span class="token function">Row</span><span class="token punctuation">(</span> children<span class="token punctuation">:</span> <span class="token operator"><</span>Widget<span class="token operator">></span><span class="token punctuation">[</span> <span class="token function">Checkbox</span><span class="token punctuation">(</span> value<span class="token punctuation">:</span> state<span class="token punctuation">.</span>isItalic<span class="token punctuation">,</span> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>newVal<span class="token punctuation">)</span> <span class="token punctuation">{</span> settingsBloc<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token function">Italic</span><span class="token punctuation">(</span>newVal<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Text</span><span class="token punctuation">(</span> <span class="token string">'Italic'</span><span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token function">getStyle</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">,</span> state<span class="token punctuation">.</span>isItalic<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> TextStyle <span class="token function">getStyle</span><span class="token punctuation">(</span><span class="token punctuation">[</span>bool isBold <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">,</span> bool isItalic <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span> fontSize<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> fontWeight<span class="token punctuation">:</span> isBold <span class="token operator">?</span> FontWeight<span class="token punctuation">.</span>bold <span class="token punctuation">:</span> FontWeight<span class="token punctuation">.</span>normal<span class="token punctuation">,</span> fontStyle<span class="token punctuation">:</span> isItalic <span class="token operator">?</span> FontStyle<span class="token punctuation">.</span>italic <span class="token punctuation">:</span> FontStyle<span class="token punctuation">.</span>normal<span class="token punctuation">,</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bài viết này mình đã có viết ngắn gọn và dễ hiểu nhất về Bloc và cách sử dụng nó. Cảm ơn các bạn đã đọc bài của mình 
Tham khảo: https://medium.com/@mahmudahsan/how-to-use-bloc-in-flutter-to-manage-state-d0e66c0b47f1