Flutter作为谷歌的移动端跨平台开发框架,可以快速在Android和iOS上构建高质量的原生用户界面。下面我们就来完整地讲解下在Android Studio上如何搭建和运行Flutter项目。

1. 安装配置Flutter

Flutter的下载安装及环境变量配置方法

2. 安装Dart和Flutter插件

Flutter插件:用来支撑Flutter开发者的流程(运行,构建,调试,部署等等);
Dart插件:用来提供代码分析(代码检测提示,格式化,代码补全等等);

1)点击 File,选择 Settings...(或者使用快捷键 Ctrl + Alt + S)打开设置面板;

dart安装提示Android版本低 android studio dart插件_新版本

 

2)点击 Plugins 选择一种方式搜索插件;
Install JetBrains plugin...:JetBrains官网搜索安装插件;
Browse repositories...:第三方仓库搜索安装插件;
Install plugin from disk...:离线本地安装插件;

dart安装提示Android版本低 android studio dart插件_flutter_02

3)搜索框输入 Dart 搜索并找到 Dart插件,点击 Installed 安装;

dart安装提示Android版本低 android studio dart插件_Dart_03

 

4)搜索框输入 Flutter 搜索并找到 Flutter插件,点击 Installed 安装;

dart安装提示Android版本低 android studio dart插件_dart安装提示Android版本低_04

 

注意:如果不是先搜索安装 Dart 插件,而是直接搜索安装 Flutter 插件,则会提示我们还需要安装 Dart 插件,点击 Yes 继续(这里相当于步骤 3步骤 4);

dart安装提示Android版本低 android studio dart插件_新版本_05

5)插件安装完成,点击 Restart Android Studio 重启AS软件。

dart安装提示Android版本低 android studio dart插件_Dart_06

 

3. 配置SDK路径

1)打开 Settings —— Languages & Frameworks —— Dart,勾选允许项目支持Dart,配置 Dart SDK path 的路径,点击 Apply 。如果Dart SDK安装路径设置正确,下面就会显示 Version 版本信息;

dart安装提示Android版本低 android studio dart插件_dart安装提示Android版本低_07

 

2)打开 Settings —— Languages & Frameworks —— Flutter,配置 Flutter SDK path 的路径,点击 OK 。如果Flutter SDK安装路径设置正确,下面就会显示 Version 版本信息;

dart安装提示Android版本低 android studio dart插件_Dart_08

 

4. 创建项目

1)点击 File —— New —— New Flutter Project... 创建项目;

dart安装提示Android版本低 android studio dart插件_flutter_09

 

2)选择 Flutter创建类型,这里选择 Flutter Application,点击 Next

dart安装提示Android版本低 android studio dart插件_搜索_10

3)设置项目名称,SDK路径,项目保存位置等信息,点击 Next 继续下一步;

dart安装提示Android版本低 android studio dart插件_Dart_11

 

4)设置公司域名,项目包名,支持语言等信息,点击 Finish 完成;

dart安装提示Android版本低 android studio dart插件_新版本_12

 

5)项目创建完成,应用程序的代码位于lib/main.dart

dart安装提示Android版本低 android studio dart插件_新版本_13

 

6)编译运行项目。

dart安装提示Android版本低 android studio dart插件_flutter_14

 

5. 项目运行问题

在编译运行项目中,控制台可能会出现一直Initializing gradle...没动静,这个是在初始化下载最新版本的gradle,所以需要一段时间。

dart安装提示Android版本低 android studio dart插件_Dart_15

 

如果长时间Initializing gradle...无反应,可以尝试以下方法:

No.1 将项目内的gradle版本改为你本地的版本
 找到项目下的 android/gradle/wrapper/gradle-wrapper.properties 文件修改distributionUrl为本地版本(C:\Users\当前用户\.gradle\wrapper\dists):

...
distributionUrl=https://services.gradle.org/distributions/gradle-4.6-all.zip

注意:Flutter需要 gradle 4.6 或更高版本,如果本地 gradle 版本低于 4.6 也需要下载高版本才行,否则运行时会报下面错误:

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Minimum supported Gradle version is 4.6. Current version is 4.4. If using the gradle wrapper, try editing the distributionUrl in E:\flutter_app\android\gradle\wrapper\gradle-wrapper.properties to gradle-4.6-all.zip

* 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.

No.2 离线下载gradle所需的最新版本
1)手动下载最新版本的gradle安装包;
2)把gradle安装包解压于 C:\Users\当前用户\.gradle\wrapper\dists 目录下新生成的目录(Initializing gradle...在线下载新生成的目录)中;例如:C:\Users\Admin\.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv
3)重新运行编译项目。