# Flutter筆記

## 目錄
> :::spoiler 清單
> [TOC]
> :::
---
## IDE
> 可使用Android Studio或Vscode

> 待補充Flutter Project 資料夾結構
> 待安裝Formatter跟Linter

## 概述
### Flutter 樣板物件

CupertinoApp 可以給IOS(較適應IOS樣式) 與按鈕Feedback跟基本樣式相關
MaterialApp可以給Android(較適應Android樣式)

### Flutter主要內容

BuildContext 物件會有系統的資訊，常用在跳頁
Widget Flutter元件萬物皆Widget
State 物件狀態
Scaffold將整個頁面當作畫布
- AppBar(早期Android叫Action Bar)
- Body 主頁
- BottomNavigationBar底部導覽列

### Flutter狀態管理

StatelessWidget 程式碼變數更變畫面不重新渲染
StatefulWidget 程式碼中的任何事件被觸發操成資訊更新，頁面自動重新炫染
InheritedWidget 若告知物件是有可能更變動，系統會自動針對的變動行為物件重新渲染(相較整個物件都是StatefulWidget更能減少重新渲染效能)
onPressed 放入callback function就是點下去觸發某個function

一般自建的Stateful物件 需要額外建立State物件(內容是先前建立的Stateful物件的)

Android Stduio stless + enter 自動建立Stateless樣板
Android Studio stful + enter 自動建立Stateful 樣板

### Flutter Other

Windows Ctrl + Click MacOS Command + Click 可以追蹤物件
required 代表必要資料
Android Studio 會預設使用Android專案進行所以找不到Flutter專案可以切換成Project模式

### Demo

#### Widget相關

PrimaryColor已棄用
現在主要使用ColorScheme來訂製顏色
MaterialColor[]可以設定主題的深淺配色

多用三元表達式lambda來切換元件版面

追蹤ListView滑到哪邊了 設置scrollControll來追蹤itemBuilder為控制物件的內容,SeperatorBuilder控制元件之間的內容
scrollController可以透過間空addListener來達到根據事件來執行某個function

#### 排版相關

由於Flutter會需要很多的Widget專案會長得不好看，建議同學在參數結尾加入逗號可以透過Android Studio自行排版(使用區塊來檢視程式碼)
自行排版MacOS Option Command L
自行排版Windows Ctrl Alt L
Android Studio IDE-> Code > Reformat Code

#### 依賴相關

Pub get 將專案所需套件進行安裝
pub.dev可以找到你所需要的flutter/dart 依賴套件
pubspec.yaml使用indent縮排進行層級分割
flutter pub add http #安裝http套件的指令

HTTP套件可以使用dio套件會比http套件好用

#### 圖表相關

flutter gems網站可以去閱覽許多Flutter的圖表相關套件
themeforest網站可以幫助你進行設計，圖表設計也OK

#### 資料

jsonplaceholder可以幫你產生JSON資料
json 解析可以用dart/converter套件

json_serializable可以幫助dart Model進行JSON序列化(相比converter不需要額外parse)
json_annotation宣告物件可序列化
build_runner json Serialize生成 .g檔案(協助序列化的程式)
三個套件缺一不可
最後就會生成fromJSON方法來將JSON資料變成你需要的model

dynamic 就是Kotlin的any(未定義型別)

### 實作問題

#### 動態圖表作法

初階作法 使用state
進階作法 使用private
- 推薦套件flutter private(Adahh推薦這個)可以寫成MVVM的軟體架構
- flutter_bloc(超多人推薦這個小方塊)

#### Flutter Vs Native App

學習成為APP開發工程師建議雙開Android/IOS選一個 加一個Flutter
建議完成一個簡單的SideProject當練習
才會解決部署Android/IOS的問題 避免競爭短版
jsonplaceholder就可以擔任專案的簡單後端(相簿,TodoList)

Native跟Flutter
以Web而言，Native或多或少會比FlutterApp快
而以Mobile App而言，兩者速度差不了多少

使用SKIA方便進行編譯

Flutter <= Android
Flutter ~= IOS/Web

#### Flutter RWD

沒有相關RWD UI套件
關鍵字flutter adaptive
flutter RWD還是得自己搞定
flutter warp 可以自己根據螢幕尺寸排版
商品開發 多時候是千擇一不太有使用RWD
(但具備RWD介面設計能力也很必要)

#### Hardware Permission

跳窗提示硬體使用權限，Flutter本身有支援的套件
套件可以透過LIKES/POINTS來參考熱度
套件名稱permission_handler

#### Flutter UI Test

業界很少做UI Test
通常是測試API的呼叫
通常是叫測試站的假資料來驗證API是否有問題

#### NFC

目前相關版本過舊，若要使用需要手動處理原始碼

#### Notify

本地端不透過FCM可以進行通知
透過API進行通知->需要自行整合服務或者相關套件

## 使用Vscode開發

> [參照教學🔗](https://ithelp.ithome.com.tw/articles/10295310)

> 建置Android環境
> 安裝flutter

### app專案結構

- android：存放andorid版的程式碼、資源、設定檔
- ios：存放ios版app的程式碼、資源、設定檔
- lib：開發Flutter時主要用到的資料夾，存放所有有關Flutter的資源
- test：測試檔案區
- pubspec.yaml：管理app套件、設定、版本號，即app的設定檔
- pubspec.lock：安裝套件時系統會詳細紀錄下載套件的版本號和來源，**不要**手動更改這個檔案

### 常用指令
- flutter doctor -v
> 檢測當前flutter環境是否正常
- flutter create <app_name>
> 創建新的app project
- flutter pub get
> 相當於npm中的package.json，會根據pubspec.yaml安裝相依套件
- flutter run -d all
> 將當前所有存在的虛擬設備全部喚醒
- Hot reload
> 執行完上個指令後可以選擇此模式(r)，之後改code可以即時看到效果
> 
- flutter run --release
> 以發行模式運作(效能最佳)
- flutter devices
> 查看所有裝置

---
###### tags: `Software Development` `Flutter` `App`