Flutter環(huán)境搭建和創(chuàng)建第一個(gè)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)點(diǎn)

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

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

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

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

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

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

Flutter架構(gòu)

image.png

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

安裝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文件 進(jìn)行配置，當(dāng)該文件存在時(shí)，打開并編輯該文件
open -e .bash_profile

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

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

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


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


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$

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

配置Android Studio

下載插件flutter ，在下載的過程中會(huì)自動(dòng)下載dart
在Android Studio 中添加Dart和Flutter兩個(gè)插件，其中dart用于代碼的分析，flutter用于工程的編譯。


image.png

配置flutter會(huì)自動(dòng)一起下載Dart插件

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

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

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

flutter create myflutterapp
cd myflutterapp
flutter run

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

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


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

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

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

如下代碼 是一次成功運(yùn)行的過程

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)建第一個(gè)Flutter程序


遇到的問題

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

打開AndroidStudio的時(shí)候頂部的模擬器一直是loading狀態(tài)，即使已經(jīng)打開了模擬器。
運(yùn)行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)容合作請(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)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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

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