『Flutter』开发环境搭建

1.前言

大家好,我是 BNTang,今天给大家介绍一下 Flutter 的开发环境搭建。在之前我已经将 Dart 的基本语法给大家介绍了,所以今天就不再介绍 Dart 的基本语法了,直接进入 Flutter 的开发环境搭建。

2.安装 Java SDK

Java SDK 下载地址:https://www.oracle.com/cn/java/technologies/downloads/#jdk17-windows

配置环境变量:

如上其实就是将 Java SDK 的 bin 目录添加到环境变量中,这样我们就可以在任意目录下使用 Java 命令了。

如果对安装 Java SDK 有疑问的话,可以参考我之前写的一篇文章:『Java』Java 环境搭建

配置完毕了之后,我们可以在命令行中输入 java -version 来查看 Java SDK 的版本:

3.安装 Flutter SDK

Flutter SDK 下载地址:https://docs.flutter.dev/get-started/install/windows/desktop?tab=download

下载完成之后,解压到任意目录下,然后将 Flutter SDK 的 bin 目录添加到环境变量中:

4.安装 Android Studio

Android Studio 下载地址:https://developer.android.com/studio?hl=zh-cn

除了这种方式还可以通过 Toolbox App 来安装 Android Studio:

如果是通过链接的方式下载的,就自行双击安装包运行起来,一顿 Next,如果出现了如下界面,就点击 Cancel 取消:

选择 Custom,点击 Next:

接受许可:

静静的等待安装完毕即可。

oolbox App,2023-12-31 16:17:46 经过测试,Toolbox App 安装的 Android Studio 也是可以的。所以大家可以根据自己的喜好来选择。

5.配置 Android Studio

5.1.安装 Flutter 插件和 Dart 插件

5.2.其它配置

6.用 Android Studio 创建一个 Flutter 项目

配置一下 Flutter SDK:

然后点击 Next:

原生平台开发语言我这里 Android language 与 IOS language 分别选择比较老的 Java 与 O C

点击 create 创建项目即可。

如下是我创建第一个 Flutter 的基本配置参考即可:

6.1.安装设备管理器

点击 start 按钮即可,如果你运行起来发现比较小,你可以参考我下面推荐的配置,单独运行一个窗口来展示设备:

然后将设备管理器停了,在重新运行效果如下:

6.2.运行第一个 Flutter 项目

设备管理器安装好了之后,并且运行过之后,编辑器工具栏的 run 按钮就可以点击了,点击一下运行我们的 Flutter 项目,如下图:

耐心等待运行起来即可,第一次运行需要点时间:

闭坑指南

[!] Network resources X A network error occurred while checking "https://github.com/":信号灯超时时间已到

flutter doctor 过程中出现将以下全部复制粘贴 C:\Windows\System32\drivers\etc\hosts 里面保存:

tex 复制代码
192.30.253.113    github.com
 
192.30.252.131 github.com
 
185.31.16.185 github.global.ssl.fastly.net
 
74.125.237.1 dl-ssl.google.com
 
173.194.127.200 groups.google.com
 
192.30.252.131 github.com
185.31.16.185 github.global.ssl.fastly.net
 
74.125.128.95 ajax.googleapis.com

192.30.255.112  github.com git
185.31.16.184 github.global.ssl.fastly.net 
192.30.253.112    github.com 
192.30.253.119    gist.github.com
151.101.184.133    assets-cdn.github.com
151.101.184.133    raw.githubusercontent.com
151.101.184.133    gist.githubusercontent.com
151.101.184.133    cloud.githubusercontent.com
151.101.184.133    camo.githubusercontent.com
151.101.184.133    avatars0.githubusercontent.com
151.101.184.133    avatars1.githubusercontent.com
151.101.184.133    avatars2.githubusercontent.com
151.101.184.133    avatars3.githubusercontent.com
151.101.184.133    avatars4.githubusercontent.com
151.101.184.133    avatars5.githubusercontent.com
151.101.184.133    avatars6.githubusercontent.com
151.101.184.133    avatars7.githubusercontent.com
151.101.184.133    avatars8.githubusercontent.com

再次运行 flutter doctor -v:

Visual Studio - develop for Windows

Visual Studio not installed; this is necessary for Windows development:未安装Visual Studio;这是Windows开发所必需的。

安装地址:https://visualstudio.microsoft.com/zh-hans/downloads/

End

  • 🐤如果您对本文有任何疑问或想法,请在评论区留言,我将很乐意与您交流。
  • 🐰您的每一条评论对我都至关重要,我会尽快给予回复。
  • 🎈如果您觉得这篇文章对您有所启发或帮助,请不吝赞赏、收藏或分享。
  • 🎁您的每一个动作都是对我创作的最大鼓励和支持。
  • 👍谢谢您的阅读和陪伴!
相关推荐
problc30 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人9 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人12 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔16 小时前
Flutter启动流程(2)
flutter
hello world smile19 小时前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人20 小时前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai20 小时前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人20 小时前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos
lqj_本人20 小时前
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
flutter·华为·harmonyos
hello world smile21 小时前
Flutter常用命令整理
android·flutter·移动开发·android studio·安卓