flutter入门-flutter开发环境搭建

最新推荐文章于 2024-08-08 08:57:11 发布

b哈利路亚d

最新推荐文章于 2024-08-08 08:57:11 发布

阅读量6.4k

点赞数 1

分类专栏： flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/lanwilliam/article/details/83339594

版权

flutter 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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. 再次执行，成功完成变异部署过程。空项目不说明。

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