Texts visibly stacked on each other in flutter - flutter

Question

Widget build(BuildContext context) {
return Swipable(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
This is my code and i've been adjusting and readjusting for over 3hrs.. I just need the text to show on the image that can be swiped. Please help me. Thanks
image:

Answer 1

Hello I think what you are needing is to use a Stack Widget instead of a Column widget. When using Stacks you can use a Positioned widget to indicate exactly where you want your child widgets to be displayed inside of the stack as well.
Widget build(BuildContext context) {
return Swipable(
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height * 0.57,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Image.network(
widget.urls,
fit: BoxFit.cover,
),
),
),
),
),
Positioned(
top: 16,
right: 16,
child: Center(
child: Expanded(
child: Text(
widget.usernames,
maxLines: 1,
)),
),
)
],
),
//onSwipeLeft: () => _returnString(index),
);
}
}
Happy Coding!

Answer 2

You can use this way
Widget build(BuildContext context) {
return Column(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
widget.urls,
fit: BoxFit.cover,
),
),
height: MediaQuery.of(context).size.height * 0.57,
width: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
widget.usernames,
style: TextStyle(color: Colors.orange),
),
),
),
],
);
//onSwipeLeft: () => _returnString(index),
}