Flutter環(huán)境搭建和創(chuàng)建第一個Flutter程序

github地址

什么是Flutter

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

優(yōu)點

  • 號稱是可以一次開發(fā)Android和iOS的原生級別的應(yīng)用，熱重新加載 ，表現(xiàn)靈活的用戶界面 ，

  • 使用Dart語言編寫一套代碼即可同時在Android和iOS平臺運行，性能無限接近原生，支持android 4.1以上 和 iOS8以上，一般都沒有聽過Dart 這個語言是什么鬼，但是啊，不要緊張，dart的語言可以說就是Java的語法，so,對于我們Android開發(fā)者來說就很容易接受

  • flutter 里面調(diào)用了Java和kotlin的類庫 ，當然還有swift ，不用開發(fā)者在配置一遍

  • 并且flutter的正式版可以實現(xiàn)跨平臺

  • -在現(xiàn)有的開發(fā)工具中完全支持開發(fā)，Dart語言優(yōu)越性，使得同樣的功能只需要很少的代碼。
    迭代更加方便， hot reload 功能

我們Android開發(fā)者直接可以使用Android studio進行開發(fā) 很簡單

Flutter架構(gòu)

image.png

Flutter 分為兩個部分，上層是函數(shù)響應(yīng)式的Framework（開源），下層是Engine，可以這樣理解，基于Framework開發(fā)App，在Engine里運行。

安裝Flutter

環(huán)境：Mac
開發(fā)工具：Android studio 3.0

  • 安裝Flutter
    1、下載Flutter源碼 （官方建議下載beta分支）
git clone -b beta https://github.com/flutter/flutter.git

2、代碼下載之后在終端中打開bash_profile文件 進行配置，當該文件存在時，打開并編輯該文件
open -e .bash_profile

export PATH=$PATH:XXX/flutter/bin   或者(效果是一樣的)
export PATH="XXX/flutter/bin:$PATH"

更新剛配置的環(huán)境變量，命令如下：
source .bash_profile
如下圖

3 、然后輸入flutter 進行測試。沒有出現(xiàn)commond not found 即是配置成功。然后驗證PATH是否包含了flutter


4、執(zhí)行命令flutter doctor ，命令的作用是檢測還需要安裝的依賴。


wangweideMac:~ wangwei$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[?] Flutter (Channel beta, v0.6.0, on Mac OS X 10.12.6 16G1510, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
 ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[?] iOS toolchain - develop for iOS devices
 ? Xcode installation is incomplete; a full installation is necessary for iOS development.
   Download at: https://developer.apple.com/xcode/download/
   Or install Xcode via the App Store.
   Once installed, run:
     sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 ? Brew not installed; use this to install tools for iOS device development.
   Download brew at https://brew.sh/.
[?] Android Studio (version 3.0)
[?] Connected devices (1 available)

! Doctor found issues in 2 categories.
wangweideMac:~ wangwei$

證明就安裝成功了
如果第二項 android toolchan...... 哪里出錯 ,需要按照提示下載新的sdk，本人在安裝過程就遇到此坑，

配置Android Studio

下載插件flutter ，在下載的過程中會自動下載dart
在Android Studio 中添加Dart和Flutter兩個插件，其中dart用于代碼的分析，flutter用于工程的編譯。


image.png

配置flutter會自動一起下載Dart插件

創(chuàng)建第一個Flutter Demo

  • androidStudio創(chuàng)建
    打開 Android Studio 新建一個Flutter項目
    點擊new –> new Flutter project –> Flutter Application –> 選擇Flutter SDK（剛才下載的） –> finish 創(chuàng)建完成

  • 終端創(chuàng)建
    最簡單的命令即可。注意 flutter 建議使用使用這樣命名方式。新建工程，工程名不能含大寫字母，這與Android Stuidio不同。

flutter create myflutterapp
cd myflutterapp
flutter run

Creating Flutter Project這個界面可能會卡一會。
后面可能會遇到：
Running "flutter packages get" in try_flutter_app...

這個時候可以考慮使用國內(nèi)的鏡象。下面是我們的環(huán)境變量配置:


export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

設(shè)置好鏡象之后可以運行其他命令如 flutter run 或者 flutter packages get

如下代碼 是一次成功運行的過程

I/SurfaceView( 6339): updateWindow -- OnPreDrawListener, mHaveFrame = true, this = io.flutter.view.FlutterView{cff2a5f VFE...... .F...... 0,0-720,1280}
 5.4s

??  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on vivo Y67A is available at: http://127.0.0.1:49604/
For a more detailed help message, press "h". To quit, press "q".
I/[MALI][Gralloc]( 6339): [+]r_hnd(0x7f6e98b140), client(61), share_fd(69)
D/GraphicBuffer( 6339): register, handle(0x7f6e98b140) (w:720 h:1280 s:720 f:0x1 u:0x000b00)
I/[MALI][Gralloc]( 6339): [+]r_hnd(0x7f6e98bc80), client(61), share_fd(71)
D/GraphicBuffer( 6339): register, handle(0x7f6e98bc80) (w:720 h:1280 s:720 f:0x1 u:0x000b00)
I/System  ( 6339): FinalizerDaemon: finalize objects = 1

這就完成了Flutter的環(huán)境的搭建和創(chuàng)建第一個Flutter程序


遇到的問題

Flutter doctor Waiting for another flutter command to release the startup lock

打開AndroidStudio的時候頂部的模擬器一直是loading狀態(tài)，即使已經(jīng)打開了模擬器。
運行flutter doctor 提示

Waiting for another flutter command to release the startup lock

查了一下github的flutter issue 找到了解決方法，如下：
1、打開flutter的安裝目錄/bin/cache/
2、刪除lockfile文件
3、重啟AndroidStudio

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

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

  • - .從gitthub拉取代碼： git clone -b beta https://github.com/flu...
    Thelastgame閱讀 562評論 0贊 1
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25贊 708
  • window.onload=function () {document.addEventListener('tou...
    豹發(fā)戶閱讀 868評論 0贊 1
  • 凌晨一兩點鐘的醫(yī)院，四周鼾聲如雷，又有死一般的沉寂。 走廊里時不時會傳來一陣陣歇斯底里的咳嗽聲，讓人喘不過氣。聽聲...
    磊叔讀書閱讀 622評論 0贊 1
  • 落寞的荒原里有我瘋狂的憂傷 在沒有花開的塵埃里自由輕狂 染上了彷徨不如死在孤獨海洋 沙漠填充我流浪又干渴的遺忘
    人與詩閱讀 288評論 1贊 5

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