Flutter 是什麼？可以吃嗎？ 採用 Flutter 有什麼好處？一個新開的專案，我要用原生好還是用 Flutter 呢？ 這次講題會快速帶過 Flutter 近期改版、關鍵概念、一些介紹常用的元件 與 經驗分享 希望給大家一個參考跟指引 #devfest2020 #gdgtaipei

1. Flutter 是什麼？
⽤ Flutter 會省到時間嗎？
Johnny Sung

3. •Flutter 是什麼？ Dart 語⾔？
•Flutter 畫⾯架構介紹
•Flutter ⼀些常⽤的元件
•⽤ Flutter 開發有什麼要注意的？
•我該⽤原⽣開發還是 Flutter 開發？
•結論
⼤綱

4. Flutter is an open-source UI software development
kit created by Google. It is used to develop applications
for Android, iOS, Linux, Mac, Windows, Google Fuchsia[4],
and the web from a single codebase[5].
- Wikipedia
https://en.wikipedia.org/wiki/Flutter_(software)

5. Dart is a client-optimized programming language
for apps on multiple platforms. It is developed
by Google and is used to build mobile, desktop, server, and
web applications.
Dart is an object-oriented, class-based, garbage-
collected language with C-style syntax. Dart can compile to
either native code or JavaScript. It
supports interfaces, mixins, abstract
classes, reified generics, and type inference.
- Wikipedia
https://en.wikipedia.org/wiki/Dart_(programming_language)

6. Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino
https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.g70d668005_2_22

7. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•底線開頭為 private
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Dart 語⾔特性

8. Flutter 畫⾯架構介紹

9. iOS Plug-ins
Android Plug-ins
Flutter APIs
(UI + Networking)

10. 資料夾結構

11. •StatefulWidget
•StatelessWidget
Flutter Widget

12. import 'package:flutter/material.dart';
void main() => runApp(HelloWorldApp());
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Hello World App'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
StatelessWidget 範例

13. import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
StatefulWidget 範例

14. StatelessWidget 範例
class MyStateLessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Implement widgets...
return Container();
}
}

15. class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(...);
}
}
StatefulWidget 範例

16. @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
StatefulWidget 範例

17. StatefulWidget 範例

19. •Container
•SizedBox
•Row / Column
•Text
•Button
•...
常⽤ Flutter Widget
（呃...實在太多了）

20. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

21. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

22. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

23. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

24. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

25. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

26. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

27. •強型別，需事先宣告（類似 Java, C#）
•物件導向
•async await（類似 C#, JavaScript）
•Future / Promise (Callback chaining)（類似
JavaScript）
•Stream
Material Components

28. vs.
...
常⽤ Flutter Widget
Material
MaterialApp
Scaffold
CircularProgressIndicator
MaterialButton
AlertDialog
BottomSheet
Cupertino
CupertinoApp
CupertinoPageScaffold
CupertinoActivityIndicator
CupertinoButton
...
CupertinoDialog
CupertinoActionSheet

29. 在 Flutter 的世界裡...

30. 萬物皆 Widget
在對應的狀態產⽣對應的畫⾯

31. Lifecycle

32. StatelessWidget
constructor
build
A single StatelessWidget can build in many
different BuildContexts
StatefulWidget
constructor
createState
A StatefulWidget creates a new State object for
each BuildContext
Widget Lifecycle
https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.g70d668005_2_22

33. (created)
initState
dispose
(dirty)
build
(clean)
didUpdateConfig setState
(defunct)
A State<T> object can rebuild if ...
... it receives a new configuration … it changes its internal state
https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit#slide=id.g70d668005_2_22
State<T> Lifecycle

34. (created)
initState
dispose
(dirty)
build
(clean)
didUpdateConfig setState
(defunct)
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialButton(onPressed: () {
setState(() {
// Edit value ...
});
});
}
}

35. Future

36. https://money.udn.com/money/story/5648/4705551

37. https://www.cna.com.tw/news/firstnews/202007090191.aspx

38. Future
fetchData().then((result) {
print(result);
}).catchError((e) {
print(e);
});
Future<String> fetchData() async {
return Future.delayed(Duration(seconds: 2), () {
return 'data';
});
} 宣告
使⽤

39. Future
Future<String> fetchDataA() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataA';
});
}

40. Future<String> fetchDataA() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataA';
});
}
Future<String> fetchDataB() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataB';
});
return 'dataB';
}
Future<String> fetchDataC() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataC';
});
}
Future
宣告

41. Future
fetchDataA().then((dataA) {
print(dataA);
return fetchDataB();
}).then((dataB) {
print(dataB);
return fetchDataC();
}).then((dataC) {
print(dataC);
}).catchError((error) {
print(error);
});
Future<String> fetchDataA() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataA';
});
}
Future<String> fetchDataB() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataB';
});
return 'dataB';
}
Future<String> fetchDataC() async {
return Future.delayed(Duration(seconds: 2), () {
return 'dataC';
});
}
Promise chain 寫法

42. •Future 語法
•async / await 語法
同步？⾮同步？

43. 同步？⾮同步？
Future<String> foo() async {
String dataA = await fetchDataA();
String dataB = await fetchDataB();
String dataC = await fetchDataC();
return dataA + dataB + dataC;
}
Future.wait([fetchDataA(), fetchDataB(), fetchDataC()]).then((value) {
print(value[0]); // dataA
print(value[1]); // dataB
print(value[2]); // dataC
}).catchError((e) {
print(e);
}); ⾮同步寫法
同步寫法

44. Future<String> fetchData() async {
return Future.delayed(Duration(seconds: 2), () {
return 'data';
});
}
import 'package:http/http.dart' as http;
Future<String> fetchData() async {
final response = await http.get('https://example.com/');
return response.body;
}
Http package

45. FutureBuilder

46. 萬物皆 Widget
在對應的狀態產⽣對應的畫⾯

47. •在對應的 狀態 產⽣畫⾯
•狀態
•初始狀態
•載⼊中
•載⼊完成
•有錯誤
FutureBuilder

48. FutureBuilder
FutureBuilder<String>(
future: fetchData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
// Loaded complete!
return Container();
} else if (snapshot.hasError) {
// Loaded with error :(
return Container();
} else {
// Loading...
return Container();
}
},
);

49. Stream

50. Stream
Stream<int> sampleOfStream() async* {
yield 1;
yield 2;
yield 3;
yield 4;
// Do something
await Future.delayed(Duration(seconds: 3));
yield 5;
}

51. Stream
Stream<MyState> sampleOfFetch() async* {
yield MyLoadingState();
// Do fetch APIs
MyResponse response = await fetchAPI();
yield MyLoadedState();
}

52. Bloc

54. •製作定義 Event
•根據對應的 Event 或 State 產⽣資料
Bloc

55. class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
/// Add 1 to the current state.
void increment() => emit(state + 1);
/// Subtract 1 from the current state.
void decrement() => emit(state - 1);
}
Cubit

56. Cubit
class MyCounter extends StatefulWidget {
@override
_MyCounterState createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
CounterCubit _cubit = CounterCubit();
@override
void initState() {
super.initState();
_cubit = CounterCubit();
}
@override
void dispose() {
_cubit.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
// ...
}
}

57. Cubit
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
BlocBuilder<CounterCubit, int>(
cubit: _cubit,
builder: (context, state) {
return Text('Counter value: $state');
}),
MaterialButton(
child: Text('Increment'),
onPressed: () {
_cubit.increment();
}),
MaterialButton(
child: Text('Decrement'),
onPressed: () {
_cubit.decrement();
}),
],
),
);
}

58. abstract class DataBlocState {}
class DataBlocInitialState extends DataBlocState {}
class DataBlocLoadingState extends DataBlocState {}
class DataBlocLoadedState extends DataBlocState {
final String result;
DataBlocLoadedState({this.result});
}
class DataBlocErrorState extends DataBlocState {
final Error error;
DataBlocErrorState(this.error);
}
初始的狀態
載⼊中的狀態
載⼊完成的狀態
錯誤的狀態
abstract class MyBlocEvent {}
class MyBlocLoadEvent extends MyBlocEvent {}

59. class MyDataBloc extends Bloc<MyBlocEvent, DataBlocState> {
MyDataBloc() : super(DataBlocInitialState());
@override
Stream<DataBlocState> mapEventToState(MyBlocEvent event) async* {
if (state is DataBlocLoadingState) {
return;
}
try {
if (event is MyBlocLoadEvent) {
yield DataBlocLoadingState();
String result = await fetchData();
yield DataBlocLoadedState(result: result);
}
} catch (e) {
yield DataBlocErrorState(e);
}
}
}
Bloc

60. class MyBlocWidget extends StatefulWidget {
@override
_MyBlocWidgetState createState() => _MyBlocWidgetState();
}
class _MyBlocWidgetState extends State<MyBlocWidget> {
MyDataBloc _bloc;
@override
void initState() {
super.initState();
_bloc = MyDataBloc();
}
@override
void dispose() {
_bloc.close();
super.dispose();
}
@override
Widget build(BuildContext context) {
// ...
}
}
Bloc

61. Bloc
@override
Widget build(BuildContext context) {
return BlocBuilder<MyDataBloc, DataBlocState>(
cubit: _bloc,
builder: (context, state) {
if (state is DataBlocLoadingState) {
return CircularProgressIndicator();
} else if (state is DataBlocErrorState) {
return Text('Error: ' + state.error.toString());
} else if (state is DataBlocLoadedState) {
return Text("Complete! " + state.result);
}
return MaterialButton(onPressed: () {
_bloc.add(MyBlocLoadEvent());
});
});
}

62. 個⼈⼼得

63. •enum ⽀援度不佳
•沒有 null safety（類似 Java, C#）
•Method extensions ⽀援度不佳
Dart 語⾔⼩缺點

64. https://dart.dev/guides/language/language-tour#enumerated-types

65. •enum ⽀援度不佳
•沒有 null safety（類似 Java, C#）
•Method extensions ⽀援度不佳
Dart 語⾔⼩缺點

66. 🥳
https://dart.dev/null-safety/understanding-null-safety

67. Null safety

68. 調整 pubspec.yaml
新增 analysis_options.yaml

69. $ flutter clean
$ flutter packages pub upgrade
$ flutter pub run build_runner build
https://stackoverflow.com/a/63328916/3663980
調整 pubspec.yaml
執⾏結果

70. Int? Int
有問號 沒有問號
變數可以為空值 變數不可為空值

71. var number: Int? = null
var number2: Int = 1
變數名稱 型態 值
變數名稱 型態 值
有問號
沒有問號
Kotlin

72. int number2 = 1;
變數名稱型態 值
變數名稱型態
值
有問號
沒有問號
int? number = null;
Dart

73. •enum ⽀援度不佳
•沒有 null safety（類似 Java, C#）
•Method extensions ⽀援度不佳
Dart 語⾔⼩缺點
Added in Dart 2.9

74. Extension Methods
extension NumberParsing on String {
int parseInt() {
return int.parse(this);
}
}
var value = '200'.parseInt();
print(value);

75. https://dart.dev/guides/language/extension-methods

76. •enum ⽀援度不佳
•沒有 null safety（類似 Java, C#）
•Method extensions ⽀援度不佳
Dart 語⾔⼩缺點
Added in Dart 2.9
Added in Dart 2.7

77. Flutter 套件
https://pub.dev/

78. environment:
sdk: ">=2.11.0-9.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
fluttertoast: ^7.1.1
http: ^0.12.0+2
bloc: ^6.0.3
flutter_bloc: ^6.0.5
cached_network_image: ^2.3.2+1
shared_preferences: ^0.5.1+2
firebase_core: ^0.5.0
firebase_analytics: ^6.0.1
firebase_admob: ^0.10.0+1
flutter_svg: ^0.19.0
url_launcher: ^5.4.1
url_launcher_macos: 0.0.1+8
provider: ^4.1.3
flutter_slidable: ^0.5.7
uuid: ^2.2.2
cupertino_icons: ^1.0.0
Flutter 套件
（列出其⼀專案的 pubspec.yaml 為例）

79. WebView

80. •Flutter 官網
• https://flutter.dev/
•Flutter 中⽂翻譯
• https://flutter.cn/docs
Flutter 學習資源

81. ⽤ Flutter 會省到時間嗎？

82. 熟悉你的⼯具，熟能⽣巧
就會省到時間

83. Q & A