Dart 及 flutter 初體驗
1. 安裝 flutter 及 Dart 2. 執行Dart 3. 關於 Dart 3-1 Dart 的資料類型 3-2 Dart 的常數 3-3 Dart 的函數 3-4 Dart 運算符 3-5 Dart 的流程控制 3-6 Dart 異常處理 3-7 Dart 的物件導向 4. 建立flutter專案 5. package資源 5-1 HTTP請求 5-2 HTTP Client 請求 6. 各種常用技巧 6-1 開權限 6-2 取得螢幕大小+圓角矩形 6-2-1 Container 陰影 6-3 常用文字外觀設定 6-3-1 加入文字邊框 6-4 使用dio來取得API資料 6-5 從遠端抓資料後，塞入可延伸的 ListView 中 6-6 點擊跳出對話框 6-7 用路由切換頁面 6-8 漸層底色 6-8-1 漸層外框按鈕 6-9 中文直書 6-10 讀取 json 檔 6-10-1 json 序列化 6-11 表單 6-11-1 從陣列產生下拉選單的值 6-11-2 設定按鈕顏色 6-12 橫向無限選軸 6-13 父 Widget管理子 Widget的狀態 6-14 加入拍照功能 6-14-1 加入底部彈框選擇拍照或相簿 6-14-2 把 list 抽出整理再塞回 list 中 6-14-3 把 map 抽出整理再塞回 list 中 6-15 加入連結 6-16 倒數計時做某件事 6-17 AppBar 加入底圖或用圖片當標題 7. 常用套件 8. 打包
先編輯 pubspec.yaml，安裝 https://pub.dev/packages/dio ，並執行 pub get
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dio: ^3.0.10
引入該套件
import 'package:dio/dio.dart';
使用之
Future<Response> getCountriesData() async {
Response res;
try {
res = await Dio().get("https://corona.lmao.ninja/v3/covid-19/countries");
if (res.statusCode == 200 && res.data != null) {
return res;
}
} on DioError catch (e) {
print('Dio error: ${e}');
} catch (e) {
print('Other error: ${e}');
}
return res;
// //若Widget已經掛載
// if (mounted) {
// //改變狀態
// setState(() {});
// }
}
或是用state
Map allData = {};
Future<Response> getData() async {
try {
Response res = await Dio().get("https://corona.lmao.ninja/v2/all");
if (res.statusCode == 200 && res.data != null) {
allData = res.data;
// print(res);
}
} on DioError catch (e) {
print('Dio error: ${e}');
} catch (e) {
print('Other error: ${e}');
}
//若Widget已經掛載
if (mounted) {
//改變狀態
setState(() {});
}
}
//State狀態初始化
@override
void initState() {
// 要先做父類的State狀態初始化
super.initState();
//再做自己的事，如取得資料
getData();
}