Flutter环境搭建和创建第一个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.

优点

  • 号称是可以一次开发Android和iOS的原生级别的应用,热重新加载 ,表现灵活的用户界面 ,

  • 使用Dart语言编写一套代码即可同时在Android和iOS平台运行,性能无限接近原生,支持android 4.1以上 和 iOS8以上,一般都没有听过Dart 这个语言是什么鬼,但是啊,不要紧张,dart的语言可以说就是Java的语法,so,对于我们Android开发者来说就很容易接受

  • flutter 里面调用了Java和kotlin的类库 ,当然还有swift ,不用开发者在配置一遍

  • 并且flutter的正式版可以实现跨平台

  • -在现有的开发工具中完全支持开发,Dart语言优越性,使得同样的功能只需要很少的代码。
    迭代更加方便, hot reload 功能

我们Android开发者直接可以使用Android studio进行开发 很简单

Flutter架构

image.png

Flutter 分为两个部分,上层是函数响应式的Framework(开源),下层是Engine,可以这样理解,基于Framework开发App,在Engine里运行。

安装Flutter

环境:Mac
开发工具: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"

更新刚配置的环境变量,命令如下:
source .bash_profile
如下图

3 、然后输入flutter 进行测试。没有出现commond not found 即是配置成功。然后验证PATH是否包含了flutter


4、执行命令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插件

创建第一个Flutter Demo

  • androidStudio创建
    打开 Android Studio 新建一个Flutter项目
    点击new –> new Flutter project –> Flutter Application –> 选择Flutter SDK(刚才下载的) –> finish 创建完成

  • 终端创建
    最简单的命令即可。注意 flutter 建议使用使用这样命名方式。新建工程,工程名不能含大写字母,这与Android Stuidio不同。

flutter create myflutterapp
cd myflutterapp
flutter run

Creating Flutter Project这个界面可能会卡一会。
后面可能会遇到:
Running "flutter packages get" in try_flutter_app...

这个时候可以考虑使用国内的镜象。下面是我们的环境变量配置:


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

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

设置好镜象之后可以运行其他命令如 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的环境的搭建和创建第一个Flutter程序


遇到的问题

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

打开AndroidStudio的时候顶部的模拟器一直是loading状态,即使已经打开了模拟器。
运行flutter doctor 提示

Waiting for another flutter command to release the startup lock

查了一下github的flutter issue 找到了解决方法,如下:
1、打开flutter的安装目录/bin/cache/
2、删除lockfile文件
3、重启AndroidStudio

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容

  • - .从gitthub拉取代码: git clone -b beta https://github.com/flu...
    Thelastgame阅读 493评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,042评论 25 707
  • window.onload=function () {document.addEventListener('tou...
    豹发户阅读 773评论 0 1
  • 凌晨一两点钟的医院,四周鼾声如雷,又有死一般的沉寂。 走廊里时不时会传来一阵阵歇斯底里的咳嗽声,让人喘不过气。听声...
    磊叔读书阅读 514评论 0 1
  • 落寞的荒原里有我疯狂的忧伤 在没有花开的尘埃里自由轻狂 染上了彷徨不如死在孤独海洋 沙漠填充我流浪又干渴的遗忘
    人与诗阅读 269评论 1 5