如何在堆栈中将文本放置在图像上?

Question

我一直在尝试在颤振中创建一张小卡片，我一直在尝试掌握堆栈的窍门以及如何将物品放置在彼此之上。我已经在代码中相互移动了大量项目，但我似乎无法弄清楚如何将文本放置在图像上，如图所示。关于如何做到这一点的任何帮助都很棒！

问题的图像

body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 20),
child: Stack(children: <Widget>[
Center(
child: InkWell(
onTap: null,
child: Container(
padding: EdgeInsets.all(5),
height: 200,
width: 300,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [Colors.red, Colors.redAccent],
),
borderRadius: BorderRadius.circular(25)),
child: Column(),
)),
),
Center(
child: Align(
alignment: Alignment.bottomCenter,
child: Image.asset(
'assets/running.png',
height: 180,
width: 300,
))),
Center(
child: Text(
"Events",
style: GoogleFonts.poppins(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 30),
)),
]))
],
),

Answer 1

使用以下代码Stack小部件

Stack(
children: <Widget>[
Card(
child: Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
alignment: FractionalOffset.center,
image: AssetImage('assets/images/jitesh.jpg'),
)),
),
),
Align(
alignment: Alignment.topCenter,
child: Text(
'jitesh',
style: TextStyle(fontSize: 20, color: Colors.white),
)),
],
),