背景图片

[lsdlh]

卡片上的背景图片是怎么制作的？

[AmosHuKe]

Stack + Positioned 就好啦
类似下面这样

Mood-Example/lib/views/home/index.dart

Lines 436 to 581 in f11e8d2

	/// 操作卡片
	class ActionCard extends StatefulWidget {
	const ActionCard({super.key});
	@override
	State<ActionCard> createState() => _ActionCardState();
	}
	class _ActionCardState extends State<ActionCard> {
	@override
	Widget build(BuildContext context) {
	return DecoratedBox(
	decoration: BoxDecoration(
	gradient: const LinearGradient(
	begin: Alignment.bottomLeft,
	end: Alignment.topRight,
	colors: [
	Color(0xFFFFBBBB),
	Color(0xFFFFBBBB),
	Color(0xFFFFC5C5),
	],
	),
	borderRadius: BorderRadius.circular(30.w),
	),
	child: Padding(
	padding: EdgeInsets.only(
	left: 24.w,
	right: 24.w,
	top: 24.w,
	bottom: 24.w,
	),
	child: Row(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Stack(
	clipBehavior: Clip.none,
	alignment: Alignment.centerLeft,
	children: [
	/// 图片或装饰
	Positioned(
	bottom: -18.w,
	left: 128.w,
	child: Image.asset(
	'assets/images/onboarding/onboarding_3.png',
	fit: BoxFit.contain,
	width: 180.w,
	),
	),
	/// 文字和按钮
	Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Expanded(
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Text(
	S.of(context).home_upgrade_title,
	style: TextStyle(
	color: Colors.black87,
	fontSize: 20.sp,
	fontWeight: FontWeight.w900,
	),
	),
	Padding(
	padding: EdgeInsets.only(
	top: 8.w,
	),
	child: Text(
	S.of(context).home_upgrade_content,
	style: TextStyle(
	color: Colors.black87,
	fontSize: 16.sp,
	),
	),
	),
	],
	),
	),
	Container(
	constraints:
	BoxConstraints(minHeight: 45.w, minWidth: 95.w),
	child: AnimatedPress(
	child: OutlinedButton(
	style: ButtonStyle(
	foregroundColor:
	MaterialStateProperty.all(Colors.white),
	backgroundColor:
	MaterialStateProperty.all(Colors.black87),
	textStyle: MaterialStateProperty.all(
	TextStyle(
	fontSize: 14.sp,
	fontWeight: FontWeight.w400,
	),
	),
	shape: MaterialStateProperty.all(
	RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(14.sp),
	),
	),
	overlayColor:
	MaterialStateProperty.all(Colors.white10),
	),
	onPressed: () => {
	/// 导航到新路由
	Navigator.pushNamed(
	context,
	Routes.onboarding,
	).then((result) {})
	},
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
	Padding(
	padding: EdgeInsets.only(top: 0.w, right: 4.w),
	child: Text(
	S.of(context).home_upgrade_button,
	strutStyle: const StrutStyle(
	forceStrutHeight: false,
	leading: 1,
	),
	style: TextStyle(
	fontSize: 14.sp,
	),
	),
	),
	Icon(
	Remix.play_circle_fill,
	size: 24.sp,
	),
	],
	),
	),
	),
	),
	],
	),
	],
	)
	],
	),
	),
	);
	}
	}

[lsdlh]

Stack + Positioned 就好啦 类似下面这样

Mood-Example/lib/views/home/index.dart

Lines 436 to 581 in f11e8d2

	/// 操作卡片
	class ActionCard extends StatefulWidget {
	const ActionCard({super.key});
	@override
	State<ActionCard> createState() => _ActionCardState();
	}
	class _ActionCardState extends State<ActionCard> {
	@override
	Widget build(BuildContext context) {
	return DecoratedBox(
	decoration: BoxDecoration(
	gradient: const LinearGradient(
	begin: Alignment.bottomLeft,
	end: Alignment.topRight,
	colors: [
	Color(0xFFFFBBBB),
	Color(0xFFFFBBBB),
	Color(0xFFFFC5C5),
	],
	),
	borderRadius: BorderRadius.circular(30.w),
	),
	child: Padding(
	padding: EdgeInsets.only(
	left: 24.w,
	right: 24.w,
	top: 24.w,
	bottom: 24.w,
	),
	child: Row(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Stack(
	clipBehavior: Clip.none,
	alignment: Alignment.centerLeft,
	children: [
	/// 图片或装饰
	Positioned(
	bottom: -18.w,
	left: 128.w,
	child: Image.asset(
	'assets/images/onboarding/onboarding_3.png',
	fit: BoxFit.contain,
	width: 180.w,
	),
	),
	/// 文字和按钮
	Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Expanded(
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Text(
	S.of(context).home_upgrade_title,
	style: TextStyle(
	color: Colors.black87,
	fontSize: 20.sp,
	fontWeight: FontWeight.w900,
	),
	),
	Padding(
	padding: EdgeInsets.only(
	top: 8.w,
	),
	child: Text(
	S.of(context).home_upgrade_content,
	style: TextStyle(
	color: Colors.black87,
	fontSize: 16.sp,
	),
	),
	),
	],
	),
	),
	Container(
	constraints:
	BoxConstraints(minHeight: 45.w, minWidth: 95.w),
	child: AnimatedPress(
	child: OutlinedButton(
	style: ButtonStyle(
	foregroundColor:
	MaterialStateProperty.all(Colors.white),
	backgroundColor:
	MaterialStateProperty.all(Colors.black87),
	textStyle: MaterialStateProperty.all(
	TextStyle(
	fontSize: 14.sp,
	fontWeight: FontWeight.w400,
	),
	),
	shape: MaterialStateProperty.all(
	RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(14.sp),
	),
	),
	overlayColor:
	MaterialStateProperty.all(Colors.white10),
	),
	onPressed: () => {
	/// 导航到新路由
	Navigator.pushNamed(
	context,
	Routes.onboarding,
	).then((result) {})
	},
	child: Row(
	mainAxisAlignment: MainAxisAlignment.center,
	children: [
	Padding(
	padding: EdgeInsets.only(top: 0.w, right: 4.w),
	child: Text(
	S.of(context).home_upgrade_button,
	strutStyle: const StrutStyle(
	forceStrutHeight: false,
	leading: 1,
	),
	style: TextStyle(
	fontSize: 14.sp,
	),
	),
	),
	Icon(
	Remix.play_circle_fill,
	size: 24.sp,
	),
	],
	),
	),
	),
	),
	],
	),
	],
	)
	],
	),
	),
	);
	}
	}

我的意思是图片是你自己设计的吗，哪里能找到这种素材，比如功能更新那个火箭图片

[AmosHuKe]

README 里有写，是来自 icons8 的插画，https://icons8.com/illustrations
如果要免费使用他们的内容，注意要标注版权噢~

[lsdlh]

README里有写，是来自icons8的插画， https: //icons8.com/illustrations 如果要免费使用他们的内容，注意要标示版本哦~

ok谢谢

[lsdlh]

老哥你是开订阅了吗，能不能帮我下个图标

[AmosHuKe]

老哥你是开订阅了吗，能不能帮我下个图标

没有开订阅，都下载的免费内容

[lsdlh]

ok