配置Flutter的开发环境
首先需要安装iOS的开发工具Xcode和Android开发工具AndroidStudio。废话不多说具体安装步骤就不多讲了。
iOS和Android开发工具
1.1配置Flutter国内镜像
由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，可以将如下环境变量加入到用户环境变量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
当然可以在命令行中ping下这2个地址是否可以通（ping不通不代表不能访问，可以ping通一定可以访问）。
ping
1.2下载Flutter的SDK
进入flutter的官网，下载最新的稳定版就行了
下载fultter的sdk
1.3检查Flutter环境是否ok
配置好本地环境变量后，在命令行中执行flutter doctor发现如下错误
Android相关协议确定
针对此问题，只需要执行
flutter doctor --android-licenses一路输入y即可。
chrome浏览器报错
此问题是找不到电脑本地的Chrome浏览器，由于我本地浏览器的名字修改了，把对应的Chrome.app的名字改成
Google Chrome.app即可。
最后再执行下
flutter doctor
命令检查下flutter环境
flutter环境检查
检查结果中[x]是必须要处理的问题，[!]警告可以暂时不处理。
1.4在AndroidStudio中安装flutter和dart插件
flutter和dart插件
配置sdk
运行Flutter的demo的helloWord
下载的flutter的压缩包中有自带的demo，路径 本地路径/flutter/examples/hello_world。使用as打开hello_world工程。查看工程的readme.md文件，使用flutter run(在命令行下进入到工程的目录下)命令运行工程。
flutter目前一套代码支持web、iOS、Android端分别运行。
2.1运行在web端
在as中选择Chrome，然后点击运行
web
web运行
2.2运行在iOS端
首先要启动一个iOS的模拟器，使用命令open -a Simulator
ios
ios运行
2.3运行在Android端
Android
在Android端运行比较曲折，遇到了好几种错误。
错误1
Exception in thread "main" java.net.ConnectException: Operation timed out
Android运行模拟器
修改gradle-wrapper.properties配置文件的distributionUrl为本地的文件路径。
类似这样配置：
distributionUrl=file\:/Users/用户名/.gradle/wrapper/dists/gradle-5.1.1-all.zip
错误2
error: resource android:attr/fontVariationSettings not found.
修改build.gradle配置的compileSdkVersion为28。
另外由于众所周知的原因，最好把Android的build.gradle文件配置依赖修改如下
buildscript {
repositories {
//google()
//jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
maven {url 'http://download.flutter.io'}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.4.1'
}
}
allprojects {
repositories {
//google()
//jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
maven {url 'http://download.flutter.io'}
}
}
2.4多个端的控制台
经过运行我们发现，同时运行多个端，会有多个窗口来控制对应的客户端。
前端控制窗口
如果代码修改后，需要同步到对应的前端查看修改效果，直接点击对应前端控制窗口中的
Flutter Hot Restart 即可很快同步到前端，当然在页面很多的情况下暂时没有测试，不知道同步效果如何。
3多个端运行效果
3个端运行效果
参考地址：
*【1】flutter中文官网
*【2】flutter官网
*【3】Dart中文官网
*【4】macOS中配置Flutter开发环境
网友评论