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

時間 2019-11-24

標籤 flutter 基礎最新開發環境搭建 hello world 简体版

原文原文鏈接

本文首發於微信公衆號「劉望舒」html

前言

最近的Google I/O大會上，Flutter1.5 開始支持移動、Web、桌面和嵌入式設備，從不溫不火的sky一直進化到現在熱門的Flutter，Flutter的發展已經超出不少人的想象。我對跨平臺技術一直不感冒，雖然也學了一些，但更可能是爲了工做而不是出於興趣，由於我認爲它們都是過分產物，不會掀起多大的風浪，可是Flutter多是個例外，關於Flutter的好處網上有不少，這裏就很少說了，也不想吹噓這門技術，只是想說如今是時候瞭解Flutter了。前端

一開始沒想寫Flutter的相關文章的，由於這些看官方文檔就夠了，可是有很多同窗就想看我寫的，所以我也寫個Flutter系列。這個Flutter基礎系列是Flutter系列的入門系列，後面還會有其餘的Flutter系列。既然要學習Flutter確定要先學習環境的搭建，能夠在Windows、MAC、Linux上來進行Flutter開發，因爲本系列文章是面向Android開發來編寫的，所以選擇大部分人的都有的Windows平臺。java

本篇文章的目錄爲：android

Flutter概述
Flutter開發環境搭建
運行一個Flutter Demo
Hello World

1.Flutter概述

Flutter是谷歌的移動UI框架，能夠快速在Android和iOS上構建高質量的原生用戶界面，它的前身是谷歌試驗項目Sky。主要有如下幾個特色：
符合各個平臺的用戶體驗
Flutter內置了Material Design和Cupertino風格（iOS風格）的Widgets，使得咱們能夠開發出符合Android和iOS風格的應用，另外Flutter提供了豐富的motion API、平滑而天然的滑動效果和平臺感知，爲用戶帶來全新體驗。git

響應式框架
使用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。github

訪問本地功能和SDK並支持插件
Flutter能夠複用Java、Swift或ObjC代碼，訪問Android和iOS上的原生系統功能。另外經過Flutter插件也能夠訪問原生系統功能，好比藍牙、相機、WiFi等等。shell

2.Flutter開發環境搭建

在Windows平臺開發的話，官方的環境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬盤空間，若是是在Mac和Linux上搭建開發環境請查看官方文檔。json

2.1 安裝Git for Windows和PowerShell 5.0

Git for Windows下載地址爲：git-scm.com/download/wi… + R 輸入cmd，在cmd中輸入git 命令來驗證下，好比git --version。 PowerShell是微軟推出的代替cmd的更方便的命令行工具，win七、win八、win10系統都自帶有這個命令行工具。右鍵點擊WIn10的開始按鈕搜索PowerShell，若是沒有，去powershell官網下載PowerShell，地址爲：docs.microsoft.com/zh-cn/power…windows

2.2 下載Flutter SDK

下載Flutter SDK有多種方法，看看哪一種更適合本身：

flutter官網下載最新Beta版本的進行安裝：flutter.dev/docs/develo…
Flutter github項目中去下載，地址爲：github.com/flutter/flu…
經過 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中。

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

配置國內鏡像

若是在國內安裝或使用Flutter，使用Flutter的官方鏡像或者其餘鏡像可以免於限制而且加快速度，Flutter的官方鏡像爲

PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製代碼

這兩個鏡像是會變的，具體能夠查看官方說明：flutter.dev/community/c… 除此以外還有上海交通大學 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不一樣，類別內容也會不一樣。其中√是沒有問題的類別，！指的是有問題的類別。

Flutter的版本和運行環境
Android的工具鏈的狀況
Android Studio的版本，以及Flutter插件安裝狀況
IntelliJ IDEA Community的版本，以及Flutter插件安裝狀況
設備的鏈接狀況

安裝任何缺乏的依賴項後，能夠再次運行flutter doctor命令來驗證是否已正確設置全部內容。好比第二項有問題，上面提示能夠運行flutter doctor --android-licenses來解決，照作後，再次運行flutter doctor命令，打印的提示信息會變爲：

2.5 設置編輯器

安裝Android Studio或者 IntelliJ IDEA 安裝Android Studio的過程我就很少說了，須要安裝3.0 或者更高的版本。沒有下載的去這裏下載：developer.android.google.cn/studio/

除了Android Studio還可使用IntelliJ IDEA： IntelliJ IDEA Community, 2017.1版本或更高版本 IntelliJ IDEA Ultimate, 2017.1版本或更高版本下載地址爲：www.jetbrains.com/idea/downlo…

安裝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處用來引入 Material Design設計風格的基礎包，每個dart文件幾乎都會引入它，Flutter中提供了豐富的Material widgets。
註釋2處的main方法是Dart程序的入口，使用了=>符號，這是Dart中單行函數或方法的簡寫，等價於以下代碼：

void main(){
return runApp(Widget app);
}
複製代碼

runApp方法是Flutter框架的入口，若是不返回runApp方法，那麼執行的是一個Dart控制檯應用。 3. 註釋3處說明MyApp繼承了 StatelessWidget，這會使應用自己也成爲一個widget。Flutter中有一切皆widget的概念，widget分爲StatelessWidget（無狀態widget）和StatefulWidget（有狀態widget）。 4. build方法用來描述如何用其餘較低級別的widget來顯示自身。 5. MaterialApp包含了App實現Material Design所須要的一些widget，其中title爲在任務管理窗口中所顯示的應用名字，home爲應用默認顯示的界面widget。 6. Scaffold是Material Design佈局結構的基本實現，Scaffold內部包含了appBar和body，appBar爲應用程序欄，它在Scaffold的頂部；body爲Scaffold的主要內容，通俗來說就是屏幕的大部分。註釋4處，body包含了一個Center widget，Center widget中有一個子widget Text，這樣字符Hello World就會顯示在body的中心。