Windows VS Code配置Flutter开发环境搭建2022版

已于 2022-04-08 13:56:27 修改
阅读量6.5k 收藏 4
点赞数
分类专栏： Flutter 文章标签： flutter vscode android
于 2022-03-15 11:14:33 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_39457683/article/details/123496932
版权

1.下载 VS Code
2.打开VSCode 安装插件

  • Dart
  • Flutter
  • Awesome Flutter Snippets (非必要)
  • Flutter Widget Snippets (非必要)

3.下载Flutter SDK（我现在用的是 flutter_windows_2.10.3-stable.zip）,解压缩放在任意位置

4.配置环境变量

编辑系统变量

  • 变量名：Path
    变量值：你的flutter sdk 文件夹路径\bin

    记住是你的flutter sdk路径+bin目录

新建系统变量

  • 变量名：FLUTTER_STORAGE_BASE_URL
    变量值：https://storage.flutter-io.cn

  • 变量名：PUB_HOSTED_URL
    变量值：https://pub.flutter-io.cn

好了之后可以打开VS Code Shift+Ctrl+P调出命令框

输入Flutter:New Project Enter执行

在这里插入图片描述
执行完选择 Application
在这里插入图片描述
选择项目保存位置

输入项目名字

Flutter项目就新建好啦

这里可以选择运行的设备和平台
在这里插入图片描述
在这里插入图片描述

按右边三角符号就能运行了
在这里插入图片描述
我选择的是Chrome, 运行成功！！！
在这里插入图片描述

如需Windows Desktop编译教程请看我 另外一篇文章

Felix_Fly2021
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VSCode 安装Flutter 教程
qq_25687271的博客
09-28 5456
1.flutter run 报错，需要以--no-sound-null-safety 模式运行才不会报错。需要解决visual studio的问题， 官网下载visual studio, 在安装的时候勾选如下。打开 android studio -> tools -> sdk Manager。在桌面新建一个.bat的文件， 在文件里面添加如下命令，即可启动虚拟设备。安装android sdk 并设置安装位置，之后耐心等待安装即可。a.进入到相对应的flutter的文件下。等安装好后， 添加环境变量。
在 VS Code 里开发 Flutter 应用
Flutter 社区
11-12 1505
本文将与你一起回顾如何在 VS Code 里进行 Flutter 应用的开发。1. 安装和配置1.1 更新扩展程序扩展的更新会定期发布。默认情况下，当有可用的更新时 VS...
安装Flutter + Android sdk + vs code运行Flutter项目（史上最详解）
01-03
前言： Flutter开发app是基于Dart语言开发的，就好比html网页开发基于JavaScript一样，而浏览器内核都可以编译JavaScript代码，所有开发html网页不需要下载啥SDK,直接在浏览器就能运行。首先我们安装Dart语言的SDK，便于运行Flutter开发的app 步骤如下： 安装Dart 安装java的JDK （需配置环境变量） 下载Flutter SDK （需配置环境变量） 安装Android Studio （为了下载Android sdk，官方提供的方法） 创建第一个Flutter项目 并运行 下面是我安装Flutter的全套安装包： 链接: https://pa
在 VSCode 中搭建 Flutter 开发环境并运行项目
最新发布
Chloeeeeeeee的博客
06-07 2664
在 VSCode 中运行 Flutter 项目并启动虚拟机的步骤如下：首先，安装 Flutter SDK 并添加其 bin 目录到系统 PATH，然后在 VSCode 中安装 Flutter 和 Dart 插件。接着，下载并安装 Android Studio，配置 Android 模拟器。创建 Flutter 项目后，打开终端启动模拟器，或通过 VSCode 工具栏选择设备，按 F5 运行项目。最后，使用调试控制台设置断点和检查变量，进行调试。这样即可在 VSCode 中运行和调试 Flutter 项目。
使用VS Code创建第一个Flutter工程
Rey的技术博客
01-09 3629
介绍Flutter的开发工具VS Code 的安装与使用。 并且介绍了如何使用VS Code来创建一个Flutter 应用
利用VScode搭建Flutter环境开发
热门推荐
qq_38774121的博客
05-31 3万+
作为一名前端程序员，为了这么个框架去下载个AndroidStudio实在是太费功夫太费时间了，所以决定在Vscode上面去搭建Flutter所需要的开发环境，搭建环境主要分为以下几点 java环境 flutter安装 Android环境 Android证书安装 Dart环境 模拟器配置 Java环境配置 https://www.oracle.com/technetwork/java/javas......
vscode配置flutter开发环境，不需要安装第三方安卓模拟器
tyeerth的博客
05-28 1万+
vscode配置flutter开发环境，使用Android studio自带的安卓模拟器，不需要安装第三方模拟器，即可实现vscode代码实时调试(热加载）
超级详细flutter开发环境搭建
01-03
一、在Windows上搭建Flutter开发环境 系统要求 要安装和运行Flutter，您的开发环境必须满足以下最低要求： 操作系统Windows 7 SP1或更高版本(64位) 磁盘空间：：400 MB(不包括IDE/Tools的磁盘空间)。 工具颤振取...
Flutter开发环境搭建 for mac
01-20
(brew 是 Mac 下的一个包管理工具，类似于 centos 下的 yum，可以很方便地进行安装/卸载/更新各种软件包，例如：nodejs, elasticsearch, kibana, mysql, mongodb 等等，可以用来快速搭建各种本地环境，程序员必备...
Flutter环境搭建Windows
01-03
Flutter环境搭建Windows一、Flutter SDK下载配置环境变量使用镜像检查Flutter环境二、Android SDK配置Android SDK获取方法1 : 使用Android Studio下载Android Studio方法2: 自行下载Android SDK(不推荐)Android SDK...
Android Studio 下 Flutter 开发环境搭建,Flutter,Dart 插件安装,Flutter SDK 安装,环境变量配置,开发环境检查
08-19
在Android Studio中搭建Flutter开发环境是开发者入门Flutter的首要步骤。Flutter是一款由Google开发的开源UI工具包，用于构建高性能、高保真、跨平台的移动应用。它使用Dart编程语言，提供了一套丰富的组件库，使得...
Flutter开发Windows环境配置
01-03
一、下载FlutterSDK 二、配置电脑系统环境：  1、配置flutter镜像： ...2、配置flutterSDK环境变量  FLUTTER_SDK_HOME=E:\Flutter\sdk\flutter（这个是你flutterSDK的所在目录） 3、在系统变量添加 ：%FLUTTER_SDK
初识Flutter之VS Code 的基本使用
fanjiarong_919的博客
12-14 2616
Flutter编辑器 Visual Studio Code 基本使用 前言：为什么笔记强烈推荐VS Code,而非传统的Android Studio。 虽然两者都有强大的插件库以及可视化操作界面的支持。 但经过我实际使用来说（我是一名Xcoder，此前并未常用这两者编辑器）。 Android Studio给我的感觉就是太重了（包太大,不包括android SDK就已经1.3个G了）， 而我用VS Code只有几十M的安装包。 然后就是代码风格外观，一用到VS Code第一眼就把我惊艳了， 而Android
flutter无法通过Visual Studio 2022 运行到桌面端解决办法 Visual Studio 17 2022 Does not match the generator used pre
TangAcrab的博客
12-22 5904
当前文章写作日期 2021 12 22 我们已经安装好 Visual Studio 2022 Community， 在flutter项目下 运行flutter run -d windows报错如下： Launching lib\main.dart on Windows in debug mode... CMake Error: Error: generator : Visual Studio 17 2022 Does not match the generator used previously: Visu
Windows构建Flutter环境，无法访问maven.google.com
ouhuanquan的博客
02-25 1万+
flutter 环境变量配置好之后，运行flutter doctor出现问题如下： X HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host， 尝试很多方法都无法解决，Google好久也没有解决办法，自己尝试修改http_host_validator.dart文件后得到解决，特此记录，解决办法如下： 1、找到flutter sdk的文件
windows+vscode+夜神模拟器 flutter环境配置
clemente的博客
08-18 3129
下载右边的安装包以获取最新版本 stable 的 Flutter SDK 将压缩包解压，然后把其中的 flutter 目录整个放在你预想的 Flutter SDK 安装目录中（比如 C:\src\flutter；请勿将该目录放在一些需要额外操作权限的目录，比如 C:\Program Files\）。 找到 flutter 目录中的 flutter_console.bat 文件，双击执行...
Flutter在Visual Studio Code上首次创建运行应用
yyxhzdm的博客
12-13 1493
的包名，包名（在 iOS 里叫 Bundle ID）一般都是公司域名的反写。如果你的应用打算上架商店，建议一开始的时候把这个全网唯一的包名设置好，因为应用上架之后就不能再修改了。1、每当创建一个新的 Flutter 应用时，一些 Flutter IDE 插件会请你输入一个类似。6)、输入项目名称，例如：my_flutter_helloword，并点击Enter。3)、在搜索框中输入“flutter”，弹出内容如下图所示，选择“2、选择一个设备，如果没有连接真机，可以使用模拟器。勾选后，开始创建应用。
【Flutter】vs2022上开发flutter
lyhyrc的博客
12-07 493
在vs上开发flutter，结果扩展仓库上没办法找到Dart，Flutter。搜索Dart时也无法找到插件。最后发现是安装工具出错了。
VS Code + Flutter 搭建环境（Win）
有关心情
07-02 4373
VS Code + Flutter 搭建环境（Win） 文章目录VS Code + Flutter 搭建环境（Win）安装 Android Studio下载 Android Studio安装 Android Studio添加模拟器安装与配置 FlutterVS Code 配置参考 安装 Android Studio 下载 Android Studio 由于官网需要翻墙，这里建议没有梯子的朋友选...
用flutter 开发windows应用，可靠吗，怎么搭建环境和步骤
06-10
Flutter可以用来开发跨平台的移动应用和Web应用程序，但也可以用于开发桌面应用程序，包括Windows应用程序。Flutter Desktop是Flutter的一个实验性分支，可以用于构建Windows、macOS和Linux上的本地应用程序。下面是在Windows上搭建Flutter Desktop环境并开始开发Windows应用程序的步骤： 1. 安装Flutter SDK：首先，您需要安装Flutter SDK。您可以从Flutter官方网站（https://flutter.dev/docs/get-started/install/windows）下载Flutter SDK并按照指示进行安装。 2. 安装Visual Studio Code：您需要安装Visual Studio Code（VS Code），这是一个轻量级的代码编辑器，非常适合Flutter开发。 3. 安装Flutter和Dart插件：在VS Code中，您需要安装Flutter和Dart插件。打开VS Code并按下Ctrl+Shift+X，搜索Flutter和Dart插件，然后单击“安装”按钮。 4. 安装Flutter Desktop工具包：Flutter Desktop需要一些额外的工具和库来构建本地应用程序。您可以从https://github.com/google/flutter-desktop-embedding/releases下载Flutter Desktop工具包，并将其解压缩到任何位置。 5. 配置环境变量：打开系统环境变量设置，并将Flutter和Dart的bin目录添加到PATH变量中。例如，如果您将Flutter和Dart安装在C:\flutter和C:\dart中，则应将C:\flutter\bin和C:\dart\bin添加到PATH变量中。 6. 创建Flutter应用程序：现在，您可以使用VS Code创建Flutter应用程序。打开VS Code，单击“文件”>“新建文件夹”，然后为您的应用程序选择一个位置。然后，按下Ctrl+Shift+P，搜索“Flutter”，并选择“Flutter: New Project”。按照指示创建Flutter应用程序。 7. 集成Flutter Desktop：现在，您需要将Flutter Desktop添加到您的Flutter应用程序中。在您的Flutter应用程序根目录下，打开pubspec.yaml文件，并添加以下依赖项： ``` dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter desktop_window: ^0.5.1 path_provider: ^1.6.11 sqflite: ^1.3.2+1 path: ^1.7.0 ``` 然后，运行以下命令，从Flutter Desktop工具包中获取所需的文件： ``` flutter packages get flutter packages pub run build_runner build --delete-conflicting-outputs ``` 8. 运行应用程序：现在，您可以运行您的Flutter应用程序。打开终端并导航到您的应用程序根目录，然后运行以下命令： ``` flutter run -d windows ``` 这将启动您的Flutter应用程序，并在Windows上运行。这是使用Flutter在Windows上开发应用程序的基本步骤。但是，需要注意的是，Flutter Desktop还处于实验阶段，可能存在一些问题和限制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Felix_Fly2021

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

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

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

打赏作者

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

抵扣说明：

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

余额充值