flutter开发实战-flutter build web发布到github page及图片未显示问题
GitHub Pages是一个直接从GitHub存储库托管的静态站点服务，它允许用户通过简单的配置，将个人的代码项目转化为一个可以在线访问的网站。这里使用flutter build web来构建web发布到GitHub Pages。
项目地址：
一、编写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;
@override
State<MainContent> createState() => _MainContentState();
}
class _MainContentState extends State<MainContent> {
@override
Widget 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;
@override
Widget 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(),
),
],
),
),
],
),
);
}
}
二、flutter build web
完成代码后，可以通过以下命令进行build web
flutter build web--web-renderer html
命令执行后，将在build文件夹中有一个web文件夹。该web文件夹内即为build后的web项目。通过git将该web文件夹内上传到github pages。
三、上传github pages后，图片不显示
由于在flutter build后的web文件夹的assets目录下没有工程使用的本地文件夹。
通过打开github，打开Chrome检查，可以看到控制台，获取图片错误提醒。
如下图所示：
在图中的我们可以看到，工程使用的图未在build后的web文件夹的assets目录下。我们需要将工程中的assets的images复制到build后的web文件夹的assets目录下，再将其上传至github pages上。上传后等待几分钟，再打开github pages项目即可正常浏览。
效果图如下：
github pages项目地址：https://goodbruce.github.io/
四、小结
flutter开发实战-flutter build web发布到github page及图片未显示问题
学习记录，每天不停进步。