flutter for web debug记录

最新推荐文章于 2025-04-01 10:04:03 发布

Carrie^^

最新推荐文章于 2025-04-01 10:04:03 发布

阅读量2k

点赞数

分类专栏：框架学习文章标签： flutter

本文链接：https://blog.csdn.net/Carrie_cc/article/details/100554019

版权

框架学习专栏收录该内容

2 篇文章

订阅专栏

本文记录了使用Flutter进行Web开发的调试过程，包括安装webdev工具、升级项目、配置环境变量、解决dart和pub命令找不到的问题、处理缺少pubspec.yaml的错误，以及添加必要的依赖。在遇到SDK未找到问题时，通过创建Web支持并调整pubspec.yaml文件成功运行webdev serve。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装webdev工具
flutter pub global activate webdev

2.进入要调试项目目录
flutter pub upgrade

3.配置环境变量
在path变量最后添加wevdev路径=》安装flutter存放路径\flutter.pub-cache\bin

4.运行webdev serve 出现错误“‘dart’ 不是内部或外部命令，也不是可运行的程序或批处理文件。 ‘pub’ 不是内部或外部命令，也不是可运行的程序或批处理文件。“
配置环境变量dart-sdk
在path变量最后添加dart路径=》安装flutter存放路径\flutter\bin\cache\dart-sdk\bin
在这里插入图片描述

5.配置完路径又报另外一个错误“webdev could not run for this project.
Could not find a file named “pubspec.yaml”“
在这里插入图片描述
执行命令pub get解决

6.复制完路径，重新执行webdev serve又报错“ERR
The Flutter SDK is not available.。。。No active package webdev.” 在这里插入图片描述

1）flutter create --web
2）在项目下pubspec.yaml文件中dev_dependencies下.添加
build_runner: “>=1.6.2 <2.0.0”
build_web_compilers: “>=1.2.0 < 3.0.0”
test: ^1.3.4
如果原来有
1). flutter:
sdk: flutter
2).flutter_test:
sdk: flutter
需要手动注销掉

 **修改完成pubspec.yaml文件东西后，都要记得执行pub get或者flutter pub get**

在这里插入图片描述
改完之后就可以看到webdev serve 跑成功啦

参考链接https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md

7.其他命令调试flutter_web
pub global activate webdev
flutter run -d chrome