flutter开发实战-flutter build web发布到github page及图片未显示问题

最新推荐文章于 2025-03-10 09:13:51 发布

原创

最新推荐文章于 2025-03-10 09:13:51 发布 · 723 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端 #github

flutter开发实战-flutter build web发布到github page及图片未显示问题

GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，‌它允许用户通过简单的配置，‌将个人的代码项目转化为一个可以在线访问的网站。‌这里使用flutter build web来构建web发布到GitHub Pages。

项目地址：

https://goodbruce.github.io/

在这里插入图片描述

一、编写flutter代码

这里使用的是Android studio创建项目。创建选择web，如图所示
在这里插入图片描述

列表数据

// 内容数据
class ContentSetting {
  static SubBarItem getSideBarItem() {
    SubBarItem item1 = SubBarItem();
    item1.name = "BruceGwo";
    item1.desc = "iOS开发者、flutter开发、Javascript兼有学习Cocos creator游戏开发。积极主动，做好学习规划，探索未知的可能。";
    item1.imageName = "ic_avatar.jpg";
    item1.bottomDesc = "联系我lansidream#foxmail.com（#换成@）";
    return item1;
  }

  static List<ContentItem> getContentItems() {
    List<ContentItem> items = [];

    ContentItem item1 = ContentItem();
    item1.name = "全民保卫地球";
    item1.desc = "全民保卫地球，我们一起来Go";
    item1.imageName = "img_qmbwdq.png";
    items.add(item1);
    
    ContentItem item1_2 = ContentItem();
    item1_2.name = "消灭怪怪兽";
    item1_2.desc = "消灭怪怪兽，拖动飞机消灭怪兽";
    item1_2.imageName = "img_xmggs.jpg";
    items.add(item1_2);

    ContentItem item2 = ContentItem();
    item2.name = "小绳套牛";
    item2.desc = "开心套牛，小绳套牛，小绳大力度";
    item2.imageName = "img_xstn.jpg";
    items.add(item2);

    ContentItem item3 = ContentItem();
    item3.name = "战机长空";
    item3.desc = "好玩刺激空中大战，打飞机游戏";
    item3.imageName = "img_zjck.jpg";
    items.add(item3);

    ContentItem item1_1 = ContentItem();
    item1_1.name = "开心星