2042年当前最好的Flutter环境配置教程

于 2024-09-02 16:54:18 发布
阅读量1.3k 收藏 18
点赞数 19
分类专栏： Flutter 文章标签： flutter android-studio android vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40467855/article/details/141824000
版权

文章目录

一 前言

前往我的博客以便查看图片

最近可能会进行Android软件开发,由于之前并未系统的学习过Android开发，在本次选择技术实现时，特意选择了跨平台能力强的技术线路,在NativeVue,uniapp,Vue+套壳等等方案中,最终选择了Flutter.主要理由如下

  1. 跨平台能力强，真正的全平台支持（Windows/Linux/IOS/Android/Web）
  2. 保证的性能，和Vue、uniapp等方案不同，Flutter最终会将Dart代码编译为对应平台的机器码，性能几乎与原生开发一致
  3. 界面一致性，Flutter使用自己的 Skia 渲染引擎进行渲染，保证界面一致性

但Flutter仍然有一些不足之处，例如页面布局和业务逻辑写在同一文件，当代码量足够大时，将会显得杂乱，使用类似Qt的用代码构建界面的方式，不能直观的理解界面布局

但是，使用Flutter一定是利大于弊的！

二 安装

2.1 安装DartSDK

在接下来安装的FlutterSDK中包含DartSDK（位于 Flutter SDK 的 bin/cache/dart-sdk/目录下），因此此步骤不是必须的

如果你不单独安装，请将Flutter SDK 中的 Dart SDK的bin目录添加到系统环境变量的Path中，例如D:\DevKits\Flutter\bin\cache\dart-sdk\bin

前往归档 | Dart下载适用于设备的DartSDK，将其解压到适合的目录下，注意该目录的权限不应该过大(例如读写需要root权限或者管理员权限)并且不包含特殊字符（中文或者是空格）（对下文的目录有同样要求），本教程中绝大部分文件都将放入D:/DevKits/中。

此时应当具有如下文件结构。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在系统环境变量Path中添加D:\DevKits\dart-sdk\bin

如果你不单独安装，请将Flutter SDK 中的 Dart SDK的bin目录添加到系统环境变量的Path中，例如D:\DevKits\Flutter\bin\cache\dart-sdk\bin

在命令行中输入dart --version进行验证，应当具有如下输出

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 安装Flutter SDK

下载地址：版本列表 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter，建议选择stable版本使用

解压到D:\DevKits\Flutter

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
系统环境变量Path中添加D:\DevKits\Flutter\bin

如果你没有单独安装Dart SDK ，请将Flutter SDK 中的 Dart SDK的bin目录添加到系统环境变量的Path中，例如D:\DevKits\Flutter\bin\cache\dart-sdk\bin

使用Flutter --version验证，应当具有如下输出

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 一些必要的准备

在继续安装之前，请确保你完成了以下事项

2.3.1 Git

确保设备安装了git，您可以使用git --version来检查，可用的资源：Git

2.3.2 中国开发者必不可少的配置

从以下几组环境变量中任选一组写入系统环境变量中，每一行为一组，表头为变量名称，表项为值，推荐的仍然是清华大学镜像地址

PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URL
https://mirrors.tuna.tsinghua.edu.cn/dart-pubhttps://mirrors.tuna.tsinghua.edu.cn/flutter
https://pub.flutter-io.cnhttps://storage.flutter-io.cn
https://mirror.sjtu.edu.cn/dart-pubhttps://mirror.sjtu.edu.cn

确保你完成以上事项再继续！！！

2.4 IDE的安装与配置

Flutter支持使用VSCode、Android Studio、IntelliJ IDEA进行开发，若要进行Windows开发，还需安装Visual Studio，以下是各个IDE的配置教程

2.4.1 VSCode

建议新建一个用户配置文件以便和其他开发加以区分，如果你不知道这是什么，则这不是必须的

安装以下插件：

Dart - Visual Studio Marketplace

Flutter - Visual Studio Marketplace

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4.2 Android Studio 配置

此处使用基于IDEA构建的新版AS：下载 Android Studio 和应用工具 - Android 开发者 | Android Developers (google.cn)

如果你是全新安装Android Studio，则推荐按照以下步骤进行Android Studio的配置

如果你已经安装了AS，则请阅读**“安装必要的SDK Tools”**

2.4.2.1 安装程序本体

和安装其他应用程序一样，运行安装程序将AS安装到合适的位置

2.4.2.2 配置AS

此处任选一个都行

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此处选择取消(Cancel)，便于之后的一些配置.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选择自定义（Customize）中的所有设置（All Settings）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在"语音和框架"（Language & Framework）中选择 Android SDK，点击AndroidSDKlocation 右侧的 Edit

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选择一个位置存放Android SDK，本例为D:\DevKits\Android\Sdk，然后点击下一步（next）并等待完成。

在此期间，你可以在系统环境变量中新建ANDROID_HOME和ANDROID_SDK_HOME，其值均为D:\DevKits\Android\Sdk

如果遇到网络问题，请自行解决，你可以使用VPN或者设置代理。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

安装必要的SDK Tools，按照图中选择对应工具，然后点击应用（apply）

你需要安装以下工具：

  • Android SDK Platform, API 35.0.1
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
  • Android SDK Platform-Tools
  • Android Emulator

Android SDK Platform, API 35.0.1 和 Android SDK Build-Tools 的版本是对应的，官方使用最新的SDK版本，在实际开发中，请合理选择SDK版本，你必须始终安装SDK版本对应版本的Build Tools，请注意，Flutter从Android6.0开始支持。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

若要安装其他版本的SDK Build Tools，请勾选右下角的Show Package Details如果你使用AVD进行调试，请注意下载对应的Android镜像，勾选Android Platforms选项卡中的Show Package Details来下载镜像，同一Android SDK 可能提供多个镜像，请自行研究其不同之处，截图仅代表个人选择。请注意，他们非常占用存储空间

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

关于Android Studio 的中文，你可以在Chinese (Simplified) Language Pack / 中文语言包 Plugin for JetBrains IDEs | JetBrains Marketplace下载中文包然后在拓展界面使用从磁盘安装的方式安装中文包

2.4.2.3 安装插件

同样安装 Dart 和 Flutter插件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4.3 Idea 配置
2.4.3.1 安装插件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.4.3.2 配置Android SDK

安装完插件后，在设置->语言和框架->Android SDK中，将Android SDK Location指定到之前设定的D:\DevKits\Android\Sdk即可，如果你设置了ANDROID_HOME软件应该可以自动识别

三 测试环境

在命令行中输入flutter doctor来检查环境，输出结果应该类似如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果第三项报错如下，请检查Android SDK Command-line Tools是否安装，然后运行flutter doctor --android-licenses来同意Android licenses.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Network resource 检查需要连接到github.com，其检查报错可忽略

四 起手第一个项目

4.1 VSCode

4.1.1 创建项目

使用 Ctrl+Shift+P,然后输入flutter，选择 Flutter :New Project，然后选择Application，之后会弹出目录选择器让你选择工程存放路径，该路径可以不为空，稍后会让你填写工程名称，将在选择的目录下创建同名文件夹来存储工程文件

4.1.2 运行以及调试

按下F5尝试第一次运行，如果已经有先去创建的AVD，在列表中应该可以直接选择它，或者选择列表中的一项，此处暂时无法创建AVD，因此暂时无法使用Android相关内容

建议使用IDEA或者AS创建工程和AVD后，使用VSCode编写和调试代码，因为IDEA和AS创建工程可以配置更多内容，可以避免更多问题

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2 IDEA/Android Studio

IDEA 和 AS 的步骤基本一致

4.2.1 创建工程

选择Flutter安装位置，然后下一步

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此处指定一些内容

可以取消选择不需要的平台，如ios和Linux

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2.2 创建AVD

完成创建后，在右侧选择设备管理器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

和安卓开发一样创建AVD设备，然后启动它

启动完成后，你应该可以在顶部设备选择器中选择已经启动的AVD设备

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

此时，你可以关闭IDEA或者是AS，打开之前VSCode创建的项目，不出意外的话，应该可以选择存在的AVD

从右下角选择设备，当前显示为Chrome，点击更改，选择下面的AVD设备，当然，此时你也可以创建AVD了

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

喝Java也加唐~
关注
专栏目录
Flutter环境搭建
rotating_windmill
07-22 351
点击Flutter，设置FlutterSDKpath（上面“Flutter安装”章节的路径），然后Next。在AndroidStudio的Plugins中输入Flutter，点击Install按钮进行安装。打包后的文件在项目目录\build\windows\runner\Release下。在磁盘中创建一个AndroidSdk的目录，这里选择创建的目录位置，然后Next。可以在系统中的设置中打开开发者选项。把下载好的文件解压到安装目录中，例如D\Software\Flutter。...
Flutter——Android Studio下环境配置
01-03
引言 前段时间，制定了今年的学习计划，包括前端优化（打包、测试、发布）、数据可视化、Vue3.0源码阅读、Flutter、算法和数据结构。 所以，最近也陆续开始今年的学习计划，先拿 Flutter开刀（hhh），当然第一步就是开发环境的配置。那么，我们就来讲讲如何配置 Android Studio+ Flutter的开发环境。 一、安装 Flutter SDK 首先，新增两个系统变量，主要用于后期 Flutter检测时的安装，此电脑->属性->高级->环境变量。 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_ST
flutter环境搭建
最新发布
HH的博客
04-07 802
如果你在国内使用Flutter，那么你可能需要找一个与官方同步的可信的镜像站点，帮助你的Flutter命令行工具到该镜像站点下载其所需的资源。下次一边学习，一边写博客，这脑袋一下子就忘记了，直接记不住咋操作的了，更别说看完再回忆写下来了，虽然这样子更锻炼记忆力，也会让自己的印象更深刻，但是真的记不住，很多细节都丢失了。的指示下一步一步安装成功的，其中由于教程是过去的，软件是最新的有一些操作发生了变化，经过摸索终于成功，目前没有什么新问题产生。然后按照如图输入第一个环境变量。=> 空白处右键点选。
Flutter 环境搭建
LeeCSDN77的博客
12-05 408
本文基于 Mac 电脑! 1. 克隆项目 终端命令: git clone -b dev https://github.com/flutter/flutter.git 2.设置环境变量 由于众所周知的原因, 国内无法直接访问 Flutter 网络资源, 需要添加 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL 两个镜像地址; 打开.bash_pr...
Flutter环境的搭建
MeteoriteMan的博客
11-01 434
安装前软件的准备 Android Studio(安卓环境) Xcode(iOS环境) Android 配置AVD ~/Library/Android/sdk/tools/bin/avdmanager Xcode 配置Simulator 对比安卓,Xcode的simulator配置其实会简单得多.在Xcode安装完毕之后,Command + 空格输入Terminal(终端)并回车.然...
flutter 环境搭建
热门推荐
woyebuzhidao321的博客
12-24 1万+
Flutter 是谷歌开发的一款开源、免费的，基于 Dart 语言的U1框架,可以快速在i0S和Android上构建高质量的原生应用。它最大的特点就是跨平台和高性能。Dart是由谷歌，在2011 年开发的计算机编程语言，它可以被用于Web、服务器、移动应用和物联网等多个领域。号称要取代JavaScript.
【Flutter】Flutter环境搭建
linjiuxiansheng的博客
04-20 1609
Flutter环境搭建。
Flutter环境搭建(windos10)
a328062954的博客
05-01 3773
前言 笔者是位java开发工程师，会前端H5、小程序并且完成了一些线上项目。但对于移动端android与ios未接触过，曾想过自学安卓，ios开发移动端，但考虑到学习成本略高，同时也了解到近几年混合跨平台开发兴起，其中比较倾向的是Flutter，Flutter是谷歌的移动UI框架，可以快速在ios和android上构建高质量的原生用户界面。至于为何选它，读者可在各大技术论坛社区寻找答案。 一、入门级搭建Flutter开发环境 学习一项技术最好的途径是官网, Flutter中文官网. 一、获取Flutt
Flutter 开发之flutter环境搭建
BianHuanShiZhe的专栏
02-08 923
搭建开发环境 Flutter开发环境的搭建比较烦琐，任何一个步骤失败都会导致最终环境搭建不能完成。Flutter支持三种环境：Windows、MacOS和Linux。这里我们主要讲解Windows及MacOS的环境搭建。 1.2.1　Windows环境搭建 1.使用镜像 首先解决网络问题。环境搭建过程中需要下载很多资源文件，当某个资源未及时更新时，就可能报各种错误。在国内访问Flutter...
Flutter（一）：Flutter环境的搭建
浩星
03-12 105
前言： 正好在研究flutter，把它系统化的整理一下。
Flutter开发环境搭建
tianhongfan10106的专栏
08-18 2739
Flutter是Google推出的一款是移动端跨平台开发框架，使用Dart语言编写，一套代码即可同时在Android和iOS平台运行开发高性能、高质量的原生应用。想要学习使用Flutter，首先需要先搭建相关的开发环境。下面就来详细介绍下Flutter开发环境搭建。 1. 下载安装Flutter SDK 1）去Flutter官网选择最新的安装包 点击下载（https://flutter.dev/docs/development/tools/sdk/releases#windows）； 如果不能正常下.
Flutter篇章之环境搭建
m0_59352103的博客
04-05 1087
学习任何一门新东西， 先扪心三问，是什么？怎么用？为什么这么用？废话不多说， 直接上正菜。
flutter开发环境搭建
snowball的博客
09-11 3861
注：本文档针对windows系统 一、环境搭建 1.1、Java环境安装 Flutter开发环境一定要用Java SDK1.8版本，高版本的后续会出现问题，我电脑安装的最新版本，没办法遇到问题后查资料后回到了1.8版本 下载地址 Java SE Development Kit 8 - Downloads 装好之后添加环境变量配置 Windows 10 Java环境变量配置 - Tyhoo_Wu - 博客园 输入Java -version查看版本 1.2、使用镜像 由于在国内访..
Android Flutter开发环境搭建
ZLGSPACE的博客
06-04 2090
本节主要讲解如何在Windwos下搭建 Flutter开发环境，然后了解下Android IDE上面的Flutter开发。
Flutter-搭建环境
小白真像大白
08-19 183
简介： Flutter是谷歌的移动UI框架, 可以快速在IOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。 优点： 快速开发：毫秒级的热重载 灵活UI：内置丰富的motion API、Material Design和Cupertino（iOS风格）widget，分层架构，快速渲染、灵活设计 很好的结合原生：包含了许多核心的wid...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喝Java也加唐~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值