目錄
Flutter & Dart 是甚麼
Flutter是一個支援跨平台開發的框架，它的中心概念就是widget和widget，還有widget。未來就算不願意也會一直看到各種widget
至於Dart是Flutter用的語言。它是一個物件導向的靜態型別語言
開始用Flutter
本文的開發環境是windows，mac的環境建置有些不一樣，本文不適用
環境建置
本文是用VS Code開發
安裝android studio
- 你可能會想用VS Code開發幹嘛還要裝這個，因為
開虛擬機的時候會需要 - 點SDK Manager進去android sdk進去後把check box有標橫線的都裝一裝
- 點AVD Manager(Device Manager)新增虛擬機
- 你可能會想用VS Code開發幹嘛還要裝這個，因為
-
- 解壓縮後
一定要到C槽。設定環境變數使用者變數Path為存放的位置(要指到flutter/bin) - 相容版本的
Dart在安裝Flutter時就會一起被安裝 - 用flutter doctor確認是不是該有的都有
flutter doctor之後根據跑出來的結果裝缺的東西，如果flutter doctor --android-licenses，如果一直出現環境變數JAVA_HOME設定錯誤的話先設成Java的安裝路徑，然後重開cmd看看
flutter doctor確認沒問題Flutter和Flutter sdk就裝好了
另外裝Visul Studio沒裝沒差，不影響開發或虛擬機的使用，tool chain也是 - 解壓縮後
打開VS Code
flutter pub get // 移除套件 flutter pub remove 套件名
(選用) 設定keyStore和key
keyStore是Android的加密系統，避免key在裝置上被挖出來。通常
除非是要發布的app，不然一般練習作是不需要key的
另外同個App只會有1個key。如果今天該App已經有key了，結果你再重新產生1個key，即便在模擬器上可以順利開啟App，但之後發布的時候因為key不符合會無法通過keytool -genkey -v -keystore 要放key的路徑(/Users/User/key.jks) -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key- 照cmd的指示輸入姓名、機關、城市等，到最後會出現keyStore輸入、key輸入，
這兩個東西之後會用在key.properties，一定要記好
- 照cmd的指示輸入姓名、機關、城市等，到最後會出現keyStore輸入、key輸入，
(選用) android資料夾下面新增key.properties，然後照下面打(除了keyAlias以外會依各台電腦而異)
storePassword=keyStore密碼 keyPassword=key密碼 keyAlias=uploadapp storeFile=放key的路徑
開專案
用cmd或vs code終端機打指令，專案名如果是複合字一定要camel case，不可camel case
flutter create 專案名
使用虛擬機
- android studio先設定好虛擬裝置(只有第一次要做)
- vs code打開該專案，shift+ctrl+p打Flutter: Launch Emulator 開虛擬機，打指令
flutter run --dart-define=專案名稱
flutter run --flavor 執行環境 --dart-define=專案名稱.flavor=執行環境
資料夾結構
.pubspec.yaml
相當於Flutter版的package.json
使用第三方package，或要引入媒體檔案時會去修改lib
寫的code都放這邊build
不會使用到的資料夾，裡面存放系統產生的檔案android & iOS
Flutter build出來的與Android、iOS相關的程式碼以及設定
要開啟讀取或寫入權限就要到android裡面的AndroidManifest填寫
widget & material
widget
flutter的中心理念是「使用widget來構築UI」，widget的主要工作是實作build()
當widget被建立時會呼叫build()，繪製widget，build()的回傳值是一個widget
另外當widget的狀態改變的時候，演算法會將widget進行最小程度的重新渲染
import 'package:flutter/material.dart';
void main() {
runApp( // runApp()會把它收到的widget當作root，並且這個widget會覆蓋整個畫面
const Center( // Center和Text都是widget
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr, // 使用textDirection改變文字的方向
),
),
);
}
【Flutter基礎概念與實作】 Day6–Flutter Hello World!
StatelessWidget & StatefulWidget
StatelessWidget
- 在
App初始化之後就不能改變，它是immutable。如果想要改變就得new一個新的StatelessWidget去做更換 - Icon、Text、RaisedButton即屬此類
StatefulWidget
可以在App內無限次的被重繪及更新狀態，需要重繪時可以調用setState()，去標記自己為dirty狀態，為下次更新做準備盡量在越低層級的節點使用，避免過多不必要的rebuild
Basic widgets
30天Flutter手滑系列 - 無狀態與有狀態Widgets (Stateless & Stateful widgets)
Single-child layout widgets & Multi-child layout widgets
Single-child layout widgets
- 只能傳入單一個widget
- Container、SizedBox、Expanded、 Padding、Center即屬此類
Multi-child layout widgets
- 能傳入List
- Row、Column、Stack、 ListView、 GirdView即屬此類
material
可以看到很多檔案都有import material.dart。material.dart是一個components lib，提供了Scaffold, Appbar, IconButton等等的widget
material App的root會是一個MaterialApp widget
如果要使用material icon，pubspec.yaml要設為uses-material-design: true
常用
sdk & package
Dart package上可以找各種Flutter用的套件
// 一堆material UI的widget
import 'package:flutter/material.dart';
// 開發者工具，除錯用
import 'dart:developer';
// 數學運算用
import 'dart:math' as math;
// dart:developer、dart:math都有log()，所以幫其中一個package取別名避免報錯
// 處理非同步用。Future、Stream
import 'dart:async';
功能
- 安裝package
找好套件，然後打到pubspec.yaml
dependencies:
palette_generator:0.3.3
然後下指令
flutter pub get
// 移除套件
flutter pub remove 套件名
如果使用VS Code的話也可以直接按右上角的get packages按鈕
自動縮排
flutter format 檔案路徑hot reload
使用VS Code的話在終端機按r，android studio儲存就會自動跑hot reloadFlutter的console.log()import 'dart:developer'; log('number: $_counter');開發者工具用VS Code的話確認有裝Dart、Flutter，然後按F5打開debug模式就能開啟開發者工具
另外開啟虛擬機後，會在終端機看到一句"An Observatory debugger and profiler on sdk gphone x86 is available at: http://127.0.0.1:2861/T8vp3sHTdic=/"
ctrl+shift+p，再輸入Dart:Open Devtools，選browser，在終端機出現的網址貼到connection，就能打開網頁版的開發者工具
在dart有3個類似console.log()的方法－log()、print()及debugPrint()
log()無長度限制，也不像debugPrint()只能在widget裡運作，但是只能印字串
print()、debugPrint()有長度限制，不限印的東西的型別
