如何将容器中的图像设置为颤振的背景

Question

我想设计一个自定义组件卡，卡片中附加的图像，标题部分将在图像部分上跳跃，并在图像部分下方添加描述。 如何在颤振中跳过图像上的文本？

class CardWithImage extends StatelessWidget {
final String title, buttonText;
final String subTitle;
final String body;
final asset;
CardWithImage({
this.title,
this.subTitle,
this.body,
this.asset,
this.buttonText,
});
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: ThemeColors.primaryColor,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: ThemeColors.grey5,
blurRadius: 10,
spreadRadius: 5,
offset: Offset(3, 3),
)
],
),
child: Column(
children: <Widget>[
Image.asset(
asset,
height: 200,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
],
),
);
}
}

我想创建一张像这张图片这样的卡片

Answer 1

您可以使用以下代码实现您的愿望卡。

Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.png'),
fit: BoxFit.cover),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.grey.withOpacity(0.3),
height: 50,
width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Title",
),
),
),
),
),
Container(
padding: EdgeInsets.all(10),
child: Text(
"Your Big Text ",
textAlign: TextAlign.left,
),
)
],
),
),

Answer 2

使用

Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/background.png"), fit: BoxFit.cover)),
child:<Widget that needs to be in foreground>
......