Flutter環(huán)境搭建

flutter簡介

flutter 是Google開發(fā)的一個移動跨平臺（Android 和 iOS）的開發(fā)框架，使用的是 Dart 語言。和 React Native 不同的是，F(xiàn)lutter 框架并不是一個嚴格意義上的原生應(yīng)用開發(fā)框架。Flutter 的目標是用來創(chuàng)建高性能、高穩(wěn)定性、高幀率、低延遲的 Android 和 iOS 應(yīng)用。并且開發(fā)出來的應(yīng)用在不同的平臺用起來跟原生應(yīng)用具有一樣的體驗。

Flutter 包含了一個函數(shù)響應(yīng)式框架（ functional-reactive framework）、一個 2D 渲染引擎、直接可用的 Widget 庫、和各種開發(fā)工具。這些組件在一起配合使用，可以幫助開發(fā)者完成設(shè)計、開發(fā)、測試和調(diào)試應(yīng)用的工作。

Widget

Widget 是每個 Flutter 應(yīng)用的基礎(chǔ)組成部分，每個 Widget 是用戶界面最基本的元素。和其他框架把 View、controller、 Layout 和其他資源分開定義不一樣，F(xiàn)lutter 具有一致的、唯一的對象模型： Widget。

一個 Widget 具有如下的一些作用：

一個結(jié)構(gòu)性的元素（比如 按鈕或者菜單）

一個元素的風(fēng)格（比如 字體或者顏色）

指定布局屬性（比如 padding）

也可以包含一些業(yè)務(wù)邏輯

以及其他等等

Widget 通過組合來組成特有的頁面層級結(jié)構(gòu)，每個 Widget 都內(nèi)嵌在父 Widget 中，并繼承父 Widget 的屬性。 并且，Widget沒有單獨的 “application” 對象，根 Widget 就相當(dāng)于application。

布局/樣式

首先從宏觀上來說，F(xiàn)lutter 中的布局、樣式中絕大多數(shù)的概念其實還是沿用了 CSS 中的概念。例如在布局方面與 CSS 中 flex 布局對應(yīng)的有 Row、Column 兩個 Widget，分別提供了水平和垂直兩個方向的布局方式。再比如 Stack Widget 提供了一種 Widget 之間相互堆疊的機制，這又和 CSS 中的 position:absolute; 很像。

查看 Flutter 中所有和布局相關(guān)的 Widget：https://flutter.io/widgets/layout/#Multi-child%20layout%20widgets。

概念上的相似是不是就可以讓我們輕松上手了呢？其實并不是，因為在具體的代碼層面，為 Flutter 中的 Widget 添加樣式 和為一個 HTML 元素添加樣式還是有著很大的差別。這些差別主要表現(xiàn)在以下兩個方面：

舉例來說，如果你想給一段文字添加一個 border。你必須創(chuàng)建一個 Container，把這段問題設(shè)置為這個 Container 的 child。然后給這個 Container 設(shè)置一個 BoxDecoration 屬性，并在該屬性中設(shè)置具體的邊框樣式。例如：

Container(??decoration:BoxDecoration(????border:Border.all(color:Colors.red) ), ??child:newText("My?Awesome?Border"), )

####2，F(xiàn)lutter樣式屬性都不在支持以字符串的形式書寫。 由于 Dart 面向?qū)ο蟮奶攸c，基本上所有的樣式屬性都不在支持以字符串的形式書寫，而是必須創(chuàng)建特定類的實例或是使用 Flutter 中預(yù)先定義好的常量。例如：

ListView.builder( ??scrollDirection:Axis.horizontal, ??padding:EdgeInsets.all(10.0), ??itemCount:subCategories.length, ??itemBuilder:(BuildContext?context,int?index){?} )

這里為了指定 ListView 的滾動方向，我們使用了 Flutter 中預(yù)先定義好的 Axis.horizontal 常量，為了表示 4 個方向上的 padding 值，我們創(chuàng)建了一個 EdgeInsets 類的實例。

組合大于繼承

Widget 通常通過組合的方式來構(gòu)建復(fù)雜的 UI。例如，常用的 Container Widget 就是由幾個分別負責(zé) 布局、繪制、布局和計算大小的 Widget 組成。

具體來說，Container 由LimitedBox，ConstrainedBox，Align，Padding，DecoratedBox和?Transform組成。如果要自定義 Container 來實現(xiàn)自定義效果，相比使用繼承而言，可以使用組合一些簡單的 Widget 實現(xiàn)自定義效果。

分層架構(gòu)

Flutter 框架有幾層結(jié)構(gòu)，每層都依賴其下面的一層結(jié)構(gòu)。其架構(gòu)圖如下圖：

開發(fā)應(yīng)用的時候，經(jīng)常使用最上面的層級提供的功能。 這種層級結(jié)構(gòu)的設(shè)計是為了讓你用更少的代碼實現(xiàn)更多的功能。比如，Material 層 是使用了 Widget 層的控件來構(gòu)建的，而 Widget 層 依賴下面的 Rendering 層來構(gòu)建的。

這些層級為構(gòu)建應(yīng)用提供了很多種選擇。使用自定義的方式構(gòu)建應(yīng)用可以使用框架的所有功能，或者使用 Widget 層的控件可以實現(xiàn) UI 效果。 可以直接使用 Flutter 提供的 Widget 也可以自定義各種 Widget，如果上層實現(xiàn)不滿足你的要求，還可以直接使用更底層的功能來自定義。

Flutter框架與其他移動開發(fā)框架的區(qū)別

原生應(yīng)用的區(qū)別

Flutter 應(yīng)用運行在一個用 C++ 寫的引擎中，F(xiàn)lutter 應(yīng)用可以看做是一個游戲 App，代碼都是在 引擎中運行。 對于 Android 應(yīng)用來說，F(xiàn)lutter 框架在引擎中實現(xiàn)了一個 繼承于 SurfaceView 的 FlutterView 中，用戶所看到的 UI 都是在這個 SurfaceView 中顯示。如果要和原生平臺功能交互，則可以在 Activity 中使用 FlutterView，并通過 Flutter 提供的消息 API 和原生平臺收發(fā)消息。

與React Native 應(yīng)用的區(qū)別

和React Native相比，主要有以下的一些區(qū)別：

使用的編程語言不同，F(xiàn)lutter 使用的是 谷歌自己新的 Dart語言，新的語言可以吸收很多其他成功編程語言的特性，更具有表達性，編碼效率更高，而 React Native 使用的 JavaScript語言。

React Native 是把應(yīng)用編譯為原生控件運行，這樣在轉(zhuǎn)換的時候會有性能損耗，并且有些平臺特性可能無法做成跨平臺使用。

目前，F(xiàn)lutter的首個發(fā)布預(yù)覽版（Release Preview 1）正式發(fā)布，這標志著谷歌進入了Flutter正式版（1.0）發(fā)布前的最后階段，相信在不久的將來，F(xiàn)lutter將會被使用的越來越廣泛。

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

“工欲善其事，必先利其器”，學(xué)習(xí)任何一門語言、技術(shù)，都需要從環(huán)境搭建開始，學(xué)習(xí)Flutter就從環(huán)境搭建開始。搭建環(huán)境最好參考官網(wǎng)的文檔進行操作：https://flutterchina.club/get-started/install/，下面以mac環(huán)境為例來給大家講解。

系統(tǒng)要求

要安裝并運行Flutter，您的開發(fā)環(huán)境必須滿足以下最低要求：

操作系統(tǒng): macOS (64-bit)

磁盤空間: 700 MB (不包括Xcode或Android Studio的磁盤空間）

工具: Flutter 依賴下面這些命令行工具，如bash, mkdir, rm, git, curl, unzip, which等

獲取Flutter SDK

要獲得Flutter，請先使用git克隆Flutter，然后將該flutter工具添加到您的用戶路徑。運行 flutter doctor 顯示您可能需要安裝的剩余依賴項。

Clone Flutter

如果是第一次在此機器上安裝Flutter，請克隆flutter的分支源碼，然后將該flutter工具添加到系統(tǒng)的環(huán)境變量中。例如：

git?clone?-b?beta?https://github.com/flutter/flutter.git 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=`pwd`/flutter/bin:$PATH

這里的pwd/flutter/bin:$PATH 可以使用剛才的克隆的flutter的源碼的路徑，如“/Users/xiangzhihong/Flutter/flutter/bin:$PATH”

說明：關(guān)于如何在mac上配置環(huán)境變量，請自行查詢相關(guān)資料。

運行 flutter doctor

運行以下命令來查看是否需要安裝其它依賴項，如果缺乏相關(guān)的依賴，系統(tǒng)會給出提示。

flutter?doctor

運行該命令后，系統(tǒng)會檢測設(shè)備相關(guān)的依賴情況，如下圖：該命令檢查您的環(huán)境并在終端窗口中顯示報告。Dart SDK已經(jīng)在捆 綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執(zhí)行的任務(wù)（以粗體顯示）。例如：

Android?toolchain?-?develop?for?Android?devices ??????Android?SDK?at?/Users/obiwan/Library/Android/sdk ??????Android?SDK?is?missing?command?line?tools;?download?from?https://goo.gl/XxQghQ ??????Try?re-installing?or?updating?your?Android?SDK, ??????visit?https://flutter.io/setup/#android-setup?for?detailed?instructions.

如果提示xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。下面貼一個筆者本機(mac)的環(huán)境變量配置：

export?PATH=/Users/用戶名/Documents/flutter/flutter/bin:$PATHexport?ANDROID_HOME="/Users/用戶名/Documents/android_sdk"?//android?sdk目錄，替換為你自己的即可export?PATH=${PATH}:${ANDROID_HOME}/toolsexport?PATH=${PATH}:${ANDROID_HOME}/platform-toolsexport?PUB_HOSTED_URL=https://pub.flutter-io.cnexport?FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項并自行編譯。一旦你安裝了任何缺失的依賴，請再次運行“flutter doctor”命令來驗證你是否已經(jīng)正確地設(shè)置。

更新環(huán)境變量

您在命令行只能更新當(dāng)前會話的PATH變量，如Clone Flutter repo所示。 但是，您可能需要的是永久更新此變量，以便您可以運行flutter命令在任何終端會話中。

對于所有終端會話永久修改此變量的步驟是和特定計算機系統(tǒng)相關(guān)的。通常，您會在打開新窗口時將設(shè)置環(huán)境變量的命令添加到執(zhí)行的文件中。例如：

確定您Flutter SDK的目錄，您將在步驟3中用到。

打開(或創(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的路徑，比如“~/document/code”

運行 source $HOME/.bash_profile 刷新當(dāng)前終端窗口。

注意: 如果你使用的是zsh，終端啟動時 ~/.bash_profile 將不會被加載，解決辦法就是修改 ～/.zshrc ，在其中添加：source ～/.bash_profile 2. 通過運行flutter/bin命令驗證目錄是否在已經(jīng)在PATH中。命令為：

flutter/bin

macOS支持為iOS和Android開發(fā)Flutter應(yīng)用程序。現(xiàn)在完成兩個平臺設(shè)置步驟中的至少一個，以便能夠構(gòu)建并運行您的第一個Flutter應(yīng)用程序。

iOS 設(shè)置

安裝 Xcode

要為iOS開發(fā)Flutter應(yīng)用程序，您需要Xcode 7.2或更高版本:

安裝Xcode 7.2或更新版本，可以通過APP Stroe來安裝。

配置Xcode命令行工具以使用新安裝的Xcode版本 sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer對于大多數(shù)情況，當(dāng)您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應(yīng)路徑。

確保Xcode許可協(xié)議是通過打開一次Xcode或通過命令sudo xcodebuild -license同意。

設(shè)置iOS模擬器

要準備在iOS模擬器上運行并測試您的Flutter應(yīng)用，請按以下步驟操作：

1，在Mac上，通過Spotlight或使用以下命令找到模擬器，命令如下：

open?-a?Simulator

2，通過檢查模擬器 硬件>設(shè)備 菜單中的設(shè)置，確保您的模擬器正在使用64位設(shè)備（iPhone 5s或更高版本）。

3，根據(jù)您的開發(fā)機器的屏幕大小，模擬的高清屏iOS設(shè)備可能會使您的屏幕溢出。在模擬器的 Window> Scale 菜單下設(shè)置設(shè)備比例。

4，運行 flutter run啟動您的應(yīng)用。

安裝到iOS設(shè)備

要將您的Flutter應(yīng)用安裝到iOS真機設(shè)備，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設(shè)置。

1，安裝 homebrew （如果已經(jīng)安裝了brew,跳過此步驟）。 2，打開終端并運行這些命令來安裝用于將Flutter應(yīng)用安裝到iOS設(shè)備的工具。

brew?updatebrew?install?--HEAD?libimobiledevicebrew?install?ideviceinstaller?ios-deploy?cocoapods pod?setup

如果這些命令中的任何一個失敗并出現(xiàn)錯誤，請運行brew doctor并按照說明解決問題。

遵循Xcode簽名流程來配置您的項目。

a，在你Flutter項目目錄中通過 open ios/Runner.xcworkspace 打開默認的Xcode workspace。 b，在Xcode中，選擇導(dǎo)航面板左側(cè)中的Runner項目。 c，在Runner target設(shè)置頁面中，確保在?常規(guī)>簽名>團隊?下選擇了您的開發(fā)團隊。當(dāng)您選擇一個團隊時，Xcode會創(chuàng)建并下載開發(fā)證書，向您的設(shè)備注冊您的帳戶，并創(chuàng)建和下載配置文件（如果需要）。例如：

Android設(shè)置

安裝Android Studio

要為Android開發(fā)Flutter應(yīng)用，您可以使用Mac，Windows或Linux（64位）機器.

Flutter需要安裝和配置Android Studio，步驟如下：

下載并安裝?Android Studio。

啟動Android Studio，然后執(zhí)行“Android Studio安裝向?qū)А薄＿@將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構(gòu)建工具，這是Flutter為Android開發(fā)時所必需的。

###設(shè)置您的Android設(shè)備

要準備在Android設(shè)備上運行并測試您的Flutter應(yīng)用，您需要安裝Android 4.1（API level 16）或更高版本的Android設(shè)備.

在您的設(shè)備上啟用 開發(fā)人員選項 和 USB調(diào)試 。詳細說明可在Android文檔中找到。

使用USB將手機插入電腦。如果您的設(shè)備出現(xiàn)提示，請授權(quán)您的計算機訪問您的設(shè)備。

在終端中，運行 flutter devices 命令以驗證Flutter識別您連接的Android設(shè)備。

運行啟動您的應(yīng)用程序 flutter run。

默認情況下，F(xiàn)lutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環(huán)境變量設(shè)置為SDK安裝目錄。

設(shè)置Android模擬器

要準備在Android模擬器上運行并測試您的Flutter應(yīng)用，請按照以下步驟操作：

在您的機器上啟用 VM acceleration ；

啟動 Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device；

選擇一個設(shè)備并選擇 Next選項；

為要模擬的Android版本選擇一個或多個系統(tǒng)映像，然后選擇 Next. 建議使用 x86 或 x86_64 image ；

在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬件加速，驗證AVD配置是否正確，然后選擇 Finish；

在 Android Virtual Device Manager中, 點擊工具欄的Run按鈕。模擬器啟動并顯示所選操作系統(tǒng)版本或設(shè)備的啟動畫面；

運行 flutter run 啟動您的設(shè)備. 連接的設(shè)備名是 Android SDK built for?,其中platform 是芯片系列, 如 x86。

開發(fā)工具及插件

開發(fā)Flutter應(yīng)用需要 Android Studio和VSCode配合使用。一方面，VSCode 提供了非常好的代碼提示功能。，而在 Android Studio 中，或許是 Android Studio 上的 dart 插件目前功能還不夠完善的原因，代碼提示和開發(fā)功能并不是很強大。

Android Studio

安裝插件

使用Android Studio開發(fā)Flutter移動應(yīng)用，需要先安裝Flutter和Dart插件。Android Studio安裝插件的步驟如下： 進入Plugins -> Browse Repositories-> 搜索Flutter-> 點擊install。

新建項目

打開AndroidStudio->選擇 Start a new Flutter project ->選擇 Flutter Application；如下圖：

VSCode

安裝插件

按組合鍵 command+shift+x，打開應(yīng)用商店，然后搜索“dart code”點擊安裝。

創(chuàng)建新項目

打開VSCode->選擇查看->命令面板->輸入指令Flutter New Project，點擊確定。

擴展閱讀： [1]https://gmtc.geekbang.org/

[2]https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[3]https://flutter.io/sdk-archive/#macos

[4]https://www.dartlang.org/

[5]https://en.wikipedia.org/wiki/Just-in-timecompilation

[6]https://en.wikipedia.org/wiki/Ahead-of-timecompilation

[7]https://www.dartlang.org/guides/language/language-tour

[8]https://api.dartlang.org/dev

[9]https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf

前端開發(fā)

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。