超多图手摸手,这次一定帮你搞定Win10下的Flutter开发环境(一)

简介: 发现有不少朋友被Flutter的环境安装卡住,要么是SDK或Android Studio下载太慢;要么环境变量始终设置不对;要么是Android Studio里的模拟器搞不定。总之在安装环境时遇到各种问题把想学习Flutter的热情给浇灭了。我是用Mac,但为了这篇文章特地装了虚拟机来跑windows,就想把被拦在门外的一颗颗心给拉回来。

下载必备软件


请注意本教程使用的系统是Win10 64位,请下载正确的版本。


  • flutter_windows_1.22.4-stable.zip


  • android-studio-ide-191.5977832-windows.exe


  • MuMuInstaller_1.1.1.3_nochannel_zh-Hans_1605171219.exe


  • VSCodeUserSetup-x64-1.51.1.exe


以上所有软件,我已经为大家上传到了115网盘中。请大家给个赞赞吧!


配置开发环境


请新手小白完全遵照我的设置 大神请忽略


1:Flutter SDK


将flutter_windows_1.22.4-stable.zip解压缩,会得到一个名为flutter的文件夹。将此文件夹移动到C:\flutter。如图所示


1650849354(1).png


然后你可以双击该目录下的flutter_console.bat


1650849391(1).png


接着会自动打开一个命令提示符,我们输入flutter doctor会发现,flutter的命令已经可以在这里使用了。


1650849453(1).png


1650849497(1).png


但此时会提示我们还没有Android SDK,需要我们先安装Android Studio。


如果你已经安装过Android Studio但没有使用默认地址,仍会出现这个提示,所以请务必使用默认地址,使用自定义地址的同学请跳到后面查看进阶部分。


2:安装Android Studio


下载并安装android-studio-ide-191.5977832-windows.exe


1650849551(1).png


1650849576.png


1650849596(1).png


1650849617(1).png


安装完成之后,会默认勾选打开Android Studio


1650849645(1).png


1650849668(1).png


3:安装Android SDK等


打开Android Studio后注意,这里选cancel


1650849698(1).png


然后我们会看到Android Studio提示我们配置开发环境


1650849720(1).png


本教程并不使用Android Studio来进行开发,随便选个UI主题


1650849748(1).png


这个时候,才会去下载Android SDK,有一些人可能不可以直接使用Android Studio的模拟器,后面我们再教如何使用第三方的独立Android模拟器,现在先勾选上Android Virtual Device。


1650849774(1).png


这里直接使用建议值


1650849829(1).png


会有一个界面来提醒你刚才完成的选项都是些什么,直接点Finish


1650849855(1).png


我们会进入到一个相对较长的下载安装过程,速度还可以,请耐心等待。


1650849881(1).png


都安装完成后会看到如下画面,红框部分的提示,可能大家会有些差异。


1650849916(1).png


相关文章
|
16天前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
37 3
|
5月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
78 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
3月前
|
开发工具 Android开发 iOS开发
搭建Flutter开发环境、从零基础到精通
搭建Flutter开发环境、从零基础到精通
|
3月前
|
Dart 开发工具 Android开发
flutter 搭建开发环境
flutter 搭建开发环境
30 1
|
3月前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习
|
4月前
|
Dart 开发工具 Android开发
在 Windows 操作系统上安装和配置 Flutter 开发环境
在 Windows 操作系统上安装和配置 Flutter 开发环境
N..
|
5月前
|
开发框架 Dart 开发工具
搭建Flutter开发环境
搭建Flutter开发环境
N..
42 0
|
Web App开发 Dart 前端开发
flutter开发环境搭建
flutter开发环境搭建
162 0
|
Java 开发工具 Android开发
遇到的几个flutter开发环境问题
遇到的几个flutter开发环境问题
|
开发工具 Android开发 Windows
Flutter AndroidStudio 开发环境报错cmdline-tools component is missing
Flutter AndroidStudio 开发环境报错cmdline-tools component is missing
下一篇
无影云桌面