Flutter环境搭建和创建第一个Flutter程序
原创
什么是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架构
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.git2、代码下载之后在终端中打开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用于工程的编译。
配置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 runCreating 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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。