Flutter基礎(chǔ)（二）Flutter開發(fā)環(huán)境搭建和Hello World

本文首發(fā)于微信公眾號(hào)「劉望舒」

前言

最近的Google I/O大會(huì)上，F(xiàn)lutter1.5 開始支持移動(dòng)、Web、桌面和嵌入式設(shè)備，從不溫不火的sky一直進(jìn)化到如今熱門的Flutter，F(xiàn)lutter的發(fā)展已經(jīng)超出很多人的想象。我對(duì)跨平臺(tái)技術(shù)一直不感冒，雖然也學(xué)了一些，但更多是為了工作而不是出于興趣，因?yàn)槲艺J(rèn)為它們都是過度產(chǎn)物，不會(huì)掀起多大的風(fēng)浪，但是Flutter可能是個(gè)例外，關(guān)于Flutter的好處網(wǎng)上有很多，這里就不多說了，也不想吹噓這門技術(shù)，只是想說現(xiàn)在是時(shí)候了解Flutter了。

一開始沒想寫Flutter的相關(guān)文章的，因?yàn)檫@些看官方文檔就夠了，但是有不少同學(xué)就想看我寫的，因此我也寫個(gè)Flutter系列。這個(gè)Flutter基礎(chǔ)系列是Flutter系列的入門系列，后面還會(huì)有其他的Flutter系列。既然要學(xué)習(xí)Flutter肯定要先學(xué)習(xí)環(huán)境的搭建，可以在Windows、MAC、Linux上來進(jìn)行Flutter開發(fā)，由于本系列文章是面向Android開發(fā)來編寫的，因此選擇大部分人的都有的Windows平臺(tái)。

本篇文章的目錄為：

  1. Flutter概述
  2. Flutter開發(fā)環(huán)境搭建
  3. 運(yùn)行一個(gè)Flutter Demo
  4. Hello World

1.Flutter概述

Flutter是谷歌的移動(dòng)UI框架，可以快速在Android和iOS上構(gòu)建高質(zhì)量的原生用戶界面， 它的前身是谷歌試驗(yàn)項(xiàng)目Sky。主要有以下幾個(gè)特點(diǎn)：
符合各個(gè)平臺(tái)的用戶體驗(yàn)
Flutter內(nèi)置了Material Design和Cupertino風(fēng)格（iOS風(fēng)格）的Widgets，使得我們可以開發(fā)出符合Android和iOS風(fēng)格的應(yīng)用，另外Flutter提供了豐富的motion API、平滑而自然的滑動(dòng)效果和平臺(tái)感知，為用戶帶來全新體驗(yàn)。

響應(yīng)式框架
使用Flutter的響應(yīng)式框架和一系列基礎(chǔ)widget，可以輕松構(gòu)建您的用戶界面。使用功能強(qiáng)大且靈活的API（針對(duì)2D、動(dòng)畫、手勢、效果等）可以幫助開發(fā)者解決艱難的UI挑戰(zhàn)。

跨平臺(tái)自繪引擎
Flutter與Hybrid App、React Native這些跨平臺(tái)技術(shù)不同，F(xiàn)lutter既沒用使用WebView，也沒有使用各個(gè)平臺(tái)的原生控件，而是本身實(shí)現(xiàn)一個(gè)統(tǒng)一接口的渲染引擎來繪制UI，這樣做可以保證不同平臺(tái)UI的一致性。另外采用自繪引擎后，F(xiàn)lutter在布局過程中不需要像RN那樣要在JavaScript和Native之間通信，可以節(jié)省性能開銷。Flutter使用Skia作為其2D渲染引擎，Skia是Google的一個(gè)2D圖形處理函數(shù)庫，包含字型、坐標(biāo)轉(zhuǎn)換，以及點(diǎn)陣圖都有高效能且簡潔的表現(xiàn)，Skia是跨平臺(tái)的，并提供了非常友好的API。
關(guān)于Flutter與其他跨平臺(tái)技術(shù)的區(qū)別可以查看移動(dòng)開發(fā)的跨平臺(tái)技術(shù)演進(jìn)這篇文章。
采用Dart開發(fā)
Flutter App采用Dart語言來開發(fā)。與JavaScript相比，Dart在 JIT（即時(shí)編譯）模式下，速度與 JavaScript基本持平。但是當(dāng)Dart以 AOT模式運(yùn)行時(shí)，Dart性能要高于JavaScript。

訪問本地功能和SDK并支持插件
Flutter可以復(fù)用Java、Swift或ObjC代碼，訪問Android和iOS上的原生系統(tǒng)功能。另外通過Flutter插件也可以訪問原生系統(tǒng)功能，比如藍(lán)牙、相機(jī)、WiFi等等。

2.Flutter開發(fā)環(huán)境搭建

在Windows平臺(tái)開發(fā)的話，官方的環(huán)境要求是Windows 7 SP1或更高版本（64位），至少400 MB的硬盤空間，如果是在Mac和Linux上搭建開發(fā)環(huán)境請(qǐng)查看官方文檔。

2.1 安裝Git for Windows和PowerShell 5.0

Git for Windows下載地址為：https://git-scm.com/download/win，如果此前安裝過，win + R 輸入cmd，在cmd中輸入git 命令來驗(yàn)證下，比如git --version。
PowerShell是微軟推出的代替cmd的更方便的命令行工具，win7、win8、win10系統(tǒng)都自帶有這個(gè)命令行工具。右鍵點(diǎn)擊WIn10的開始按鈕搜索PowerShell，如果沒有，去powershell官網(wǎng)下載PowerShell，地址為：https://docs.microsoft.com/zh-cn/powershell/scripting/install/installing-windows-powershell?view=powershell-6#upgrading-existing-windows-powershell

2.2 下載Flutter SDK

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

  1. flutter官網(wǎng)下載最新Beta版本的進(jìn)行安裝：https://flutter.dev/docs/development/tools/sdk/releases
  2. Flutter github項(xiàng)目中去下載，地址為：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安裝到需要一些高權(quán)限的路徑，比如C:\Program Files\。

2.3 配置環(huán)境變量

配置 flutter 環(huán)境變量
如果想在命令行中使用 flutter 命令，需要添加flutter的路徑到系統(tǒng)變量path中。
我的flutter路徑為F:\Flutter\flutter，那么就將F:\Flutter\flutter\bin放到系統(tǒng)變量path中。

image

在cmd中輸入flutter --version來驗(yàn)證是否配置成功。

配置國內(nèi)鏡像

如果在國內(nèi)安裝或使用Flutter，使用Flutter的官方鏡像或者其他鏡像能夠免于限制并且加快速度，F(xiàn)lutter的官方鏡像為

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

這兩個(gè)鏡像是會(huì)變的，具體可以查看官方說明：https://flutter.dev/community/china
除此之外還有上海交通大學(xué) Linux 用戶組：

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

這里使用Flutter的官方鏡像，將這兩個(gè)url配置到用戶環(huán)境變量中：


image

image

2.4 安裝和檢查各種依賴項(xiàng)

打開cmd輸入如下命令：

flutter doctor

這時(shí)會(huì)打印一些提示信息：


image

可以看到有五個(gè)類別的依賴項(xiàng)，如果安裝的IDE不同，類別內(nèi)容也會(huì)不同。其中√是沒有問題的類別，！指的是有問題的類別。

  1. Flutter的版本和運(yùn)行環(huán)境
  2. Android的工具鏈的情況
  3. Android Studio的版本，以及Flutter插件安裝情況
  4. IntelliJ IDEA Community的版本，以及Flutter插件安裝情況
  5. 設(shè)備的連接情況

安裝任何缺少的依賴項(xiàng)后，可以再次運(yùn)行flutter doctor命令來驗(yàn)證是否已正確設(shè)置所有內(nèi)容。比如第二項(xiàng)有問題，上面提示可以運(yùn)行flutter doctor --android-licenses來解決，照做后，再次運(yùn)行flutter doctor命令，打印的提示信息會(huì)變?yōu)椋?br>

image

2.5 設(shè)置編輯器

安裝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/#section=windows

安裝Flutter和Dart插件
Android Studio的File --> settings --> Plugins --> Browse repositories，在搜索框輸入Flutter和Dart來安裝它們。

image

安裝成功后重啟Android Studio。這時(shí)cmd輸入flutter doctor命令，就會(huì)看到提示信息的Android Studio的版本依賴項(xiàng)為√。

2.6 設(shè)置Android設(shè)備和模擬器

設(shè)置Android設(shè)備和開發(fā)Android一樣，需要注意的的是，這個(gè)設(shè)備的應(yīng)該為Android 4.1（API級(jí)別16）或更高版本。
模擬器選擇Android Studio和Genymotion創(chuàng)建的都可以，推薦使用x86或者x86_64鏡像。
至于怎么連接設(shè)備和創(chuàng)建模擬器就不講了，不是本文的重點(diǎn)。

3.運(yùn)行一個(gè)Flutter Demo

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


image

Project name需要小寫，接著設(shè)置Flutter SDK的位置和項(xiàng)目的位置，如果沒有下載Flutter SDK，可以點(diǎn)擊install SDK下載，如下圖所示。


image

項(xiàng)目創(chuàng)建完成后，在Android Studio頂部的工具欄中的目標(biāo)選擇器里選擇要運(yùn)行的設(shè)備或者模擬器，我這里選擇的是Genymotion創(chuàng)建的Custom Phone(Android 9.0)。


image

單擊工具欄中的運(yùn)行圖標(biāo)，或調(diào)用菜單項(xiàng)的Run -->Run ‘main.dart’ 運(yùn)行Flutter Demo，效果如下圖所示。

10.png

熱重載
Flutter提供了快速開發(fā)周期和熱重載，能夠重新加載一個(gè)實(shí)時(shí)運(yùn)行的應(yīng)用程序的代碼，而無需重新啟動(dòng)或丟失應(yīng)用程序狀態(tài)，我們來做個(gè)實(shí)驗(yàn)。
打開lib/main.dart，將字符串You have pushed the button this many times，改為You have clicked the button this many times。
然后Save All或者點(diǎn)擊工具欄中的黃色閃電圖標(biāo)，就可以發(fā)現(xiàn)字符串更新了我們修改的值。

4.Hello World

將lib/main.dart中的所有代碼替換為如下內(nèi)容：

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'),
        ),
      ),
    );
  }
}

這時(shí)Flutter的Hello World就大功告成了。下面對(duì)代碼進(jìn)行簡單的講解：

  1. 注釋1處用來引入 Material Design設(shè)計(jì)風(fēng)格的基礎(chǔ)包，每一個(gè)dart文件幾乎都會(huì)引入它，F(xiàn)lutter中提供了豐富的Material widgets。
  2. 注釋2處的main方法是Dart程序的入口，使用了=>符號(hào)，這是Dart中單行函數(shù)或方法的簡寫，等價(jià)于如下代碼：
void main(){
return runApp(Widget app);
}

runApp方法是Flutter框架的入口，如果不返回runApp方法，那么執(zhí)行的是一個(gè)Dart控制臺(tái)應(yīng)用。

  1. 注釋3處說明MyApp繼承了 StatelessWidget，這會(huì)使應(yīng)用本身也成為一個(gè)widget。Flutter中有一切皆widget的概念，widget分為StatelessWidget（無狀態(tài)widget）和StatefulWidget（有狀態(tài)widget）。
  2. build方法用來描述如何用其他較低級(jí)別的widget來顯示自身。
  3. MaterialApp包含了App實(shí)現(xiàn)Material Design所需要的一些widget，其中title為在任務(wù)管理窗口中所顯示的應(yīng)用名字，home為應(yīng)用默認(rèn)顯示的界面widget。
  4. Scaffold是Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)，Scaffold內(nèi)部包含了appBar和body，appBar為應(yīng)用程序欄，它在Scaffold的頂部；body為Scaffold的主要內(nèi)容，通俗來講就是屏幕的大部分。注釋4處，body包含了一個(gè)Center widget，Center widget中有一個(gè)子widget Text，這樣字符Hello World就會(huì)顯示在body的中心。
image

Flutter基礎(chǔ)系列
Flutter基礎(chǔ)（一）移動(dòng)開發(fā)的跨平臺(tái)技術(shù)演進(jìn)
Flutter基礎(chǔ)（二）Flutter開發(fā)環(huán)境搭建和Hello World
Flutter基礎(chǔ)（三）Dart快速入門
Flutter基礎(chǔ)（四）開發(fā)Flutter應(yīng)用前需要掌握的Basic Widget
Flutter基礎(chǔ)（五）Material組件之MaterialApp、Scaffold、AppBar
Flutter基礎(chǔ)（六）Material組件之BottomNavigationBar、TabBar、Drawer
Flutter基礎(chǔ)（七）Scrolling Widget之ListView、GridView、PageView
Flutter基礎(chǔ)（八）手勢相關(guān)Widget：GestureDetector和Dismissible
Flutter基礎(chǔ)（九）資源和圖片
Flutter基礎(chǔ)（十）布局Widget快速入門
Flutter基礎(chǔ)（十一）網(wǎng)絡(luò)請(qǐng)求（Dio）與JSON數(shù)據(jù)解析
Flutter基礎(chǔ)（十二）路由（頁面跳轉(zhuǎn)）與數(shù)據(jù)傳遞
Flutter基礎(chǔ)（十三）Flutter與Android的相互通信

這里不僅分享大前端、Android、Java等技術(shù)，還有程序員成長類文章。


image
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容