13518219792
如果和我一样，用惯了VS Code来开发项目的话，那就跟我一起来配置一下如何在VS Code里运行flutter项目。
成都创新互联专注于企业成都全网营销推广、网站重做改版、襄垣网站定制设计、自适应品牌网站建设、HTML5、商城开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为襄垣等各大城市提供网站开发制作服务。
1.在VS Code里安装扩展：
2.在VScode上打开打开终端，快捷键：Ctrl+~（Tab上一个键），在终端上输入：flutter create flutter_app02，即可创建完成！
也可以把之前的项目放到工作区
3.在终端中运行命令：flutter run
运行的时候你会发现手机提示你安装个app，点击安装完成，项目就在手机上显示了，下图是运行成功的提示。
下图是手机效果：
如果报错的话，运行下清缓存的命令：flutter clean，把文件夹.gradle删掉，然后flutter run重新跑下项目。
Flutter需要1.5.4以上的版本，先升级一下：
切换到master分支：
编译web端需要官方提供的工具flutter_web：
安装完成以后会有一个警告：
需要配置一下环境变量：
立即生效：
webdev在命令行敲一下看看安装成功没，如果报 flutter/.pub-cache/bin/webdev: line 7: dart: command not found，是因为dart-sdk环境没配置好：
再加一行：
VSCode里创建新项目，目录里会多一个web：
此时可以在设备里选择chrome进行调试：
或者在项目目录下执行：
环境准备阶段：
android-studio 版本：android-studio-ide-191.5977832-windows.exe 3.5.2
flutter版本：stable 版本 （完成系统环境变量 path配置）
dart版本：2.12.0 （完成系统环境变量 path配置）
完成相关软件安装。
配置flutter相关SDK及andriod studio路径：
flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"
flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"
执行flutter doctor运行成功。
夜神模拟器地址：D:\Program Files\Nox\bin （完成系统环境变量 path配置）
andriod SDK tools：C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools （完成系统环境变量 path配置）
nox_adb.exe connect 127.0.0.1:62001
dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin
将C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 复制至D:\Program Files\Nox\bin覆盖
adb.exe，此外重新复制adb.exe命名为nox_adb.exe，替换原有的nox_adb.exe。
cdm 输入nox_adb version 及adb version发现版本一致。
启动野神模拟器，输入adb devices发现虚拟设备，执行flutter devices发现 127.0.0.1:62001 设备。
修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties
distributionUrl=
修改C:\learn_flutter\first_flutter\android\build.gradle
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle
buildscript {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
}
}
//private static final String DEFAULT_MAVEN_HOST = " ";
private static final String DEFAULT_MAVEN_HOST = " ";
修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle
repositories {
google()
jcenter()
maven {
//url "$storageUrl/download.flutter.io"
url " "
}
}
执行 flutter run启动成功。
环境搭建坑点在于JDK兼容问题以及网络问题。
Flutter可能是我们做移动端或者前端听的比较多的一个名词。目前前端和移动端都趋向于向大前端发展。我们都知道由于Android ios 前端的运行环境、发开语言、平台特性的不同，导致同时学习三个平台的学习成本是极高的。所以React Native 、Weex等跨平台技术应运而生了，而这些跨平台技术由于偏高层解释性的特性就会出现运行效率和对原生依赖度高耦合性高等问题。随着2018年flutter beta1正式发布，一种更优美更高效的跨平台技术进入我们的视线。
但是RN也并没有被广泛的接纳，从阿里开始使用到放弃，里面的很多坑都绕不过去。写一次到处跑确实很诱人，从企业角度讲，可以节省大量的人力，但是却忽略了一个很基础的问题，不同平台是否希望如此，苹果是否会愿意自己的生态被打破，不同平台的特性是否应该被归为一致。
1. 建立一个flutter项目的命令
2. 在ios文件夹下，生成pods文件夹
3. Xcode环境签名设置；
把错误的版本删除再添加，可解决签名错误问题；必须先删除再添加，直接修改可能不起作用。团队开发，必须使用团队的签名。
4.运行创建的flutter项目；
选择真机、模拟机，点击运行按钮，或使用命令运行：
下面两步是赠送的：
5.新加一款插件，所涉及的命令；
ios 端所涉及的命令
6. 刚更新的插件和已有的插件有冲突怎么办？
可以试一试以下步骤：
