windows 下Flutter环境排坑

    1.前言

    2018年3月google大会上发布了flutter的beta版本,号称有着超越原生的渲染速率,并且有混合开发的优势。个人觉得更多是因为android有些历史原因导致有些坑很难排掉,于是换了种思路来做这些事。

2.目前手机应用开发框架模式对比

(注:此节图来自http://blog.csdn.net/ahence/article/details/79435378)

    原生SDK

        绿色区域代表你的源代码(kava kotiln oc swift等等)手机平台的canvas绘制UI 并将事件,服务部分传递给源码编译后的代码处理,此种模式的限制在于手机平台和源码,SDK不同导致最后展示效果不同。最令人诟病的不就是android的适配问题嘛。

《windows 下Flutter环境排坑》

    Hybrid方式

此种方式用js代码做为源码通过JSbridge桥接的方式来将源码和事件,服务进行通信。缺点就是需要频繁的调用JSbridge导致UI不流畅,这也是Hybrid的弊端。

《windows 下Flutter环境排坑》

ReactNative方式

RN创造性的直接通过JSBridge将js代码转化成原生的UI控件,之后就通过原生的处理方式来解决频繁调用Bridge导致的卡顿情况。同样的弊端在于也需要桥接和渲染,而且版本更迭有点快不停的加新特性。好处不言而喻混合开发+渲染效果的组合

《windows 下Flutter环境排坑》

Flutter方式

    Flutter直接通过Dart语言编译成多平台源码直接和平台通信不通过桥接的方式使得UI渲染的速度加快了,另外Flutter的UI控件是在Fluuter框架里而不是直接调用原生控件这就使得控件在不同平台的展示效果相同解决了跨平台效果不同的问题。缺点是第一次需要通过dart预编译所以加载速度会慢点(相比原生)另外由于自带渲染器所以会导致应用体积会增大

《windows 下Flutter环境排坑》

3.window系统下搭建Flutter的排坑

3.1先决条件:下载git 并且配置环境变量

3.1 github上面下载FlutterSDK

 git clone -b beta https://github.com/flutter/flutter.git

如果长时间没下载下来或者连接失败 先设置一下这两个环境变量

set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

还是不行  就换成国内码云上下载

git clone https://gitee.com/mirrors/Flutter.git

下载完成后将flutter加到环境变量里

set PATH="$PWD/flutter/bin:$PATH"

切换到flutterSDK所在路径下检测 当前flutter需要的依赖并下载依赖(此步骤也可能会因为被公司墙掉或者网速问题卡着)

 flutter doctor

3.2下载Android Studio 并且安装SDK等等(即android开发环境配置)我是在此步运行成功了一个测试程序才走下一步的

3.3 下载 IntellJ IDE 并下载Flutter,Dart两个插件(IntelliJ IDE>setting>Plugins 

3.4 此时基础环境已经搭建好了,可以开始第一个测试Flutter程序的踩坑了

3.5.1重启IDEA 选择flutter 配置flutter的SDK路径

《windows 下Flutter环境排坑》

3.5.2配置Dart的路径

Flutter默认会自带一个Dart的SDK   路径在:flutter\bin\cache\dart-sdk

如果找不到或者IDEA不识别可以通过Chocolatey来安装Dart SDK

安装 Chocolatey:管理员权限运行cmd 输入如下命令: 

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\
choco install dart-sdk 1.12.0
choco install dartium

默认的choco下载路径是c:\tools

《windows 下Flutter环境排坑》

    3.6创建项目名 flutter的项目名称是小写字母+下划线的方式 不允许大写字母开头这点事和之前android项目不同的地方

《windows 下Flutter环境排坑》

3.7 finish之后就会开始漫长的等待时间  第一次创建flutter时间较长如果长时间不进去可以重新创建(亲测会比之前快点)

3.8进去会有gradle 不能用的event  不必理会

Migrate Project to Gradle?
This project does not use the Gradle build system. We recommend that you migrate to using the Gradle build system.

正常的话 启动一下模拟机或者连接一下真机就可以启动了。由于IDE的各种抽风(提示找不到 gradle,sdk版本不合适等等)启动不了。不还有网管的绝招么 重启一下试试 。。

下面是启动成功的界面

《windows 下Flutter环境排坑》

    原文作者:达瓦里希11
    原文地址: https://blog.csdn.net/sl317515877/article/details/79455592
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞