【Flutter】移动开发者的Flutter Web实践（利用GitHub Pages进行部署）

原创 已于 2023-07-11 16:25:36 修改 · 置顶 · 2.8k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #前端 #github

于 2022-11-17 19:24:32 首次发布
本文介绍FlutterWeb的应用构建过程及如何通过GitHub Pages进行部署。从创建项目到成功运行，再到云端部署，逐步解析整个流程。

移动开发者的Flutter Web实践（利用GitHub Pages进行部署）

前言

自从Flutter2发布以来，Flutter对Web的支持已经进入稳定阶段，但一直没有时间研究，直到目前为止Flutter3.3已经正式发布，Flutter 3 是正式为全平台提供支持的一个重量级里程碑。从移动端，到Web，到桌面端的性能稳步提升，借着自己还有一点点前端开发经验，了解了一下Flutter对Web开发的支持与体验。

Flutter Web初体验

  • 新建Flutter Web工程，New Flutter Project

    老样子，还是直接可以使用Android Studio进行开发，毕竟还是在用Flutter进行开发。

    image-20221117175959927

  • 这里记得勾选Web

    image-20221117181514956

  • Create，完成创建

    创建完成会发现，工程目录比平时多了一个web目录，里边是存放一些Web特性的一些东西，跨平台的业务代码依然在l

最低0.47元/天 解锁文章
Flutter for Web：为什么 Flutter 最适合 Web 应用开发？
iCloudEnd的博客
08-07 1038
这是 Flutter 开发的 Web 应用程序开发框架，以便企业可以通过与平台无关的解决方案接触更多受众。您可以使用此工具创建 PWA，对您的应用程序进行原型设计并使用单个代码库进行开发。除了 PWA，此工具还支持单页应用程序。Flutter for web的稳定版本是在 Flutter 2.0 版中引入的。但是，Web 应用程序开发框架在 3.0 版本中获得了一些令人兴奋的增强和功能。以下是 Flutter 3.0 发生的一些事情。...
【高频考点精讲】Flutter for Web实践：如何用Dart开发前端应用？
全栈老李的博客
05-11 1051
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊聊一个让不少前端工程师又爱又恨的话题——用Flutter开发Web应用。没错，就是那个用Dart语言写UI的框架，现在它不仅能跑在手机上，还能在浏览器里撒欢儿了！
flutterwebdemo基于FlutterDart开发响应式Web应用的示例
08-10
flutter-web-demo ：基于 Flutter/Dart 开发响应式 Web 应用的示例
Flutter Web实战：登录页面开发全流程
最新发布
weixin_42591908的博客
09-12 1232
Flutter Web是Google推出的Flutter框架在Web平台的延伸，它使得开发者能够使用同一套Dart代码库，同时构建高性能、高保真的Web应用。其核心优势在于“一次编写，多端运行”的跨平台能力，极大提升了开发效率并降低了维护成本。相较于移动端Flutter应用，Flutter Web在渲染机制、性能优化和浏览器兼容性方面有所不同，但也保持了高度一致的API与开发体验。本章将为读者奠定扎实的理论基础，帮助理解后续章节中涉及的登录页面构建与优化实践。
Flutter开发之——构建Web应用
我的博客
01-19 1648
一 概述 之前介绍过使用Flutter构建移动应用，本文介绍使用Flutter构建Web应用 配置flutter sdk以支持Web 在新项目中开启Flutter Web 创建一个支持Web运行的新应用 向已有的应用添加Web支持 二 配置flutter 工具以支持Web 在创建支持Web的Flutter应用前，你需要安装下面的应用： Flutter SDK(安装并添加到环境path变量中) 浏览器(谷歌、Edge)，调试Web应用时，需要浏览器支持 三 在新项目中开启Flutter Web 3.
flutter开发web项目
热门推荐
haoxuhong的博客
12-20 1万+
让项目支持web ：flutter create . 运行：flutter run -d chrome flutter run -d chrome --web-renderer html 打包：flutter build web --web-renderer html 官方链接：Flutter on the Web 参考视频：构建 Flutter web 应用 (From Mobile App to web App)_哔哩哔哩_bilibili 部署参考链接：「Flutter for Web..
flutter开发实战-flutter build web发布到github page及图片未显示问题
一名开发者
09-07 759
flutter开发实战-flutter build web发布到github page及图片未显示问题GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。
mayurkagathara.github.io:在Github上部署Flutter和其他Web应用程序
03-14
本文将深入探讨如何利用GitHub Pages服务来托管Flutter应用以及基于JavaScript的Web项目。 首先，让我们理解GitHub Pages的基本概念。GitHub Pages是GitHub提供的一项免费静态网站托管服务。它允许用户创建和发布...
自动部署Flutter Web至Github Pages的实践指南
通过以上步骤和知识点，可以将Flutter Web应用自动构建并部署到Github gh-pages上，从而实现Web端的应用托管和访问。这不仅有助于提高开发流程的效率，也便于团队成员和用户访问和测试最新的开发版本。
Github部署Flutter及Web应用实战指南
为了在GitHub Pages上部署Web应用程序，开发者需要遵循一定的项目结构。对于Flutter Web应用，通常包含如下文件： - `index.html` - 应用程序的入口文件。 - `main.dart.js` - 编译后的Flutter应用。 - `assets`...
Flutter-Web从0到部署上线(实践+埋坑)
frontend_frank的博客
03-25 1609
本文字数：7743字预计阅读时间：60分钟01前言首先说明一下，这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter的诞生虽然来自Google的Chrome团队，但大家都知道Flutter最先支持的平台是Android和iOS，至今最核心的维护平台依然是Android和iOS。由于dart语言的学习成本不高，Flutter的响应式UI与Comp...
flutter制作博客展示平台，现已支持 Web、macOS 应用、Android 和 iOS
坚果的博客
09-28 727
Flutter Blog Theme using Flutter | Web, macOS, Android, iOS Flutter 最近发布了 Flutter V2.5.1，其性能得到了很大提升，支持 Web、macOS、Android 和 iOS。 这就是为什么今天我们使用在 Web、macOS 应用、Android 和 iOS 应用上运行的 flutter 创建响应式博客主题。 此外，我们创建了一个具有自定义悬停动画的动画网络菜单。 最后，您将学习如何使用 Flutter 制作响应式应用程序。 预
Flutter中的Web应用程序开发：构建现代Web应用程序
AI天才研究院
06-29 7631
作者：禅与计算机程序设计艺术 Flutter 中的 Web 应用程序开发：构建现代 Web 应用程序 作为人工智能专家，程序员和软件架构师，CTO，我今天将为大家分享有关 Flutter 中 Web 应用程序开发的见解。在这篇文章中，我们将
Flutter Web 开发指南
鲸落
08-11 1929
一、开发前准备 1. 使flutter支持web flutter config --enable-web flutter create . 如果不执行第二个指令，会提示"Missing index.html." 2. 检查配置 flutter doctor 3. 新建项目 和正常flutter项目一样 4. 在浏览器中调式 flutter run -d chrome 5. 编译web端 flutter build web 6. 运行 编译完成后, 进入web目录: ** 项目根目录/build/web
Flutter 构建和发布为 Web 应用
u010194271的博客
02-17 2246
Flutter 构建和发布为 Web 应用
用Flutter开发Web应用
新缸中之脑
05-13 9195
Flutter作为一个可移植的UI框架，已经支持现代Web应用开发了！我们很开心已经发布了SDK预览版，这样你可以在Web浏览器里直接运行你的Flutter UI代码。 原文链接：Flutter Web - 目标全平台开发的Flutter再下一城！- 汇智网 Flutter Web的目标 从去年Beta版发布以来，客户们已经使用Flutter来创建可以运行在iOS和Android上的移动应用了...
Flutter Web网站搭建教程
m0_46622598的博客
04-02 839
简述 曾几何时，你有没有一个搭个人网站的冲动，我这个想法在我第一次开始写博客就有了，可就是没有搭起来，直到我看到flutter有了web支持，我就在想，是时候了，必须且一定要做，于是乎我就搭建了现在的网站ibaozi.cn，代码开源至https://github.com/ibaozi-cn/ibaozi，而这次我要做的并不是基于这个网站开发，我再次申请了一个新域名jetpack.net.cn，读过...
Flutter开发的Web应用 构建及部署 标准流程指南
夏目艾拉的学习之路
03-31 2511
Flutter是Google推出的跨平台开发框架，支持多种平台：Windwos，Mac，iphone，Android，Web，Linux，甚至经过一些折腾还可以支持树莓派，十分强大，笔者曾写过一些探索其底层架构的文章，有兴趣的读者可自行阅读。笔者的Flutter版本为3.16.5，算是比较新的一个版本了，本文将进行标准的把web项目部署到自有云服务器这一流程，云服务器采用Nginx作为Web托管服务器，服务器运维面板为宝塔面板（但这个不影响什么）。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值