Android Studio搭建Flutter教程

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

1. 安装配置Flutter

Flutter的下载安装及环境变量配置方法,请移驾 —— 《Flutter开发环境搭建》

2. 安装Dart和Flutter插件

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

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

Android Studio搭建Flutter教程_第1张图片

 

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

Android Studio搭建Flutter教程_第2张图片

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

Android Studio搭建Flutter教程_第3张图片

 

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

Android Studio搭建Flutter教程_第4张图片

 

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

Android Studio搭建Flutter教程_第5张图片

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

Android Studio搭建Flutter教程_第6张图片

 

3. 配置SDK路径

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

Android Studio搭建Flutter教程_第7张图片

 

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

Android Studio搭建Flutter教程_第8张图片

 

4. 创建项目

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

Android Studio搭建Flutter教程_第9张图片

 

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

Android Studio搭建Flutter教程_第10张图片

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

Android Studio搭建Flutter教程_第11张图片

 

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

Android Studio搭建Flutter教程_第12张图片

 

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

Android Studio搭建Flutter教程_第13张图片

 

6)编译运行项目。

Android Studio搭建Flutter教程_第14张图片

 

5. 项目运行问题

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

Android Studio搭建Flutter教程_第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)重新运行编译项目。

下载

Gradle下载地址

你可能感兴趣的:(flutter)