提问：Flutter 项目在浏览器中运行失败是怎么回事？

最新推荐文章于 2025-12-03 10:58:45 发布
原创 最新推荐文章于 2025-12-03 10:58:45 发布 · 267 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter

在这里插入图片描述

如题目所示，上图是在 Window 11 环境下，通过 vscode F5 快捷键 执行运行程序后在浏览器中展示界面。麻烦大家帮忙看下一下，为什么flutter运行不起来呢？

当前系统运行环境：

  • Windows 11
  • GIt version 2.44.0.windows.1
  • vscode 编辑器，插件 flutter 和 dart 也已安装
  • flutter-sdk: 3.35.7
  • android studio 已经安装，对应的平台及36.1，35.，34S DK已经安装
  • 命令行中执行java， javac 都是有效信息的，如：java version "1.8.0_451"
  • 环境变量已经配置
    在这里插入图片描述
  • flutter doctor 运行结果如下：
    在这里插入图片描述
    看到这里，想来说只要不开发web，仅仅考虑 ios 和 android 也是 够了
  • 在 vscode 中执行 flutter run - d chrome
    在这里插入图片描述
    回到最开的那张图，难道跟系统的防火墙有关系吗，如下图所示：
    在这里插入图片描述
    大家知道这是什么原因导致界面不显示的呢？
Flutter 运行到浏览器
星宇大前端
07-04 5260
背景 最近想让Flutter 项目运行到浏览器试一下，按照一些博客说明，做了下面的操作。 flutter config --enable-web // 打开web配置 flutter run -d chrome //运行到chrome 报错找不到chrome，执行flutter devices 也找不到浏览器，文件目录页没有web目录。 下面说下正确的配置，其实看官网就好，一些博客太老，或者断章取义。 官网配置如下：https://flutter.dev/docs/get-started/web 下
Flutter2.0初体验(Web支持)
郑先森的博客
04-02 1013
之前Flutter1.x版本的时候体验过手机app开发，这是一个Flutter版本的玩安卓app(附源码)，就在前不久Flutter2.0正式版已经发布，加入了web支持，索性体验一把。 一、创建工程 常规操作，就是使用android studio编辑器，Flie–>New–>New Flutter Project 一路直接Next+Finish ，项目就创建成功了。 二、运行项目 常规的运行到手机或者模拟器上就不说了，下面说下运行到web浏览器上。 如上图，选择最后一个是手机真机调试，选择
Flutter 启动外部浏览器
卜卦的博客
12-24 3282
Flutter打开外部浏览器
Flutter Web开发 浏览器运行
jia635的专栏
12-30 2737
新建Flutter 工程，默认只支持Android，iOS，可以通过命令行配置运行Web flutter channel beta 先切到Flutter beta版本 flutter upgrade flutter config --enable-web 运行完--enable-web 命令后重启当前Flutter工程 如果配置成功并且电脑上有Chrome浏览器，在可调试工具即可看到Chrome（web）,选择Chrome然后运行编译便会打开host的Flutter网页 ...
9、Flutter开发全解析：优势、对比与社区活力
a2b3c4d5e的博客
09-15 36
本文深入解析了Flutter在跨平台移动开发中的优势与挑战，对比了原生开发与其他跨平台框架（如React Native、Xamarin、Cordova）的优缺点。文章详细探讨了Flutter在性能、开发效率、社区支持和多平台适配方面的表现，并提供了从不同框架迁移到Flutter的具体步骤与代码示例。同时分析了不同项目场景下的框架选择建议，并展望了Flutter在图形性能、WebAssembly集成和生态系统发展方面的未来趋势，为开发者提供全面的技术选型参考。
9、Flutter开发：跨平台框架的优势与选择
t1u2v的博客
10-01 30
本文深入探讨了Flutter作为跨平台开发框架的优势与挑战，对比了原生开发与主流跨平台方案（如React Native、Xamarin、Cordova）在性能、应用大小、新旧平台适配、开发资源等方面的表现。文章分析了不同应用场景下的框架选择策略，提供了从其他框架迁移到Flutter的具体步骤，并结合社区动态与技术趋势，展望了跨平台开发的未来发展方向，为开发者提供全面的技术选型参考。
Uni-app 跨端开发指南：一次开发，多端运行
2301_81563804的博客
06-25 1331
（Android/iOS 原生代码 + JS 桥接）。
Flutter 系列二——移动开发技术简介
宝爷的专栏
04-29 1538
原生开发与跨平台技术 原生开发 原生应用程序是指某一个移动平台（比如iOS或安卓）所特有的应用，使用相应平台支持的开发工具和语言，并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序；而iOS原生应用就是指通过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。原生开发有以下主要优...
Flutter Candies 一桶天下
weixin_43901866的博客
07-10 737
Flutter Candies 介绍 这是一个集合了Flutter开发中常用的组件/插件????的全家桶，大家可以很方便的集成到自己的项目当中，下面我按照作者来介绍Flutter Candies 的各个项目。篇幅会有点长，请准备好瓜子汽水坐好，开车了，滴滴滴滴滴。 AlexV525 从开始在群里提需求，到可以在群里解答问题 ；从一个养鱼专业的学生，到入行Flutter岗位工作。4月份入群到现在，看到了他的变化，也看到????组织的意义。入坑之后就住在了Github上面。 OpenJMU校园应用 精美的校园
跨平台UI框架Flutter的入门和使用
HURUWO的技术博客
02-04 1438
前言 文章首发于个人博客HuRuWo的技术小站,如果本文非vip用户无法完全浏览，可前往原文地址查看文章。 原文章地址跨平台UI框架Flutter的入门和使用 Flutter的简介 现如今,跨平台已是大势所趋。层出不穷的跨平台方案也在不停地迭代。下面看一下谷歌发布的跨平台方案UI框架Flutter。 Flutter是Google用以帮助开发者在Ios和Android两个平台快速开发高质量原生应用的...
【教育应用】：立方体操作在教育软件中的创新实践
文章首先阐述了立方体操作的理论基础和教育软件设计原则，然后通过分析立方体操作技术在实际教育软件中的实现和交互设计，揭示了其在创新教学方法中的潜力。此外，文章还讨论了立方体操作在教育软件
Flutter使用VS Code打包app
u010112509的博客
12-03 238
本文介绍了Flutter开发环境的完整配置流程。首先在VSCode中安装Flutter和Dart插件，下载Flutter镜像源并配置环境变量。接着安装Android Studio及对应SDK，配置Java和Android相关环境变量。最后详细说明了创建Flutter项目、修改gradle源以及打包APK的具体步骤，包括设置本地gradle路径和构建release版本APK的命令。整个配置过程涵盖了从开发工具安装到项目构建的全流程。
鸿蒙分布式能力与Flutter集成：Flutter三方库鸿蒙适配实践
最新发布
nanxuan521的专栏
12-03 542
// 设备信息模型});?'',?'Unknown',?'unknown',?false,/// 分布式设备发现插件/// 初始化插件并开始监听设备发现/// [serviceId]：用于发现的业务标识符try {/// 获取当前已发现的设备列表try {return [];/// 在设备间发起一个认证请求（例如，建立连接前的安全握手）try {/// 停止发现并释放资源try {// 在Flutter应用中的使用示例/*
Flutter数据存储利器：Shared Preferences插件完整指南
代码小疯子
11-29 79
Shared Preferences作为Flutter中最简单的数据持久化方案，非常适合存储用户设置、应用配置等轻量级数据。根据项目需求选择合适的API版本，遵循最佳实践，就能轻松实现数据存储功能。记住：对于新项目，推荐直接使用API，它更现代、更安全！Flutter 企业应用开发实战 2025版教程git 源码。
构建生产级应用：Flutter + OpenHarmony 的工程化实践与 CI/CD 体系搭建
2501_93573294的博客
11-30 1024
构建生产级应用：Flutter + OpenHarmony 的工程化实践与 CI/CD 体系搭建
OpenHarmony 后台任务与 Flutter 生命周期协调：构建稳定可靠的混合应用
2502_93572233的博客
11-30 1304
本文探讨了在OpenHarmony生态中协调Flutter应用生命周期的策略。OpenHarmony的Ability生命周期模型与Flutter原生设计存在差异，可能导致后台资源浪费、任务异常终止等问题。文章提出了双向生命周期同步方案，通过MethodChannel建立OpenHarmony与Flutter的通信机制：当应用进入后台时触发Flutter任务暂停，返回前台时恢复任务。实践部分展示了在OpenHarmony端监听生命周期事件并通知Flutter，以及在Flutter端接收通知管理任务的完整代码实
Flutter图片库CachedNetworkImage鸿蒙适配：从原理到实践
nanxuan521的专栏
12-02 452
鸿蒙（HarmonyOS）生态的快速发展，给跨平台框架带来了新的适配需求。对于很多采用Flutter的团队来说，一个现实的问题摆在眼前：那些在Android和iOS上成熟的三方库，如何在鸿蒙上继续工作？作为Flutter社区里最常用的图片加载与缓存库，其能力深深扎根于原生平台——它依赖系统网络栈进行下载，依赖本地文件系统进行缓存。当运行环境切换到鸿蒙，这些依赖就需要被重新实现。
Flutter + Supabase 接入 Google 登录
HBLOG
12-03 321
本文详细介绍了如何在Flutter应用中集成Supabase的Google登录功能。主要内容包括：1）Supabase后台配置Google OAuth，需设置Client ID/Secret和自定义DeepLink；2）Google Cloud控制台配置授权重定向URI；3）Flutter端初始化Supabase并添加依赖；4）Android/iOS的DeepLink配置方法；5）实现Google登录的代码示例和用户信息获取；6）常见问题解决方案，如登录跳转失败、session获取异常等。通过完整流程指导开
把flutter项目搭建在浏览器上运行
10-28
将 Flutter 项目搭建并在**浏览器上运行**，是 Flutter Web 的核心功能之一。下面我将 **详细、分步骤地指导你从零开始创建一个 Flutter 项目，并在浏览器中成功运行它**。 --- ## ✅ 目标：把 Flutter 项目部署到浏览器上运行（即启用并运行 Flutter Web） ### 🧰 前提条件 确保你的开发环境已安装以下工具： 1. **Flutter SDK**（v3.0+ 推荐） 2. **Dart SDK**（通常随 Flutter 自动安装） 3. **Chrome 浏览器**（默认调试浏览器） 4. **支持的编辑器**：VS Code / Android Studio / 或命令行 5. （可选）Git、Node.js（用于后续部署） > 如果未安装 Flutter，请先前往官网安装： > > 👉 https://docs.flutter.dev/get-started/install --- ## 🔧 步骤 1：创建一个新的 Flutter 项目 打开终端（或 PowerShell），执行： ```bash flutter create my_web_app cd my_web_app ``` 这会生成一个标准的 Flutter 应用模板。 --- ## 🔍 步骤 2：启用 Web 支持（通常已默认开启） 检查当前支持的设备平台： ```bash flutter devices ``` 你应该能看到类似输出： ``` Chrome • chrome • web-javascript • Google Chrome 118.0.5993.70 Edge • edge • web-javascript • Microsoft Edge 118.0.2088.69 ``` 如果看不到 `Chrome`，说明 Web 平台未启用，运行： ```bash flutter config --enable-web ``` 然后再次运行 `flutter devices` 确认是否出现浏览器选项。 ✅ 成功后你会看到支持的 Web 设备。 --- ## ▶️ 步骤 3：在浏览器中运行项目 执行以下命令启动应用： ```bash flutter run -d chrome ``` 或者指定使用 Edge： ```bash flutter run -d edge ``` 首次运行时，Flutter 会： - 编译 Dart 代码为 JavaScript - 启动本地开发服务器（http://localhost:XXXX） - 自动打开 Chrome 浏览器加载应用 🟢 成功标志：浏览器中显示 Flutter 默认计数器 App，点击按钮数字递增。 --- ## 📁 项目结构说明（Web 相关部分） ``` my_web_app/ ├── lib/ # 主要 Dart 源码 │ └── main.dart # 入口文件 ├── web/ # Web 特有资源（关键目录） │ ├── index.html # 主页面（必须存在） │ ├── manifest.json # PWA 配置 │ └── favicon.png # 网站图标 ├── build/ # 构建输出目录（运行后生成） │ └── web/ # 编译后的 JS/CSS/HTML 文件 └── pubspec.yaml # 依赖配置文件 ``` > 💡 所有 Web 资源都通过 `/web` 目录提供，你可以修改 `index.html` 添加 meta 标签、Google Analytics 等。 --- ## 🛠️ 步骤 4：构建生产版本（用于部署） 当你想把应用发布到线上服务器时，使用： ```bash flutter build web --release ``` 输出路径： ``` build/web/ ``` 这个目录包含所有静态文件（`.js`, `.css`, `.html`, 图片等），可以直接部署到： - GitHub Pages - Firebase Hosting - Nginx/Apache - Vercel / Netlify - 自建服务器 --- ## ☁️ 示例：部署到 GitHub Pages ### 1. 构建项目 ```bash flutter build web ``` ### 2. 进入输出目录 ```bash cd build/web ``` ### 3. 初始化 Git 并推送到 gh-pages 分支 ```bash git init git add . git commit -m "Deploy Flutter Web" git branch -M gh-pages git remote add origin https://github.com/<用户名>/<仓库名>.git git push -u origin gh-pages ``` ### 4. 访问地址 ``` https://<用户名>.github.io/<仓库名>/ ``` ✅ 成功上线！ --- ## ⚙️ 可选配置：优化 Web 输出 编辑 `pubspec.yaml`： ```yaml flutter: generate: true # 自动生成 widget 键（可选） ``` 在 `web/index.html` 中添加 viewport 支持响应式： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> ``` --- ## 🌐 注意事项 | 问题 | 解决方案 | |------|----------| | 白屏或空白页 | 检查 `index.html` 是否正确加载 `main.dart.js` | | 路由刷新 404 | Web 服务器需配置 fallback 到 `index.html`（如 SPA） | | 性能慢 | 使用 `--web-renderer html` 或 `canvaskit`：<br>`flutter run -d chrome --web-renderer canvaskit` | | 不支持某些插件 | 如 `camera`, `path_provider` 在 Web 上受限 | --- ## ✅ 总结：完整流程回顾 1. 安装 Flutter SDK 2. 创建项目：`flutter create xxx` 3. 启用 Web：`flutter config --enable-web` 4. 运行浏览器：`flutter run -d chrome` 5. 构建发布版：`flutter build web` 6. 部署静态文件到任意 Web 服务器 你现在已经成功将 Flutter 项目运行在浏览器上了！ ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值