目錄

• 目錄
  • Flutter & Dart 是甚麼
  • 開始用Flutter
    • 環境建置
    • 開專案
    • 使用虛擬機
    • 資料夾結構
  • widget & material
    • widget
    • StatelessWidget & StatefulWidget
    • Single-child layout widgets & Multi-child layout widgets
    • material
  • 常用
    • sdk & package
    • 功能

Flutter & Dart 是甚麼

Flutter是一個支援跨平台開發的框架，它的中心概念就是widget和widget，還有widget。未來就算不願意也會一直看到各種widget

至於Dart是Flutter用的語言。它是一個物件導向的靜態型別語言

開始用Flutter

本文的開發環境是windows，mac的環境建置有些不一樣，本文不適用

環境建置

本文是用VS Code開發

1. 安裝android studio

   • 你可能會想用VS Code開發幹嘛還要裝這個，因為開虛擬機的時候會需要
   • 點SDK Manager進去android sdk進去後把check box有標橫線的都裝一裝
   • 點AVD Manager(Device Manager)新增虛擬機

2. 安裝Fultter sdk

   • 解壓縮後一定要到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也是

3. 打開VS Code

   • 安裝Dart、Flutter
   • 把pubspec.yaml的套件都裝好

    flutter pub get
   
    // 移除套件
    flutter pub remove 套件名
   

1. (選用) 設定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，一定要記好

   keyStore
   使用Keystore加密密碼

2. (選用) android資料夾下面新增key.properties，然後照下面打(除了keyAlias以外會依各台電腦而異)

    storePassword=keyStore密碼
    keyPassword=key密碼
    keyAlias=uploadapp
    storeFile=放key的路徑
   

   Write your first Flutter app, part 1

開專案

用cmd或vs code終端機打指令，專案名如果是複合字一定要camel case，不可camel case

flutter create 專案名

使用虛擬機

1. android studio先設定好虛擬裝置(只有第一次要做)
2. 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

material App的root會是一個MaterialApp widget

Using Material Components

如果要使用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';

Flutter sdk
Flutter常用package

功能

• 安裝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 reload

• Flutter的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()有長度限制，不限印的東西的型別

  Launch DevTools
  How to log data to the Flutter console?