Flutter 环境搭建 与 Android 应用的调试

简介: 本文介绍 Flutter 环境搭建 与 Android 应用的调试

Flutter 环境搭建 与 Android 应用的调试


jcLee95

已入驻阿里云社区

邮箱 :291148484@163.com
本文地址
- https://developer.aliyun.com/article/1213097
- https://blog.csdn.net/qq_28550263/article/details/122652921

目 录


1. flutter 环境搭建

2. Hello Flutter:第一个flutter 项目

3. 在物理机上调试Flutter Android 应用

4. 在第三方虚拟机上调试 Flutter Android 应用

5. 在谷歌模拟器上调试应用


1. flutter 环境搭建

1.1 下载 Flutter SDK

进入flutter官网的下载页面 https://docs.flutter.dev/get-started/install,依据你的系统版本下载对应的flutter程序:

6666666666666.png

6666666666666.png

下载完成后是一个绿色的软件包,你需要将它解压到一个于你合适的软件文件位置。解压后,打开flutter目录下的bin目录,将其添加到系统的环境变量中。

6666666666666.png

这样,当我们在其它位置使用“dart”和“flutter”命令时,都可以被系统所识别了。

1.2 下载 安卓SDK

由于国内网络环境,你大概无法直接访问谷歌安卓官方网站下载安卓 SDK以及逆行后续开发。如果可以的话,可以参考第3节(点击滚动)中步骤,在 Android Stdio软件中直接下载。

也有一些国内的镜像站点可以使用,如将 Android Stdio软件中的Http代理站点设置为http://mirrors.neusoft.edu.cn/

如果不可用也找不到其它镜像站,你可以通过在网上查找网友的相关分享资源,不过这样将增加被植入恶意代码的风险。

2. Hello Flutter:第一个flutter 项目

2.1 创建项目

2.1.1 在终端中创建 flutter 项目

在你的项目文件夹下打开终端,使用如下命令创建一个名为“myproject”的 Flutter 项目:

flutter create myproject

6666666666666.png

根据提示,进入到你的项目

2.1.2 在 Andriod stdio 中创建 flutter 项目

你需要先在 Android Stdio 软件中先配置之前我们解压好的 Flutter SDK 目录:

6666666666666.png

6666666666666.png

6666666666666.png

等待项目创建:

6666666666666.png

2.2 认识 flutter 项目结构

6666666666666.png


目录名 描述
android android 平台的相关代码
ios ios 平台的相关代码
lib flutter 代码,我们主要编写的代码就在这个文件夹
test 测试相关代码
pubspec.yaml 配置文件,一般存放一些第三方库的依赖。

其中lib下的main.dart文件即项目的入口文件:

6666666666666.png


3. 在物理机上调试Flutter Android 应用

这需要你有一台 Android 设备,不过如今绝大多数人都有,比如你的手机。要在手机上进行调试则需要使用数据线将手机连接到项目电脑,同时在你的手机上开启调试模式、允许USB调试,并且需要安装手机安卓版本对应的sdk。

运行项目:

flutter run

这时需要注意你手机上的安全提示如下:

3e45dab098a44c3498e8adce4c760763.jpg

选择“继续安装”,以指示手机完成调试项目的安装,安装完成后,可以看到和以前你安装别人的项目一样,在手机桌面有你所安装的项目图标:

1f62cfefefb541fa9aea8222807b8f03.jpg

这时,你的调试版项目就在手机上成功安装了!

打开它,可以看到这个默认的flutter示例项目效果:

978cf79a14f644b3ac2a5ac254a3bbc9.jpg

注意

这里,如果你的手机安卓系统版本对应的SDK没有下载安装的话,会有如下类似报错:

6666666666666.png

(文本):

FAILURE: Build failed with an exception.
* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
    platforms;android-30 Android SDK Platform 30
    build-tools;29.0.2 Android SDK Build-Tools 29.0.2
 To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
 Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export->licenses.html
 Using Android SDK: C:\Users\JCLee95\AppData\Local\Android\sdk
* 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 2s
Running Gradle task 'assembleDebug'...                              3.3s
Exception: Gradle task assembleDebug failed with exit code 1

这时你需要去下载对应的SDK版本,并解压到Using Android SDK字段提示的目录中,或者将它改为你自己指定的位置。

这里我是直接用 Android Studio 软件下载的。步骤如下:

1. 打开 SDK 界面(tools 下拉菜单中)6666666666666.png

2.勾选所有要安装的SDK

这里我把 安卓5 以上版本的都选上了

6666666666666.png

3.等待下载安装完成

6666666666666.png

4. 在第三方虚拟机上调试 Flutter Android 应用

4.1 安装与配置安装虚拟机

这里介绍使用夜神模拟器来调试flutter,如果愿意你也可以使用Android stdio提供的模拟器。夜神模拟器是一款运行在Windows系统上地虚拟机,当我们不使用真机调试时,可以使用该软件进行调试。该软件的主页为:https://www.yeshen.com/。点击页面上的“立即下载”开始下载。

6666666666666.png

下载完成后双击开始安装:

6666666666666.png

该模拟器不兼容Hyper-v,如果你的系统上启用了Hyper-v虚拟机,则需要将其关闭:

6666666666666.png

安装完成后,可以双击桌面上的“夜神模拟器图标”打开虚拟机主界面:

6666666666666.png

勾选其中的一台虚拟机,点击 “▶”按钮,即可对该虚拟机进行启动。

6666666666666.png

启动完成后将进入虚拟机系统的主界面,默认情况下看起来是一个宽屏设备,你也可以点击右上角红色圈所示位置的“设置”按钮,:

6666666666666.png

选择一个分辨率,或者在通过下拉框选择设备类型。

6666666666666.png

这里,我将其改为“手机版”,然后点击“保存设置”。

6666666666666.png

修改需要在重启后才能生效。

6666666666666.png

重启完成后,你将得到一个竖屏设备,如图所示:

6666666666666.png

4.2 将 Flutter 项目安装到虚拟机调试

现在,在桌面图标上右键单击,选择“打开文件所在位置”。

b1021fcc79034dfdaa9c7728ddd77246.png

其中有一个“nox_adb.exe”的应用程序,我们需要通过它来启动端口服务。

db67bf544a0c40a18812d7cf230a8123.png

在该目录下打开 cmd 窗口,或者 pwsh(powershell),运行以下命令:

.\nox_adb.exe connect 127.0.0.1:62001

Out[]: already connected to 127.0.0.1:62001

如图:

6666666666666.png

注意观察启动前 VSCode 右下角的变化.

启动前:

6666666666666.png

启动后:

6666666666666.png

说明启动成功了。如果你有多个设备,也可以在这里看到。

现在我们在终端中运行你的flutter项目:

flutter run

运行完成后,将在模拟器上看到你的项目:

6666666666666.png

打开它。完全一样的效果:

6666666666666.png

5. 在谷歌模拟器上调试应用

Android Stdio上可以下载谷歌官方的安卓模拟器进行调试。打开 Android Stdio

c639a0557f274f7999a889ec2a6478dd.png

在**Action(操作)字段下,点击Download**下载你需要的虚拟设备:

6666666666666.png

等待组件安装完成:

6666666666666.png

通过点击 “ ▶ ” 按钮运行相应地模拟器设备:

6666666666666.png

以后你也可以直接在 Android Stdio 的头部导航栏处找到你的模拟器运行。

c2b8ea8196b24be0af53264adddb1e07.png

启动好的模拟器看起来是这样的:

6666666666666.png

和第三方模拟器一样,需要在虚拟系统运行起来后才能在上面进行调试。选择好你的设备后,你可以直接点击导航栏上的图标运行你的项目。

6666666666666.png

当然,你当然同样也可以在命令行中运行,并根据命令行工具的提示,选择运行设备为你所打开的模拟器。

项目在模拟器上安装完成后会自动运行:

6666666666666.png

在你结束调试后也同样可以在桌面找到该项目的图标,这和在物理机以及第三方模拟器上都是一样的。

目录
相关文章
|
6天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
130 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
68 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
10天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
85 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
27 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
23天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
57 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
27天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
35 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
89 14
|
开发工具 Android开发 git
|
3月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
2月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
76 19

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 4
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 5
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 8
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 10
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 1
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    48
  • 2
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    27
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    68
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    85
  • 5
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    29
  • 6
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    225
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    57
  • 8
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    35
  • 9
    【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
    52
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    79