I'm trying to create a Row that is made up of two columns, with an Expanded Scrollable Container below it. Seems simple enough... See image 1.
The challenge:
The height of Column 1 should increase to cater for long text in "Region". The 2 Widgets within Container 2 should then SpaceAround depending on the height of Column 1. The Expanded Scrollable Container below would then adjust to fill the remaining vertical height.
Image 2 sort of shows what I'm after. However to achieve this I've had to give the Row a Flexible parent, which means it then matches in height to the Expanded Container below, meaning it is too tall. I am aware I can assign flex to help adjust the relative heights of the Row and the Expanded Container. However it effectively fixes the height of the Row which I don't want to do.
Any ideas, or as I fear, am I asking too much?
The code below shows what I think the properties should be of the various Rows & Columns, primarily: CrossAxisAlignment.stretch for the Row, and MainAxisAlignment.spaceAround for Column 2, but it doesn't work. I've tried adding Flexible & Expanded parents at various points without any luck. Can anyone help?
P.S I'm new to coding and this is my first question so hope it all makes sense!
class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: const EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 0.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Flexible(
child: Text(
'Title Very Very Very Very Very Very Long Title',
style: TextStyle(color: Colors.white, fontSize: 30),
textAlign: TextAlign.left,
softWrap: true,
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
child: Icon(
Icons.check_circle,
color: myBlueColour,
size: 33.0,
),
),
)
],
),
),
Container(
padding: EdgeInsets.all(0.0),
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(9),
),
border: Border.all(color: Colors.white, width: 3.0),
),
child: AspectRatio(
aspectRatio: audioGuideImageAspectRation,
child: Image.asset(
'images/logo.png',
),
),
),
Container(
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 8.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(9),
),
color: Colors.white,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
InfoText(
field: 'Type',
info: 'Type 1',
),
InfoText(field: 'Duration', info: '1 hour'),
InfoText(field: 'Country', info: 'France'),
Padding(
padding: const EdgeInsets.fromLTRB(0, 3, 0, 3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Region: ',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0),
),
Text(
'Very very very very long name',
softWrap: true,
style: TextStyle(fontSize: 20.0),
),
],
),
),
InfoText(field: 'Purchase cost', info: '£3.00'),
],
),
Container(
width: 120,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Download',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
IconButton(
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
icon: Icon(
Icons.download_rounded,
size: 35.0,
color: myGreenColour,
),
onPressed: () {
print('Download button pressed');
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('Confirm purchase'),
content: Text(
'Are you sure you want to purchase this audio guide?'),
actions: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context, '/AudioGuideScreen');
},
child: Text('Yes'),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop(false);
},
child: Text('No'),
),
],
),
);
}),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Find on map',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold),
),
IconButton(
padding: EdgeInsets.fromLTRB(5, 0, 5, 5),
icon: Icon(
Icons.location_pin,
size: 35.0,
color: myBlueColour,
),
onPressed: () {
print('Map button pressed');
Navigator.pushNamed(
context, '/AttractionMap');
}),
],
),
],
),
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(9),
),
color: Colors.white,
),
child: CupertinoScrollbar(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ',
style: TextStyle(fontSize: 24),
),
),
),
),
),
),
],
),
),
),
);
}
}
class InfoText extends StatelessWidget {
const InfoText({Key key, @required this.field, @required this.info})
: super(key: key);
final String field;
final String info;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 3, 0, 3),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'$field: ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
Text(
info,
softWrap: true,
style: TextStyle(fontSize: 20.0),
),
],
),
);
}
}