在AndroidStudio创建Flutter项目并运行到模拟器

1.Flutter简介

Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。

官网:

Flutter中文网 官网

2.安装AndroidStudio并下载Flutter插件

AndroidStudio安装方法可以参考这篇文章:2023最新版Android studio安装入门教程(非常详细)从零基础入门到精通,看完这一篇就够了-CSDN博客

我的安装AndroidSDK地址保存在D:\PubData\Android\SDK。如下图所示:

在AndroidStudio开发工具中File>Settings>Plugins中搜索Flutter安装。第一次安装Flutter会提示安装Dart插件,点击Install按钮。最后重启IDE使插件生效。

查看到安装好了Flutter和Dart。

3.Flutter SDK安装

官网地址:

Archive | Flutter

根据自己的环境下载最新稳定版本(Stable channel),当前最新版是3.19.6

下载完成后,解压到某一位置,D:\PubData\flutter_windows_3.19.2-stable

4.设置环境变量

设置系统环境变量:

添加用户环境变量的Path:

设置完成后,在cmd命令行执行flutter doctor来检查flutter环境是否正常。如果有问题会显示红色的X,根据具体情况自行解决,再进行检查。如下图中的X问题的解决方法:

4.1问题1---缺少安装插件 cmdline-tools component is missing

描述:

!\] Android toolchain - develop for Android devices (Android SDK version 34.0.0) X cmdline-tools component is missing Run \`path/to/sdkmanager --install "cmdline-tools;latest"\` See https://developer.android.com/studio/command-line for more details. **解决办法:根据路径Settings\>Languages\&frameworks\>SDK Tools\>Android SDK Command-line Tools(latest)勾选点Apply按钮安装。** ![](https://file.jishuzhan.net/article/1786850627976957953/a46b6d5094f039a364f756a2b9698ebb.webp) ![](https://file.jishuzhan.net/article/1786850627976957953/c9c4cd6880c1a472243f288b9d66519a.webp) ### 4.2问题2Android license status unknown. **描述:** X Android license status unknown. Run \`flutter doctor --android-licenses\` to accept the SDK licenses. **解决办法:** 执行 `flutter doctor --android-licenses `,如果报错版本问题一般是`Android Studio`自带了`jdk`版本与`JAVA_HOME`配置的`jdk`版本冲突了,可以检查 `JAVA_HOME` 环境变量,将路径设置为`D:\\Android Studio\\jre` 再执行 `flutter doctor --android-licenses `并同意各种协议。 ### 4.2问题3 Network resources网络资源访问超时 **描述:** \[!\] Network resources X A network error occurred while checking "https://maven.google.com/": 信号灯超时时间已到 X A network error occurred while checking "https://github.com/": 信号灯超时时间已到 **解决办法:按如下步骤修改** **a.修改flutter安装路径下packages\\flutter_tools\\lib\\src\\路径下的http_host_validator.dart文件中的kMaven配置:** const String kMaven = 'https://maven.aliyun.com/repository/google/'; ![](https://file.jishuzhan.net/article/1786850627976957953/d3016ac1d00328ad47824e9a9f8e9403.webp) **b.删除flutter安装目录/`bin/cache` 文件夹** **c.重新执行flutter doctor** ![](https://file.jishuzhan.net/article/1786850627976957953/53b739a7b6e533d58584005846a869be.webp) ## 5.Android 开发环境设置 ### 5.1 创建android模拟器 在菜单 `Tools > Device Manager` 点击 `Create device` 创建设备 。 ![](https://file.jishuzhan.net/article/1786850627976957953/7cc0fa2aa45538767d4269a51ddac215.webp) 默认提供了一些设备,我这里选择一个pixel 3a. ![](https://file.jishuzhan.net/article/1786850627976957953/5115c2b0ae28bcbca798d805b32a4cb0.webp) 选择镜像并下载,建议选择 x86 或 x86_64,点击finish创建模拟器。 ![](https://file.jishuzhan.net/article/1786850627976957953/f1a9f5eb0c0cc3ad3fb6b96ead793c1c.webp) 点击运行,效果如下: ![](https://file.jishuzhan.net/article/1786850627976957953/f677a86b110497e52190ce9866ab49fa.webp) ### 5.2创建Flutter项目 在 Android Studio 打开 `File > New > New Flutter Project`,选择SDK路径: ![](https://file.jishuzhan.net/article/1786850627976957953/063a893ac0867acafc7218d6b9175968.webp) 点击Next,填写项目名称,配置Android和[ios](https://it.cha138.com/ios/ "ios")语言,点击 Create: ![](https://file.jishuzhan.net/article/1786850627976957953/09fa78f32333eca9bd0e9384ac04d1e5.webp) 报错提示Projectname的命名方式不对,我改为my_test_app后就可以了,如下是创建好的项目: ![](https://file.jishuzhan.net/article/1786850627976957953/736b899ac2a4ccf0e671c3a9d808f194.webp) 选择安卓模拟器,发现是灰色的,点run按钮,提示:not applicable for the "main.dart" configuration,解决办法,在Project Structure中要配置SDK。如下配置后,重启生效: ![](https://file.jishuzhan.net/article/1786850627976957953/7af7c5ecaaec784d30b9378efeb673fd.webp) 运行报错: ![](https://file.jishuzhan.net/article/1786850627976957953/a55f3d525a69149b368a5dd4d9ba5780.webp) 换成默认的jdk试下: ![](https://file.jishuzhan.net/article/1786850627976957953/1b10e7cc39e6abc3e3f0ef330c9f3dc3.webp) 经过一段长时间的等待,终于可以在模拟器上看到运行的程序了。 ![](https://file.jishuzhan.net/article/1786850627976957953/b59040f2facf2d63d813f8c89971fa7f.webp) console窗口的信息如下: ```bash Launching lib\main.dart on sdk gphone64 x86 64 in debug mode... Running Gradle task 'assembleDebug'... Checking the license for package Android SDK Tools in D:\PubData\Android\SDK\licenses License for package Android SDK Tools accepted. Preparing "Install Android SDK Tools (revision: 26.1.1)". "Install Android SDK Tools (revision: 26.1.1)" ready. Installing Android SDK Tools in D:\PubData\Android\SDK\tools "Install Android SDK Tools (revision: 26.1.1)" complete. "Install Android SDK Tools (revision: 26.1.1)" finished. Checking the license for package Android SDK Build-Tools 30.0.3 in D:\PubData\Android\SDK\licenses License for package Android SDK Build-Tools 30.0.3 accepted. Preparing "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)". "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" ready. Installing Android SDK Build-Tools 30.0.3 in D:\PubData\Android\SDK\build-tools\30.0.3 "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" complete. "Install Android SDK Build-Tools 30.0.3 (revision: 30.0.3)" finished. √ Built build\app\outputs\flutter-apk\app-debug.apk. Installing build\app\outputs\flutter-apk\app-debug.apk... Debug service listening on ws://127.0.0.1:64507/QBYNZVjlvMs=/ws Syncing files to device sdk gphone64 x86 64... ``` ![](https://file.jishuzhan.net/article/1786850627976957953/42ec6312396b7e1351cbc885ffc5da49.webp) 至此,在Androidstudio上创建Flutter项目成功。

相关推荐
江上清风山间明月2 小时前
一周掌握Flutter开发--9. 与原生交互(下)
flutter·交互·原生·methodchannel
GeniuswongAir2 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
sayen2 小时前
记录 flutter 文本内容展示过长优化
前端·flutter
勤劳打代码2 小时前
剑拔弩张——焦点竞争引的发输入失效
flutter·客户端·设计
张风捷特烈6 小时前
Flutter 伪 3D 绘制#02 | 地平面与透视
android·flutter
关山月7 小时前
Flutter 图像上传与裁剪
flutter
陈朝晖SHS7 小时前
Flutter求助贴
flutter
恋猫de小郭8 小时前
Flutter Roadmap 2025 发布,快来看看有什么更新吧
android·前端·flutter
陈皮话梅糖@12 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
小墙程序员19 小时前
Flutter 教程(十)主题
flutter