Flutter 基礎（二）Flutter 開發環境搭建和 Hello World

NiZerin發表於2019-06-06
Flutter開發環境

Flutter基礎（二）Flutter開發環境搭建和Hello World

前言

其實沒想寫Flutter的相關文章的，因為這些看官方文件就夠了，但是有不少同學就想看我寫的，因此我也寫個Flutter系列，順便自己也梳理下知識點。這個Flutter基礎系列是Flutter系列的入門系列，後面還會有其他的Flutter系列。既然要學習Flutter肯定要先學習環境的搭建，可以在Windows、MAC、Linux上來進行Flutter開發，由於本系列文章是面向Android開發來編寫的，因此選擇大部分人的都有的Windows平臺。

本篇文章的目錄為：

  1. Flutter概述
  2. Flutter開發環境搭建
  3. 執行一個Flutter Demo
  4. Hello World

1.Flutter概述

Flutter是谷歌的移動UI框架，可以快速在Android和iOS上構建高質量的原生使用者介面， 它的前身是谷歌試驗專案Sky。主要有以下幾個特點：
符合各個平臺的使用者體驗
Flutter內建了Material Design和Cupertino風格（iOS風格）的Widgets，使得我們可以開發出符合Android和iOS風格的應用，另外Flutter提供了豐富的motion API、平滑而自然的滑動效果和平臺感知，為使用者帶來全新體驗。

響應式框架
使用Flutter的響應式框架和一系列基礎widget，可以輕鬆構建您的使用者介面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）可以幫助開發者解決艱難的UI挑戰。

跨平臺自繪引擎
Flutter與Hybrid App、React Native這些跨平臺技術不同，Flutter既沒用使用WebView，也沒有使用各個平臺的原生控制元件，而是本身實現一個統一介面的渲染引擎來繪製UI，這樣做可以保證不同平臺UI的一致性。另外採用自繪引擎後，Flutter在佈局過程中不需要像RN那樣要在JavaScript和Native之間通訊，可以節省效能開銷。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個2D圖形處理函式庫，包含字型、座標轉換，以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了非常友好的API。
關於Flutter與其他跨平臺技術的區別可以檢視移動開發的跨平臺技術演進這篇文章。
採用Dart開發
Flutter App採用Dart語言來開發。與JavaScript相比，Dart在 JIT（即時編譯）模式下，速度與 JavaScript基本持平。但是當Dart以 AOT模式執行時，Dart效能要高於JavaScript。

訪問本地功能和SDK並支援外掛
Flutter可以複用Java、Swift或ObjC程式碼，訪問Android和iOS上的原生系統功能。另外通過Flutter外掛也可以訪問原生系統功能，比如藍芽、相機、WiFi等等。

2.Flutter開發環境搭建

在Windows平臺開發的話，官方的環境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬碟空間，如果是在Mac和Linux上搭建開發環境請檢視官方文件。

2.1 安裝Git for Windows和PowerShell 5.0

Git for Windows下載地址為：https://git-scm.com/download/win，如果此前安裝過，win + R 輸入cmd，在cmd中輸入git 命令來驗證下，比如git --version。
PowerShell是微軟推出的代替cmd的更方便的命令列工具，win7、win8、win10系統都自帶有這個命令列工具。右鍵點選WIn10的開始按鈕搜尋PowerShell，如果沒有，去powershell官網下載PowerShell，地址為：https://docs.microsoft.com/zh-cn/powershel...

2.2 下載Flutter SDK

下載Flutter SDK有多種方法，看看哪種更適合自己：

  1. flutter官網下載最新Beta版本的進行安裝：https://flutter.dev/docs/development/tools...
  2. Flutter github專案中去下載，地址為：https://github.com/flutter/flutter/releases。
  3. 通過 git 命令來下載 Flutter 的 beta 版：

git clone -b beta https://github.com/flutter/flutter.git

這裡下載最新的Beta版本就可以了。

將下載下來的zip安裝包解壓到你想安裝Flutter SDK的路徑，比如：F:\Flutter。需要注意的是，不要將flutter安裝到需要一些高許可權的路徑，比如C:\Program Files\。

2.3 配置環境變數

配置 flutter 環境變數
如果想在命令列中使用 flutter 命令，需要新增flutter的路徑到系統變數path中。
我的flutter路徑為F:\Flutter\flutter，那麼就將F:\Flutter\flutter\bin放到系統變數path中。
VZZtFx.png

在cmd中輸入flutter --version來驗證是否配置成功。

配置國內映象

如果在國內安裝或使用Flutter，使用Flutter的官方映象或者其他映象能夠免於限制並且加快速度，Flutter的官方映象為


PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

這兩個映象是會變的，具體可以檢視官方說明：https://flutter.dev/community/china
除此之外還有上海交通大學 Linux 使用者組：


PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

這裡使用Flutter的官方映象，將這兩個url配置到使用者環境變數中：

2.4 安裝和檢查各種依賴項

開啟cmd輸入如下命令：


flutter doctor

這時會列印一些提示資訊：

可以看到有五個類別的依賴項，如果安裝的IDE不同，類別內容也會不同。其中√是沒有問題的類別，！指的是有問題的類別。

  1. Flutter的版本和執行環境
  2. Android的工具鏈的情況
  3. Android Studio的版本，以及Flutter外掛安裝情況
  4. IntelliJ IDEA Community的版本，以及Flutter外掛安裝情況
  5. 裝置的連線情況

安裝任何缺少的依賴項後，可以再次執行flutter doctor命令來驗證是否已正確設定所有內容。比如第二項有問題，上面提示可以執行flutter doctor --android-licenses來解決，照做後，再次執行flutter doctor命令，列印的提示資訊會變為：

2.5 設定編輯器

安裝Android Studio或者 IntelliJ IDEA
安裝Android Studio的過程我就不多說了，需要安裝3.0 或者更高的版本。沒有下載的去這裡下載：https://developer.android.google.cn/studio...

除了Android Studio還可以使用IntelliJ IDEA：
IntelliJ IDEA Community, 2017.1版本或更高版本
IntelliJ IDEA Ultimate, 2017.1版本或更高版本
下載地址為：https://www.jetbrains.com/idea/download/#s...

安裝Flutter和Dart外掛
Android Studio的File –> settings –> Plugins –> Browse repositories，在搜尋框輸入Flutter和Dart來安裝它們。

安裝成功後重啟Android Studio。這時cmd輸入flutter doctor命令，就會看到提示資訊的Android Studio的版本依賴項為√。

2.6 設定Android裝置和模擬器

設定Android裝置和開發Android一樣，需要注意的的是，這個裝置的應該為Android 4.1（API級別16）或更高版本。
模擬器選擇Android Studio和Genymotion建立的都可以，推薦使用x86或者x86_64映象。
至於怎麼連線裝置和建立模擬器就不講了，不是本文的重點。

3.執行一個Flutter Demo

Android Studio選單欄的File –> New Flutter Project，選擇Flutter application：

Project name需要小寫，接著設定Flutter SDK的位置和專案的位置，如果沒有下載Flutter SDK，可以點選install SDK下載，如下圖所示。

專案建立完成後，在Android Studio頂部的工具欄中的目標選擇器裡選擇要執行的裝置或者模擬器，我這裡選擇的是Genymotion建立的Custom Phone(Android 9.0)。

單擊工具欄中的執行圖示，或呼叫選單項的Run –>Run ‘main.dart’ 執行Flutter Demo，效果如下圖所示。

熱過載
Flutter提供了快速開發週期和熱過載，能夠重新載入一個實時執行的應用程式的程式碼，而無需重新啟動或丟失應用程式狀態，我們來做個實驗。
開啟lib/main.dart，將字串You have pushed the button this many times，改為You have clicked the button this many times。
然後Save All或者點選工具欄中的黃色閃電圖示，就可以發現字串更新了我們修改的值。

4.Hello World

將lib/main.dart中的所有程式碼替換為如下內容：


import 'package:flutter/material.dart';//1

void main() => runApp(MyApp());//2

class MyApp extends StatelessWidget {//3
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Welcome to Flutter',
 home: Scaffold(
 appBar: AppBar(
 title: Text('Welcome to Flutter'),
 ),
 body: Center(//4
 child: Text('Hello World'),
 ),
 ),
 );
 }
}

這時Flutter的Hello World就大功告成了。下面對程式碼進行簡單的講解：

  1. 註釋1處用來引入 Material Design設計風格的基礎包，每一個dart檔案幾乎都會引入它，Flutter中提供了豐富的Material widgets。
  2. 註釋2處的main方法是Dart程式的入口，使用了=>符號，這是Dart中單行函式或方法的簡寫，等價於如下程式碼：

    void main(){
    return runApp(Widget app);
    }

runApp方法是Flutter框架的入口，如果不返回runApp方法，那麼執行的是一個Dart控制檯應用。

  1. 註釋3處說明MyApp繼承了 StatelessWidget，這會使應用本身也成為一個widget。Flutter中有一切皆widget的概念，widget分為StatelessWidget（無狀態widget）和StatefulWidget（有狀態widget）。
  2. build方法用來描述如何用其他較低階別的widget來顯示自身。
  3. MaterialApp包含了App實現Material Design所需要的一些widget，其中title為在任務管理視窗中所顯示的應用名字，home為應用預設顯示的介面widget。
  4. Scaffold是Material Design佈局結構的基本實現，Scaffold內部包含了appBar和body，appBar為應用程式欄，它在Scaffold的頂部；body為Scaffold的主要內容，通俗來講就是螢幕的大部分。註釋4處，body包含了一個Center widget，Center widget中有一個子widget Text，這樣字元Hello World就會顯示在body的中心。

By: Laravel-China 寧澤林
MyBlog: nizer.in

相關文章