Flutter安装与配置(windows)

本文详细介绍Flutter环境的搭建过程,包括下载安装Flutter SDK、配置环境变量、安装Android Studio及模拟器、安装证书等步骤。同时,介绍了如何使用Android Studio和VScode创建、调试和运行Flutter项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flutter安装

下载安装Flutter SDK

  1. flutter官网下载安装包Flutter SDK

    ps: Dart SDK已经捆绑在Flutter SDK中,故无需在单独安装Dart SDK。

  2. 将下载的安装包zip解压到你想安装Flutter SDK的路径(如D:\flutter,注意不要将flutter安装到需要一些高权限的路径如C:\Program Files\)

  3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击它,即可自动启动flutter命令行

更改环境变量

  1. 打开 “控制面板>用户帐户>用户帐户>更改我的环境变量”,在用户变量下新建两个条目(建议最好使用Flutter社区这个镜像,我是掉了这个坑,但注意官网说也无法保证一直可用):

flutter doctor测试

终端输入:flutter doctor

该命令检查您的环境并在终端窗口中显示报告,这个命令初次运行可能会很慢,Flutter会自动安装所需依赖,并进行编译。建议科学上网。(如果有[!]x标志,表示本行检测没有通过,就需要我们设置或者安装相应的软件了)

安装Android Studio,并创建模拟器(avd虚拟机)

官网下载安装包 ,之前做react-native项目时已经安装过了,这里就不细讲了

Android Studio安装Flutter插件

打开Andorid Studio,菜单栏File => Settings => Plugins,在搜索框中输入futtler,点击安装,安装完成后,再重启一下Android Studio

ps:上图为已安装过了

安装Android证书

终端输入:flutter doctor --android-licenses(注意:提示一律输y)

到此,成功完成Flutter的安装。可以在终端输入:flutter doctor 来检查安装条目是否都成功。

运行Flutter

  1. 打开Android Studio,菜单栏File => New => New Flutter Project,选择第一个选项Flutter Application(flutter应用)

输入项目名称(注意:项目名称必须是小写,单词之间用下划线隔开),一直点next,最后点finish,系统即可自动创建一个Flutter项目。

  1. 在打开的Android Studio中可以看到上一步创建好的Flutter项目。

  2. 开启模拟器(右上角的ADV Manager图标按钮)

  3. 模拟器运行成功后,点击Android Studio右上角的debug或者run图标按钮。(此步骤需要一点时间,注意观察console区域信息,如下图表示编译成功)

  4. 上一步成功编译后,就可在模拟器中看到flutter应用页面了

使用VScode编写并运行Flutter应用

  1. 在VScode中安装Flutter插件(Dart插件已捆绑到Flutter插件中了,故无需再单独安装Dart)

  2. 模拟器开启下,使用VScode打开Flutter项目,在VScode终端输入:flutter run,即可在模拟器下打开该应用页面了。

ps:打开VScode终端快捷键:ctrl+~

VScode中调试Flutter应用

在VScode中的终端运行flutter run后,会有一段红色文字的提示,即可按下如下按键(注意:要把鼠标光标放在终端上,再按对应按键):

 r 键:点击后即可热更新加载(应该是重新加载)。
 p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
 o 键:切换android和ios的预览模式。
 q 键:退出调试预览模式。
复制代码

若觉得按 r 键来热更新代码比较麻烦,可以开启VScode的debug模式,就可以实现真正的热更新了(修改代码保存后,即可在模拟器上立即看到页面改变效果了)

转载于:https://juejin.im/post/5c20cbbdf265da611639cd88

<think>好的,我需要帮用户解决在Windows安装配置Flutter的问题。首先,我得回顾一下用户提供的引用内容,看看有哪些关键步骤和信息。引用[1]提到下载SDK并解压,然后配置环境变量到bin目录。引用[2]和[3]也强调了环境变量的配置。引用[4]和[5]提到了其他相关配置,比如GRADLE_OPTS和JAVA_HOME的设置,可能涉及Android Studio的配置。 用户的主要需求是安装配置Flutter,包括环境变量设置和SDK下载。我需要按照逻辑顺序整理步骤:下载SDK、解压、配置环境变量、验证安装,可能还需要处理依赖项如Android Studio。 要注意用户可能遇到的常见问题,比如环境变量路径是否正确,是否需要配置额外的系统变量如GRADLE_OPTS,或者JAVA_HOME的设置。此外,引用[4]提到的文件编码问题也可能导致问题,需要提醒用户注意。 另外,用户示例中的代码块和引用标识需要遵循系统指令,比如使用正确的LaTeX格式,不过这个问题可能不涉及数学公式,所以可能不需要用。但需要确保回答结构清晰,分步骤说明,并引用正确的来源。 最后,生成相关问题时要围绕Flutter安装配置的扩展,比如性能优化、常见错误处理等。需要确保回答准确,引用正确的引用来源,比如引用[1]到[5]中的相关内容。 现在开始组织回答: 1. 下载Flutter SDK:根据引用[1]和[2],用户需要访问官方网站下载SDK,解压到指定目录。 2. 配置环境变量:将Flutter的bin目录添加到系统Path中,如引用[1]、[3]所示。 3. 运行flutter doctor检查依赖,安装Android Studio等工具。 4. 配置其他变量如GRADLE_OPTS(引用[4])和JAVA_HOME(引用[5])可能也是必要的。 5. 验证安装是否成功,运行示例应用。 需要提醒用户注意路径的正确性,以及可能需要的系统重启使环境变量生效。同时,引用相关引用来源时,如环境变量配置步骤来自引用[1]和[3],其他配置如GRADLE_OPTS来自引用[4]。 相关问题部分可以包括如何处理安装中的常见错误,如何配置Android工具链,或者如何优化Flutter的性能等。</think>### Windows 系统 Flutter 安装配置教程 #### 1. 下载 Flutter SDK 1. 访问官方下载地址:[Flutter SDK Releases](https://flutter.dev/docs/development/tools/sdk/releases#windows) 选择系统匹配的稳定版本(如示例中的 `v1.7.8+hotfix.3`)[^1][^2]。 2. 将下载的压缩包(如 `flutter_windows_v1.7.8+hotfix.3-stable.zip`)解压到非系统盘目录(例如 `D:\work\flutter\`)[^1][^3]。 #### 2. 配置环境变量 1. **添加 Flutter 路径到系统 Path** - 右键“此电脑” → 属性 → 高级系统设置 → 环境变量 - 在“系统变量”中找到 `Path` → 编辑 → 新建 → 输入 Flutter 的 `bin` 目录路径(例如 `D:\work\flutter\flutter\bin`)[^1]。 2. **可选配置** - 添加 `GRADLE_OPTS` 变量:变量值为 `-Dfile.encoding=UTF-8`(解决编码问题)[^4]。 - 配置 `JAVA_HOME`:指向 JDK 安装路径(例如 `C:\Program Files\Java\jdk1.8.0_171`)[^5]。 #### 3. 验证安装 1. 打开命令提示符,运行以下命令: ```bash flutter doctor ``` - 输出会提示未安装的依赖(如 Android Studio、Android SDK 等)[^2]。 2. 根据提示安装缺失工具(如 Android Studio)并接受许可协议。 #### 4. 配置 Android 开发环境 1. 安装 [Android Studio](https://developer.android.com/studio),启动后安装以下组件: - Android SDK - Android Emulator - Flutter 插件(通过 Plugins 搜索安装) 2. 在 Android Studio 中创建虚拟设备(AVD)以运行 Flutter 应用。 #### 5. 测试 Flutter 项目 1. 运行以下命令创建并启动示例项目: ```bash flutter create my_app cd my_app flutter run ``` 2. 若设备或模拟器已连接,应用将自动启动。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值