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 = "开心星星乐";item1_1.desc = "开心星星乐，消除星星，有趣";item1_1.imageName = "img_kxxxl.jpg";items.add(item1_1);return items;}
}

展示listview列表

 import 'package:flutter/material.dart';
import 'package:flutter_web/content/content_setting.dart';
import 'package:flutter_web/widget/main_content_card.dart';class MainContent extends StatefulWidget {const MainContent({super.key,this.width,this.height,});final double? width;final double? height;@overrideState<MainContent> createState() => _MainContentState();
}class _MainContentState extends State<MainContent> {@overrideWidget build(BuildContext context) {return Container(width: widget.width,height: widget.height,padding: const EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 10),decoration: BoxDecoration(color: Color(0xFFF7F7F7),border: Border.all(color: Color(0xFFf0f0f0),width: 1,style: BorderStyle.solid,),),child: Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 0, bottom: 0),height: 50,width: widget.width,alignment: Alignment.center,child: Text("玩玩小游戏吧",textAlign: TextAlign.left,maxLines: 1,overflow: TextOverflow.ellipsis,softWrap: true,style: const TextStyle(fontSize: 16,fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,color: Color(0xFF101216),decoration: TextDecoration.none,),),),Expanded(child: ListView.builder(padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),addRepaintBoundaries: false,addAutomaticKeepAlives: false,itemCount: ContentSetting.getContentItems().length,itemBuilder: (context, index) {ContentItem item = ContentSetting.getContentItems()[index];return MainContentCard(imageName: item.imageName ?? "",name: item.name,desc: item.desc,sImageNames: item.sImageNames ?? [],);},),),],));}
}

列表每一项展示的widget

import 'package:flutter/material.dart';class MainContentCard extends StatelessWidget {const MainContentCard({super.key,this.isSelected = false,required this.imageName,this.name = "",this.desc = "",this.sImageNames,});final bool? isSelected;final String imageName;final String? name;final String? desc;final List<String>? sImageNames;@overrideWidget build(BuildContext context) {return Container(margin: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),padding: const EdgeInsets.only(left: 10, right: 10, top: 15, bottom: 10),decoration: BoxDecoration(color: (true == isSelected) ? Color(0xFFEDF0F8) : Colors.white,borderRadius: const BorderRadius.all(Radius.circular(6),),boxShadow: const [BoxShadow(color: Color(0xFFf0f0f0),offset: Offset(5, 5),blurRadius: 10,),BoxShadow(color: Color(0xFFf0f0f0),offset: Offset(-5, -5),blurRadius: 10,),],),child: Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: [ClipRRect(borderRadius: const BorderRadius.all(Radius.circular(2),),clipBehavior: Clip.hardEdge,child: Image.asset("images/${imageName}",width: 543.0,height: 200.0,fit: BoxFit.fill,),),const SizedBox(width: 15,),Container(height: 100,child: Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start,children: [const Expanded(child: SizedBox(),),Text(name ?? "",textAlign: TextAlign.left,maxLines: 1,overflow: TextOverflow.ellipsis,softWrap: true,style: const TextStyle(fontSize: 15,fontWeight: FontWeight.w600,fontStyle: FontStyle.normal,color: Color(0xFF101216),decoration: TextDecoration.none,),),const SizedBox(height: 15,),Text(desc ?? "",textAlign: TextAlign.left,maxLines: 1,overflow: TextOverflow.ellipsis,softWrap: true,style: const TextStyle(fontSize: 14,fontWeight: FontWeight.w400,fontStyle: FontStyle.normal,color: Color(0xFFa0a2a6),decoration: TextDecoration.none,),),const Expanded(child: SizedBox(),),],),),],),);}
}