不管是國內還是國外，用 Flutter 進行開發的廠越來越多，flutter 強勢進入移動開發的視野。今天就來分享一下Flutter 快速上手的方法！

近兩年Flutter的熱度不斷提升，無論在阿里還是外部公司，參與Flutter生態建設的人越來越多。Flutter作為跨端的UI框架，未來也有很大的可能像Rax一樣作為集團內營銷活動頁面搭建的DSL。所以目前學習Flutter，參與Flutter生態建設是一件時髦且有價值的事情。

（如果你需要Flutter學習資料可以點擊下方連結領取或者私信留言~）

↓↓↓↓↓↓↓↓

精選Android架構視頻+學習PDF+項目源碼筆記+面試衝刺文檔

Flutter是什麼

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。簡單來說，Flutter是一款移動應用程式SDK，包含框架、控制項和一些工具，可以用一套代碼同時構建Android和iOS應用，並且性能可以達到原生應用一樣的性能。

配置開發環境

Flutter開發可以在macOS，Linux或Windows上完成。雖然您可以在Flutter工具鏈中使用任何編輯器，但IntelliJ IDEA，Android Studio和Visual Studio Code的IDE插件可以簡化開發工作。

• 下載flutter SDK。
• 將flutter的bin目錄添加到path中。
• 執行flutter doctor命令，他會安裝flutter框架，包括dart，而且提示你任何其他需要安裝的依賴。
• 安裝其他依賴。
• 在IDE中安裝flutter插件。

（如果你需要Flutter學習資料可以點擊下方連結領取或者私信留言~）

↓↓↓↓↓↓↓↓

精選Android架構視頻+學習PDF+項目源碼筆記+面試衝刺文檔

體驗

Android Studio (為Flutter提供完整的IDE體驗)

創建應用

• 選擇 File>New Flutter Project
• 選擇 Flutter application 作為 project 類型, 然後點擊 Next
• 輸入項目名稱 (如 myapp), 然後點擊 Next
• 點擊 Finish
• 等待Android Studio安裝SDK並創建項目. 在項目目錄中，應用程式的代碼位於 lib/main.dart.

運行應用程式

定位到Android Studio 工具欄:

• 在 target selector 中, 選擇一個運行該應用的Android設備. 如果沒有列出可用，請選擇 Tools>Android>AVD Manager 並在那裡創建一個
• 在工具欄中點擊 Run圖標, 或者調用菜單項 Run > Run.

VS Code(輕量級編輯器，支持Flutter運行和調試)

創建應用

• 啟動 VS Code.
• 調用 View>Command Palette…
• 輸入 『flutter』, 然後選擇 『Flutter: New Project』 action
• 輸入 Project 名稱 (如myapp), 然後按回車鍵
• 指定放置項目的位置，然後按藍色的確定按鈕
• 等待項目創建繼續，並顯示main.dart文件 在項目目錄中，應用程式的代碼位於 lib/main.dart.

運行應用程式

• 確保在VS Code的右下角選擇了目標設備
• 按 F5 鍵或調用Debug>Start Debugging
• 等待應用程式啟動

Terminal + 編輯器

創建應用

1、使用 flutter create 命令創建一個project:

$ flutter create myapp
$ cd myapp

運行應用程式

檢查Android設備是否在運行。

$ flutter devices

運行 flutter run 命令來運行應用程式:

$ flutter run

如果一切正常, 您應該在您的設備或模擬器上能看到啟動的應用程式:

項目結構

┬
└ projectname
  ┬
  ├ android      - Android部分的工程文件
  ├ build        - 項目的構建輸出目錄
  ├ ios          - iOS部分的工程文件
  ├ lib          - 項目中的Dart源文件
    ┬
    └ src        - 包含其他源文件
    └ main.dart  - 自動生成的項目入口文件，類似RN的index.js文件
  ├ test         - 測試相關文件
  └ pubspec.yaml - 項目依賴配置文件類似於RN的 package.json

如何添加Flutter項目所需的依賴？

• 在Android中，你可以在Gradle文件來添加依賴項；
• 在 iOS 中，通常把依賴添加到 Podfile 中；
• 在RN中，通常是由package.json來管理項目依賴；
  Flutter 使用 Dart 構建系統和 Pub 包管理器來處理依賴。這些工具將Android 和 iOS native 包裝應用程式的構建委派給相應的構建系統。

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3

在Flutter中，雖然在Flutter項目中的Android文件夾下有Gradle文件，但只有在添加平台相關所需的依賴關係時才使用這些文件。否則，應該使用pubspec.yaml來聲明用於Flutter的外部依賴項。

iOS也是一樣，如果你的 Flutter 工程中的 iOS 文件夾中有 Podfile，請僅在添加iOS平台相關的依賴時使用它。否則，應該使用pubspec.yaml來聲明用於Flutter的外部依賴項。

如何歸檔圖片資源以及如何處理不同解析度

• 雖然Android將resources 和 assets 區別對待，但在Flutter中它們都會被作為assets處理， 所有存在於Android上res/drawable- *文件夾中的資源都放在Flutter的assets文件夾中。
• 與Android類似，iOS 同樣將 images 和 assets 作為不同的東西，而 Flutter 中只有 assets。被放到 iOS 中 Images.xcasset 文件夾下的資源在 Flutter 中被放到了 assets 文件夾中。

在Flutter中assets可以是任意類型的文件，而不僅僅是圖片。例如，你可以把 json 文件放置到 my-assets 文件夾中。

my-assets/data.json

記得在 pubspec.yaml 文件中聲明 assets：

assets:
 - my-assets/data.json

然後在代碼中我們可以通過 AssetBundle 來訪問它：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}

對於圖片，Flutter 像 iOS 一樣，遵循了一個簡單的基於像素密度的格式。Image assets 可能是 1.0x 2.0x 3.0x 或是其他的任何倍數。這個 devicePixelRatio 表示了物理像素到單個邏輯像素的比率。

Android不同像素密度的圖片和Flutter的像素比率的對應關係

ldpi    0.75x
mdpi    1.0x
hdpi    1.5x
xhdpi   2.0x
xxhdpi  3.0x
xxxhdpi 4.0x

舉個例子，要把一個名為 my_icon.png 的圖片放到 Flutter 工程中，你可能想要把它放到images文件夾中。把圖片（1.0x）放置到 images 文件夾中，並把其它解析度的圖片放在對應的子文件夾中，並接上合適的比例係數，就像這樣：

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

接下來就可以在pubspec.yaml文件中這樣聲明這個圖片資源：

assets:
 - images/my_icon.png

現在，我們就可以藉助AssetImage來訪問它了。

return AssetImage("images/a_dot_burr.jpeg");

也可通過 Image widget 直接使用：

@override
Widget build(BuildContext context) {
  return Image.asset("images/my_image.png");
}

如何歸檔strings資源，以及如何處理不同語言？

不像 iOS 擁有一個 Localizable.strings 文件，Flutter目前沒有專門的字符串資源系統。目前，最佳做法是將strings資源作為靜態欄位保存在類中。例如：

class Strings {
  static String welcomeMessage = "Welcome To Flutter";
}

然後像如下方式來訪問它：

Text(Strings.welcomeMessage)

默認情況下，Flutter 只支持美式英語字符串。如果你要支持其他語言，請引入 flutter_localizations 包。你可能也要引入 intl 包來支持其他的 i10n 機制，比如日期/時間格式化。

dependencies:
  # ...
  flutter_localizations:
    sdk: flutter
  intl: "^0.15.6"

要使用 flutter_localizations 包，還需要在 app widget 中指定 localizationsDelegates 和 supportedLocales。

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // Add app-specific localization delegate[s] here
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedlocales: [
    const Locale('en', 'US'), // English
    const Locale('he', 'IL'), // Hebrew
    // ... other locales the app supports
  ],
  // ...
)

這些代理包括了實際的本地化值，並且 supportedLocales 定義了 App 支持哪些地區。上面的例子使用了一個 MaterialApp ，所以它既有 GlobalWidgetsLocalizations 用於基礎 widgets，也有 MaterialWidgetsLocalizations 用於 Material wigets 的本地化。如果你使用 WidgetsApp ，則無需包括後者。注意，這兩個代理雖然包括了「默認」值，但如果你想讓你的 App 本地化，你仍需要提供一或多個代理作為你的 App 本地化副本。

當初始化時，WidgetsApp 或 MaterialApp 會使用你指定的代理為你創建一個 Localizations widget。Localizations widget 可以隨時從當前上下文中訪問設備的地點，或者使用 Window.locale。

要訪問本地化文件，使用 Localizations.of() 方法來訪問提供代理的特定本地化類。如需翻譯，使用 intl_translation 包來取出翻譯副本到 arb 文件中。把它們引入 App 中，並用 intl 來使用它們。

更多 Flutter 中國際化和本地化的細節，請訪問 internationalization guide ，裡面有不使用 intl 包的示例代碼。