Move Row Column to bottomCenter - flutter

Question

How move Column wrap with Row to bottomCenter?
class DetailPage extends StatelessWidget {
const DetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kBackgroundColor,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
children: [
destinationImage(),
contentImage(),
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
kWhiteColor,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child: Container(
width: double.infinity,
height: 420.0,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image_destination1.png'),
),
),
),
);
}
}
Widget contentImage() {
return Container(
padding: EdgeInsets.only(
left: defaultSideMargin,
bottom: 80.0,
right: defaultSideMargin,
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Rialto Bridge',
style: whiteTextStyle.copyWith(
fontSize: 24.0,
fontWeight: semiBold,
),
),
Text(
'Italy',
style: whiteTextStyle.copyWith(
fontSize: 16.0,
fontWeight: light,
),
),
],
),
),
Container(
width: 24.0,
height: 24.0,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/icon_star.png'),
),
),
),
const SizedBox(width: 4.0),
Text(
'4.8',
style: blackTextStyle.copyWith(
fontSize: 14.0,
fontWeight: medium,
),
)
],
),
);
}

Answer 1

You can either use the alignment property on Stack widget.
Or you can wrap your contentImage() in a Positioned Widget
Try it on DartPad:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: DetailPage(),
);
}
}
class DetailPage extends StatelessWidget {
const DetailPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
alignment: Alignment.topCenter,
children: [
destinationImage(),
Positioned(
bottom: 0,
child: contentImage(),
)
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
Colors.white,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child:
Container(width: double.infinity, height: 420.0, color: Colors.green),
);
}
}
Widget contentImage() {
return Container(
padding: const EdgeInsets.only(bottom: 80.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text('Rialto Bridge'),
Text('Italy'),
],
),
Container(
width: 24.0,
height: 24.0,
color: Colors.amber,
),
const SizedBox(width: 4.0),
const Text('4.8')
],
),
);
}

Answer 2

Wrap contentImage into Positioned.fill
Stack(
children: [
destinationImage(),
Positioned.fill(child: contentImage()),
],
)
full code
class DetailPage extends StatelessWidget {
const DetailPage({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: ListView(
padding: EdgeInsets.zero,
children: [
Stack(
children: [
destinationImage(),
Positioned.fill(child: contentImage()),
],
)
],
),
);
}
Widget destinationImage() {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.center,
end: Alignment.bottomCenter,
colors: [
kWhiteColor,
Colors.black.withOpacity(0.80),
],
).createShader(bounds);
},
child: Container(
width: double.infinity,
height: 420.0,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/image_destination1.png'),
),
),
),
);
}
}
Widget contentImage() {
return Container(
padding: EdgeInsets.only(
left: defaultSideMargin,
bottom: 80.0,
right: defaultSideMargin,
),
child: Container(
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
color: Colors.white,
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Spacer(),
Text(
'Rialto Bridge',
style: whiteTextStyle.copyWith(
fontSize: 24.0,
fontWeight: semiBold,
),
),
Text(
'Italy',
style: whiteTextStyle.copyWith(
fontSize: 16.0,
fontWeight: light,
),
),
],
),
),
),
Container(
width: 24.0,
height: 24.0,
decoration: const BoxDecoration(
color: Colors.green,
image: DecorationImage(
image: AssetImage('assets/icon_star.png'),
),
),
),
const SizedBox(width: 4.0),
Text(
'4.8',
style: blackTextStyle.copyWith(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
)
],
),
),
);
}