flutter入门-flutter开发环境搭建

Flutter是谷歌新推出的一款能够支持Android和IOS跨平台开发的全新的UI框架。目前来看,还是有点小火爆的,有引领下一代移动开发的势头。

特别是,在Oracle马上要将Java收费的情况下,或许是未来的一个很好的额选择。

Flutter拥有自己的一套UI渲染引擎,所以目前的测试数据来看,在性能上面,并没有比原生App性能低多少,所以目前来看,还是一套可以跟进的跨平台方案。

https://flutterchina.club是一个不错的学习平台。不过上面很多内容并没有很好的更新,所以存在一系列的问题。

这里重新整理一下windows下开发环境的搭建。

系统要求

1. win7 x64以上系统。以下没试验过,官方说明的要求。

2. Git for windows。https://git-scm.com/download/win请自行下载安装。

安装Flutter

虽然官方说可以直接下载flutter,但是在笔者跟进测试的时候,发现存在很多问题,所以还是推荐使用git进行安装。

1. 创建FlutterSDK目录。注意不要在Program Files等这样需要特殊权限的位置,建议在根目录下创建。

2. 打开CMD命令行工具,进入目录。

3. 执行 git clone https://github.com/flutter/flutter.git 命令,获取flutter最新版本。

4. 在系统环境变量中Path变量中添加:C:\[你的Flutter路径]\flutter\bin。

5. 重新打开一个cmd窗口,输入命令:flutter doctor进行flutter环境自动诊断。

6. 根据反馈信息进行调整,例如安装证书等,反馈信息中包含详细操作说明,由于情况比较多不做一一说明。

最终结果:

C:\Windows\System32>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v0.10.2-pre.41, on Microsoft Windows [Version 10.0.16299.19], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[√] Android Studio (version 3.2)
[√] Connected device (1 available)

• No issues found!

达成如下输出就说明环境配置完成。

PS:建议链接手机进行flutter doctor,手机当然要打开相关开发者USB调试选项。华为手机比较复杂,开始开发者选项请自行百度。

环境变量

虽然各种文档中都没详细说明,但是其实flutter还是需要很多环境变量的配置的。

JAVA_HOME,ANDROID_HOME都需要配置。具体请自行百度。

开发环境

虽然想说IntelliJ IDE很好用,但是毕竟收费的。主要推荐AndroidStudio吧,差别不太大。

这里默认已经安装完成了AndroidStudio,笔者用的3.2.1。

1. Files->Settings->Plugins,搜索Flutter,选择安装Flutter。笔者这时是29.1.1.说明如下:

Support for developing Flutter applications. Flutter gives developers an easy and productive way to build and deploy cross-platform, high-performance mobile apps on both Android and iOS.

2. 安装后会自动安装Dark语言支持,请确认同意安装。

3. 重启AndroidStudio

4. Files->New->New Flutter Project->Flutter Application. 本身Flutter支持多种模式开发,如Application、Package、Plugin、Module。这里测试完整项目,所以选择Application。

5. 点击运行测试的蜘蛛三角按钮。这里如果没使用梯子,可能就会报错了。原因是jcenter,google的库访问不到。

6. 修改build.gradle,注释掉jcenter(),google()。使用阿里的镜像。

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'}
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.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'}
    }
}

7. 再次运行,还是报错。

Launching lib\main.dart on Android SDK built for x86 64 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "C:\Codes\kakaCode\Android\flutter_app\android\gradlew.bat" exited abnormally:
 
> Configure project :app
 
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
 
FAILURE: Build failed with an exception.
 
* Where:
Build file 'C:\Codes\kakaCode\Android\flutter_app\android\app\build.gradle' line: 24
 
* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all artifacts for configuration 'classpath'.
   > Could not find aapt2-proto.jar (com.android.tools.build:aapt2-proto:0.3.1).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/build/aapt2-proto/0.3.1/aapt2-proto-0.3.1.jar
 
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
 
* Get more help at https://help.gradle.org
 
BUILD FAILED in 0s
  Command: C:\Codes\kakaCode\Android\flutter_app\android\gradlew.bat app:properties
 
Finished with error: Please review your Gradle project setup in the android/ folder.

这里导致的问题其实还是梯子问题。吐槽一下伟大的长城牌防火墙。

这里参考另一片文章:https://blog.csdn.net/lanwilliam/article/details/83339306 进行处理,修改一下flutterSDK包中的gradle文件就好了。改成阿里的镜像库。

8. 再次执行,成功完成变异部署过程。空项目不说明。

到这里开发环境配置完成。

模拟器

使用模拟器的情况下,记得将模拟器的 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.

补充

在android studio的Terminal窗口中,同样可以使用Flutter的命令(Flutter安装以及环境变量配置正确)。

可以使用flutter doctor进行错误排查。

使用flutter devices进行连接设备查看

使用flutter run进行执行

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值