zl程序教程

您现在的位置是:首页 >  其他

当前栏目

windows版vscode配置flutter全部环境大致教程(移动、PC、web)

2023-04-18 14:29:05 时间

前言-本教程适合谁看

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

移动开发

下载安装vscode

点击链接: vscode官网
在这里插入图片描述
下载完成后按照安装提示正常安装即可

vscode安装插件

1、必装插件:
Dart
Flutter
2、选装插件:
中文包
Code Runner
Flutter Widget Snippets
在这里插入图片描述

下载flutterSDK

点击下载: flutter SDK官方下载
在这里插入图片描述
解压之后,将flutter SDK下面的bin文件夹配置到环境变量
在这里插入图片描述在这里插入图片描述
win+R,输入cmd,在命令行输入flutter --version查看是否配置成功
在这里插入图片描述

安装android studio来安装android SDK

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

在设置中下载对应的android SDK,以及对应的SDK工具
在这里插入图片描述
在这里插入图片描述

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

在vscode界面按ctrl+shift+p,输入flutter,选择new project,选择项目存储位置后,输入项目名即可
在这里插入图片描述

运行方法

这里只介绍真机运行方法,模拟器方法请参考其他博文
选择移动端平台,选择方法如下
在这里插入图片描述
按F5或 ctrl+F5,或鼠标带点击菜单栏中的运行-启动调试
成功运行的情况

web开发

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

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

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

在这里插入图片描述

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

在这里插入图片描述

运行方法

在vscode终端输入

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

在这里插入图片描述
成功运行的情况如下
在这里插入图片描述

PC开发

下载visual studio

点击下载: 官网链接

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

安装时选择c++桌面应用开发,耐心等待安装完成
在这里插入图片描述

运行方法

切换运行平台至windows,然后按F5
在这里插入图片描述
运行成功的样子
在这里插入图片描述

flutter学习资料

写给博主自己的话,可以不看(碎碎念,留个纪念)

还有一个月就考研了,报的是中国科学技术大学,因为一些原因,近一年没有学习技术。最近发现了flutter这个框架,能够开发一次就编译出三个平台的项目,对于多平台开发来说,能够极大提高开发速度。另外,java的面向切面的开发框架spring家族,以及一些前端框架,例如:vue,react,react native等,也是值得学习的。未来想要从事算法岗,对于人工智能领域比较感兴趣。2022年就业互联网行业就业形势艰难,需要耐住性子,潜心学习。
按理来说,考研就应该全身心考研去,为什么我还要抽出时间来了解新的技术?我觉得作为计算机领域的一名学生,关注前沿技术和发展能够让自己保持一颗对这个领域热爱的心。