windows版vscode配置flutter全部环境大致教程

  • 前言-本教程适合谁看
  • 移动开发
  • 下载安装vscode
  • vscode安装插件
  • 下载flutterSDK
  • 安装android studio来安装android SDK
  • 建立新的flutter项目的操作方法
  • 运行方法
  • web开发
  • 换源以免因网络环境调试失败
  • 运行方法
  • PC开发
  • 下载visual studio
  • 安装时选择C++开发桌面应用
  • 运行方法
  • flutter学习资料


前言-本教程适合谁看

想要了解flutter大致的配置过程,自己有一定解决问题的能力的人。本教程旨在提供一个vscode配置flutter开发环境的大致教程,并非完全解决各位在配置中遇到的各种环境,只能提供一个配置大致方向。

移动开发

下载安装vscode

点击链接: vscode官网

vscode flutter 打包ios vscode运行flutter项目_前端


下载完成后按照安装提示正常安装即可

vscode安装插件

1、必装插件:

Dart

Flutter

2、选装插件:

中文包

Code Runner

Flutter Widget Snippets

vscode flutter 打包ios vscode运行flutter项目_flutter_02

下载flutterSDK

点击下载: flutter SDK官方下载

vscode flutter 打包ios vscode运行flutter项目_前端_03


解压之后,将flutter SDK下面的bin文件夹配置到环境变量

vscode flutter 打包ios vscode运行flutter项目_android_04

vscode flutter 打包ios vscode运行flutter项目_前端_05


win+R,输入cmd,在命令行输入flutter --version查看是否配置成功

vscode flutter 打包ios vscode运行flutter项目_flutter_06

安装android studio来安装android SDK

点击下载: 官网下载 下载完安装包后,正常安装即可

在设置中下载对应的android SDK,以及对应的SDK工具

vscode flutter 打包ios vscode运行flutter项目_前端_07


vscode flutter 打包ios vscode运行flutter项目_vscode_08

建立新的flutter项目的操作方法

在vscode界面按ctrl+shift+p,输入flutter,选择new project,选择项目存储位置后,输入项目名即可

vscode flutter 打包ios vscode运行flutter项目_android_09

运行方法

这里只介绍真机运行方法,模拟器方法请参考其他博文

选择移动端平台,选择方法如下

vscode flutter 打包ios vscode运行flutter项目_vscode_10


按F5或 ctrl+F5,或鼠标带点击菜单栏中的运行-启动调试

vscode flutter 打包ios vscode运行flutter项目_前端_11

web开发

换源以免因网络环境调试失败

在系统变量中添加如下变量

FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.cn

vscode flutter 打包ios vscode运行flutter项目_桌面应用_12

FLUTTER_STORAGE_BASE_URL
https://storage.flutter-io.cn

vscode flutter 打包ios vscode运行flutter项目_桌面应用_13

运行方法

在vscode终端输入

flutter run -d chrome --web-hostname=127.0.0.1

vscode flutter 打包ios vscode运行flutter项目_vscode_14


成功运行的情况如下

vscode flutter 打包ios vscode运行flutter项目_前端_15

PC开发

下载visual studio

点击下载: 官网链接

安装时选择C++开发桌面应用

安装时选择c++桌面应用开发,耐心等待安装完成

vscode flutter 打包ios vscode运行flutter项目_前端_16

运行方法

切换运行平台至windows,然后按F5

vscode flutter 打包ios vscode运行flutter项目_vscode_17


运行成功的样子

vscode flutter 打包ios vscode运行flutter项目_桌面应用_18

flutter学习资料