Flutter Workshop Slides

1. Flutter
從入門到入土
Kevin Xheng
@kevinjone25

2. About Me
@idisused
• GDSC Core team
• NCtfU 滑水的負責人
• ideaNCU前任受害者
• 程研社長？
• MGTCC老屁股
• 資管大三的鹹魚

3. Flutter Overview
這是啥
● 由Dart語言撰寫
● 跨平台
● skia render
● google的

4. 在Flutter裡

5. • 不能改變狀態 所有都是final型態
• build 只跑一次
Widget
遍地都是widget
Stateless Widget
Stateful Widget
• 可以在lifetime中改變狀態
• setState會重複觸發Build

6. Three Tree yee?
Widget Tree

7. Three Tree yee?
Element
Tree
兩種基本型態
● ComponentElement
● RenderObjectElement

8. Three Tree yee?
Render Tree
● 每個節點都是RenderObject，定義了如何去渲染
layout、Size……

9. 有 我有聽懂 大概吧......
我相信大家現在是

10. Lab 1. BaseUI

11. 打開你的Flutter Lab 右上角按下去創建新Project
實作開始

12. 照著做 最底下不用填沒關西
創project

13. 讓子彈飛一會
Build Your Project

14. Hot reload, phone simulator
接下來是介紹時間
即時看到你code的回饋 反映在模擬器上

15. 檔案結構
Firectory Structure
寫單元測試的地方
dart file所在地
run android OS
run ios
OS
添加
dependencies

16. import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
title: 'Flutter Tutorial',
home: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('idisused'),
centerTitle: true,
backgroundColor: Colors.grey[900],
elevation: 0,
),
);
}
}
刪掉所有的code
把右邊貼上去
接下來讓我們來看看
‘從頭’開始第一個UI設計
要長右邊這樣

17. //看到一個//AppBar的註解接在他後面
body: Padding(
padding: const EdgeInsets.fromLTRB(30, 40, 30, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Center(
child: CircleAvatar(
backgroundImage:
AssetImage('assets/star.png'),
radius: 50,
),
),
Divider(
height: 80,
thickness: 2,
color: Colors.grey[500]),
],
),
),
剛剛你的頭造好了
所以請把身體接在頭 下方
構造你的身體
應該會跟這個差不多

18. 404 not found
圖片?
你會發現你沒有assets 資料夾
所以你需要創一個

19. 在根目錄創建 如下圖
assets folder 然後我們需要把pubspec.yaml的assets取消註解
或是你想要自己寫也可以

20. 頭貼就完成了
上傳圖片 & Hot reload

21. Divider(height: 80,
thickness: 2,
color: Colors.grey[500]),
##接在上面那個逗點之後
const Text('NAME',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
fontSize: 18,
fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
Text('Yuan-Xheng',
style: TextStyle(
color: Colors.amber[300],
letterSpacing: 2,
fontSize: 25,
fontWeight: FontWeight.bold)),
把右邊皆在剛剛的code下方
用完長下面這樣
加點介紹

22. Divider(height: 80,
thickness: 2,
color: Colors.grey[500]),
##接在上面那個逗點之後
const Text('NAME',
style: TextStyle(
color: Colors.grey,
letterSpacing: 2,
fontSize: 18,
fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
Text('Kirito',
style: TextStyle(
color: Colors.amber[300],
letterSpacing: 2,
fontSize: 25,
fontWeight: FontWeight.bold)),
把右邊皆在剛剛的code下方
用完長下面這樣
加點介紹

23. Text('Yuan-Xheng', style: TextStyle(color:
Colors.amber[300], letterSpacing: 2, fontSize: 25,
fontWeight: FontWeight.bold)),
##接在上面那個逗點之後
const SizedBox(height: 30.0),
const Text('INTRO',
style: TextStyle(
color: Colors.grey, letterSpacing: 2,
fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
Text('我是一條雜魚',
style: TextStyle(color: Colors.amber[300],
letterSpacing: 2,
fontSize: 25, fontWeight: FontWeight.bold)),
const SizedBox(height: 30.0),
把右邊皆在剛剛的code下方
用完長下面這樣
加點介紹cont.

24. const SizedBox(height: 30.0),
##接在上面那個逗點之後
Row(
children: <Widget>[
const Icon(
Icons.email,
color: Colors.grey,
),
const SizedBox(width: 10),
Text(
'fish@example.edu.tw',
style: TextStyle(
color: Colors.grey[300],
fontSize: 18,
letterSpacing: 1,
),
)
],
),
把右邊皆在剛剛的code下方
用完長下面這樣
加個聯絡方式

25. 啊我想要更多Widget

26. 然後......

27. 然後

28. Solutio
n

29. 小憩片刻
等下回來......

30. Lab 2. Easy Weather App

31. 先幫我去API平台登入

32. 按取得授權碼 然後放著
授權碼會出現在這裡

33. 先再來創個project
一樣的步驟

34. 長的像右邊那樣
新增資料夾和檔案
● Models 資料夾
● pages資料夾
● services資料夾
● home.dart
● weather_response.dart
● loading.dart
● weather.dart

35. 報error沒關西 在main.dart裡加
新增路由
import 'pages/home.dart';
import 'pages/loading.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => const
Loading(),
//'/home': (context) => const
Home(),
},
),
);
}

36. 新增在loading.dart
記得在pubspec.yaml裡加flutter spinkit
新增stateful widget
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class Loading extends StatefulWidget {
const Loading({Key? key}) : super(key: key);
@override
State<Loading> createState() => _LoadingState();
}
class _LoadingState extends State<Loading> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return const Scaffold(
backgroundColor: Colors.black,
body: Center(
child: SpinKitRipple(
color: Colors.white,
size: 100.0,
),
));
}
}

37. 接下來步驟比較複雜
如果有串接第三方API經驗的同學可以躺平

38. 記得在pubspec.yaml裡加http
然後把Auth Key換成你剛剛拿到的API 授權碼!
然後把Auth Key換成你剛剛拿到的API 授權碼!
然後把Auth Key換成你剛剛拿到的API 授權碼!
然後package:[你的app名稱]/models
因為很重要所以講三次
更改weather.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'dart:convert';
import 'package:weatherapp/models/weather_response.dart';
class Weather {
String firstStartTime = '';
String firstEndTime = '';
String firstProbability = '';
String secondStartTime = '';
String location = '';
Future<void> getWeather() async {
try {
Response response = await get(Uri.parse(
"https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-
D0047-
005?Authorization=[AuthKey]&format=JSON&locationName=%E4%B8%AD%E5%A3
%A2%E5%8D%80&elementName=PoP6h"));
WeatherResponse weatherResponse =
WeatherResponse.fromJson(json.decode(response.body));
location =
weatherResponse.records.locations[0].location[0].locationName;
firstStartTime = weatherResponse
.records.locations[0].location[0].weatherElement[0].time[0].startTim
e
.substring(11, 16);
firstProbability =
weatherResponse.records.locations[0].location[0]
.weatherElement[0].time[0].elementValue[0].value;
secondStartTime = weatherResponse
.records.locations[0].location[0].weatherElement[0].time[1].startTim
e
.substring(11, 16);
} catch (e) {
debugPrint('Error: $e');
location = '無法取得資料';
}
}
}

39. 然後把API網址貼到新網頁上 會出現下圖 把他們全部copy起來
更改weather_response.dart
https://www.jsontodart.in/
到上面這個網址 把json貼上去 轉成dart 貼到weather_response.dart
然後把AutoGenerate的˙class改成WeatherResponse

40. 把code貼在Loading State的Widget裡
記得要import weather.dart
更改loading.dart
class _LoadingState extends State<Loading> {
##接在上面那行之後
String location = 'loading';
void setWeather() async {
Weather instance = Weather();
await instance.getWeather();
Navigator.pushReplacementNamed(context, '/home',
arguments: {
'location': instance.location,
'firstStartTime': instance.firstStartTime,
'firstProbability': instance.firstProbability,
'secondStartTime': instance.secondStartTime,
});
}
//放在init state下方
WidgetsBinding.instance!.addPostFrameCallback((_) =>
setWeather());
import '../services/weather.dart';

41. 先貼一部份
好長好長
更改home.dart
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
Map<String, dynamic> data = {};
@override
Widget build(BuildContext context) {
data = Map<String, dynamic>.from(
(ModalRoute.of(context)?.settings.arguments ?? {})
as Map<dynamic, dynamic>);
bool nightCondition = DateTime.now().hour > 18 && DateTime.now().hour < 8;
return Scaffold();
}
}

42. 接下來建構主體
把code貼在Scaffold裡
更改home.dart
backgroundColor: nightCondition ? Colors.grey[200] : Colors.grey[900],
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 120, 0, 0),
child: Column(
children: <Widget>[
const SizedBox(height: 50),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(data['location'],
style: TextStyle(
fontSize: 28,
letterSpacing: 2,
color:
!nightCondition ? Colors.grey[200] : Colors.black,
))
],
),
const SizedBox(height: 30),
Text(
data['firstStartTime'] + '-' + data['secondStartTime'],
style: TextStyle(
fontSize: 45,
color:
!nightCondition ? Colors.grey[200] : Colors.grey[900],
),
),
const SizedBox(height: 10),
Icon(
data['firstProbability'] == 0
? Icons.light_mode
: Icons.beach_access,
size: 50,
color: data['firstProbability'] == 0
? Colors.amber
: Colors.blue),
const SizedBox(height: 15),
Text(data['firstProbability'] + '%',
style: TextStyle(
fontSize: 35,
letterSpacing: 2,
color:
!nightCondition ? Colors.grey[200] : Colors.grey[900],
)),
],
),
),
)

43. 把main.dart的註解拿掉
你就會看到我們未來六小時的天氣預報
取消註解

44. 感謝各位的聆聽
<(_ _)>

45. 回饋表單