Flutter 是什么？

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。
以上是官方的說法，從我實際的使用體驗來看，官方說法還算中肯。以下是我個人的一些理解
一、 Flutter 是谷歌的，有谷歌爸爸在，心里稍微有底了，不會搞著搞著就沒人維護(hù)了。
二、是一個移動 UI 框架，這里的重點是 UI ，F(xiàn)lutter 的優(yōu)勢在于搭建 UI 界面，舉個簡單的例子：

import 'package:flutter/material.dart'; // 安卓樣式控件庫

void main() => runApp(new MyApp()); // 入口

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) { // 頁面
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold( 
        appBar: new AppBar( // 導(dǎo)航欄
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

以上是一個可以跑在 iOS 和 安卓和其他提供支持的平臺的，hello world 界面，簡單幾行代碼，就把一個功能界面繪制出來了。雖然看起來結(jié)構(gòu)簡單了，但是在構(gòu)建復(fù)雜頁面的時候，怎么組織代碼，同樣需要好好斟酌，所以對各平臺的熟手來說，這個算不了什么優(yōu)勢，F(xiàn)lutter 的優(yōu)勢在于，他提供 JIT 和 AOT 兩種編譯模式，在開發(fā)階段，我們需要頻繁的編譯運(yùn)行代碼，然后才能看到代碼調(diào)整過后的效果，這個過程消耗了大量時間，調(diào)試 Flutter 項目的時候，使用 JIT 模式編譯代碼，可以熱重載，能大幅提升開發(fā)效率。出包的時候，選用 AOT 模式，能獲得接近原生效果。
三、總體來說，F(xiàn)lutter 和 已有項目的混編效果還不錯，F(xiàn)lutter 以 controller （iOS），View、fragment（Android）對象的形式存在于已有的項目中，可以自由的組合，F(xiàn)lutter 模塊和原生項目可以通過 Flutter 提供的 channel 通信，通過 channel 可以實現(xiàn)方法調(diào)用，通知等功能。
四、Flutter 完全開源，所有源碼都能在 github 找到，Flutter源碼。
四、業(yè)界案例
目前運(yùn)用 Flutter 框架在實戰(zhàn)中的項目，我已知的運(yùn)用面最大的是閑魚，從實際效果來看，F(xiàn)lutter 在移動端的運(yùn)用的實際效果很不錯，各種復(fù)雜頁面的流暢度可以媲美原生效果。
閑魚技術(shù)博客

Flutter 怎么用

一、環(huán)境配置

• 下載 Flutter 到本地（zip or git）并解壓
• 打開(或創(chuàng)建) $HOME/.bash_profile.
• 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]為克隆Flutter的git repo的路徑:

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/code”

• 在終端中運(yùn)行 echo $PATH ，檢測是否添加成功
• 在終端運(yùn)行 flutter doctor 檢測設(shè)置，并更加提示補(bǔ)充相關(guān)配置
  在macOS上搭建Flutter開發(fā)環(huán)境

二、IDE

VSCode(輕量級編輯器，支持Flutter運(yùn)行和調(diào)試.)

配置

1. 安裝 vscode
2. 啟動 VS Code
3. 調(diào)用 View>Command Palette…（command+shift+p）
4. 輸入 ‘install’, 然后選擇 Extensions: Install Extension action
5. 在搜索框輸入 flutter , 在搜索結(jié)果列表中選擇 ‘Flutter’, 然后點擊 Install
6. 選擇 ‘OK’ 重新啟動 VS Code

創(chuàng)建應(yīng)用

1. 啟動 VS Code
2. 調(diào)用 View>Command Palette…
3. 輸入 ‘flutter’, 然后選擇 ‘Flutter: New Project’ action
4. 輸入 Project 名稱 (如myapp), 然后按回車鍵
5. 指定放置項目的位置，然后按藍(lán)色的確定按鈕
6. 等待項目創(chuàng)建繼續(xù)，并顯示main.dart文件

運(yùn)行應(yīng)用

1. 按 F5 鍵或調(diào)用Debug>Start Debugging或者再vscode自帶的終端輸入 flutter run
2. 等待應(yīng)用程序啟動
3. 如果一切正常，在應(yīng)用程序建成功后，您應(yīng)該在您的設(shè)備或模擬器上看到應(yīng)用程序；

熱重載

1. 通過終端運(yùn)行的工程，在完成修改后，在終端輸入‘r’，即可。
2. 通過IDE運(yùn)行的項目，調(diào)用 Save (cmd-s / ctrl-s), 或者點擊 熱重載按鈕 (綠色圓形箭頭按鈕)。

Android Studio

安裝Flutter和Dart插件

Flutter插件： 支持Flutter開發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等).
Dart插件： 提供代碼分析 (輸入代碼時進(jìn)行驗證、代碼補(bǔ)全等).

1. 打開插件首選項 (Preferences>Plugins on macOS,
2. File>Settings>Plugins on Windows & Linux).
3. 選擇 Browse repositories…, 選擇 Flutter 插件并點擊 install.
4. 重啟Android Studio后插件生效.

創(chuàng)建應(yīng)用

1. 選擇 File>New Flutter Project
2. 選擇 Flutter application 作為 project 類型, 然后點擊 Next
3. 輸入項目名稱 (如 myapp), 然后點擊 Next
4. 點擊 Finish
5. 等待Android Studio安裝SDK并創(chuàng)建項目.

上述命令創(chuàng)建一個Flutter項目，項目名為myapp，其中包含一個使用Material 組件的簡單演示應(yīng)用程序。

在項目目錄中，您應(yīng)用程序的代碼位于 lib/main.dart.

運(yùn)行應(yīng)用

1. 定位到Android Studio 工具欄:

   
   

2. 在 target selector 中, 選擇一個運(yùn)行該應(yīng)用的Android設(shè)備. 如果沒有列出可用，請選擇 Tools>Android>AVD Manager 并在那里創(chuàng)建一個

3. 在工具欄中點擊 Run圖標(biāo), 或者調(diào)用菜單項 Run > Run.

4. 如果一切正常, 您應(yīng)該在您的設(shè)備或模擬器上會看到啟動的應(yīng)用程序；

熱重載
調(diào)用 Save All (cmd-s / ctrl-s), 或點擊 熱重載按鈕 (帶有閃電??圖標(biāo)的按鈕)。

Terminal + 編輯器

創(chuàng)建新的應(yīng)用

1. 使用 flutter create 命令創(chuàng)建一個project:

$ flutter create myapp
$ cd myapp

上述命令創(chuàng)建一個Flutte讓項目，項目名為myapp，其中包含一個使用Material 組件的簡單演示應(yīng)用程序。

在項目目錄中，您的應(yīng)用程序的代碼位于 lib/main.dart.

運(yùn)行應(yīng)用程序

• 檢查Android設(shè)備是否在運(yùn)行。如果沒有顯示, 請參照 設(shè)置.

$ flutter devices

• 運(yùn)行 flutter run 命令來運(yùn)行應(yīng)用程序:

$ flutter run

• 如果一切正常，在應(yīng)用程序建成功后，您應(yīng)該在您的設(shè)備或模擬器上看到應(yīng)用程序。

三、項目目錄結(jié)構(gòu)

• 相關(guān)平臺模塊，包含一個完整的對應(yīng)平臺工程，運(yùn)行到真機(jī)或者打包，需要進(jìn)行一些必要配置，比如iOS的證書配置，Android的gradle配置。

images

• 自己創(chuàng)建的，存放圖片資源的文件夾，在項目中使用圖片資源，需要在 pubspec.yaml 文件中添加依賴

flutter:
  uses-material-design: true
  assets:                   // 新增項
  - images/feed_comment.png // 新增項

build

• 調(diào)試過程中，生成的文件

lib

• 存放 dart 語言編寫的代碼，即 Flutter 項目的核心代碼目錄。

pubspec.yaml

• 配置依賴項的文件，比如配置遠(yuǎn)程pub倉庫的依賴庫，或者指定本地資源（圖片、字體、音頻、視頻等）。

Flutter 與原生對比

Flutter和Android原生應(yīng)用性能對比