Flutter環境配置 + VSCode/AndroidStudio + 基礎知識瞭解

里程碑信息

• 2014.10 - 原名 sky 在github 上開源
• 2015.10 - 改名爲 Flutter, 使用 Dart語言開發，Dart 是Google於2011年推出的新的計算機編程語言
• 2017.05 - Google I/O 正式發佈Flutter
• 2018.02 - Flutter推出 第一個 Beta版本(測試版本)
• 2018.6.21 - Google 發佈 Flutter 的release預覽版(最終測試版)
• 2019.02 - Flutter1.2發佈增長對web的支持
• 2019.5.7 - 增長Flutter for Web，將Flutter的Dart代碼直接編譯爲JavaScript, 就是用Dart 編譯了 一個 能夠再web端 執行的 程序。Flutter 正式成爲一個全平臺的框架。

Flutter支持的端

• Mobile端已經較爲成熟，體驗較於React Native 要好一些，具體緣由待探究。
• Web 端演進中
• Desktop(桌面端)： 雖然不適用於生產環境，可是底層引擎已經基本成型，有待進一步整合。
• Embedded(嵌入智能設備)

學習Flutter須要哪些必備知識？

• Dart 語言基礎
• Flutter對熟悉面向對象概念(類、方法、變量)和 命令式編程概念(循環、條件)經驗者相對容易入門。

Flutter特色

• 快速開發
• 性能優越
• 富有表現力的精美UI
• Everything is Widget

Flutter架構

Flutter原理

Flutter for Web架構

對比Flutter,引擎層變了

下載安裝Flutter + 並執行demo

• 第一步 --- 下載頁選擇下載

• 第二步--- 更新環境變量

終端窗口臨時更新環境變量
    export PATH=`pwd`/flutter/bin:$PATH
    
    永久更新環境變量
    export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶須要設置
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶須要設置
    export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
    
    
    1. 將  source ~/.bash_profile
       注入  ~/.zshrc 文件中
       
    2.將
        export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
        export PUB_HOSTED_URL=https://pub.flutter-io.cn
        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
      注入  ~/.bash_profile 文件中
      (PATH_TO_FLUTTER_GIT_DIRECTORY 替換成 本機的 flutter文件路徑)
      
    3.最後執行 flutter doctor
複製代碼

AndroidStudio

• 第三步 --- 下載AndroidStudio 並安裝插件 Flutter Dart
• 第四步 --- 經過 Android Stadio 的 File => New => New Flutter Project 去新建項目demo
• 第五步 --- 下載SDK 並 執行demo

  

VsCode

• 第三步 --- 安裝插件 Flutter Dart
• 第四步 --- /cmd + /shirft + p => flutter new project
• 第五步 --- 打開調試工具 並執行