can anyone help me out?
I'm struggling to figure out how I can get the coloured containers to extend to match the height of the tallest one in their row.
Currently they have no fixed height/width and are wrapped in Expanded widgets to get their dynamic size.
I'd like to keep their responsive sizes if possible. I already have a method in place to switch to a Column instead of a Row once the screen is small enough. Once in a Column I can use width: double.infinity
because there is no horizontal scroll..
This is an example of the code used (sorry there's so much!):
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Scrollbar(
child: CustomScrollView(
slivers: <Widget>[
SliverNavBar(),
SliverList(
delegate: SliverChildListDelegate(
[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: _homePageContent(),
);
Footer()
],
),
),
],
),
),
);
}
}
_homePageContent() {
return <Widget>[
_HomePageInfoBox(
backgroundColor: accentColor,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum...',
),
_HomePageInfoBox(
backgroundColor: primaryColorDark,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum....',
),
_HomePageInfoBox(
backgroundColor: primaryColor,
title: 'THIS IS A TITLE',
body:
'Lorem ipsum...',
),
];
}
class _HomePageInfoBox extends StatelessWidget {
const _HomePageInfoBox({
Key key,
@required this.title,
@required this.body,
@required this.backgroundColor,
}) : super(key: key);
final String title;
final String body;
final Color backgroundColor;
@override
Widget build(BuildContext context) {
return Expanded(
Container(
color: backgroundColor,
child: Padding(
padding: const EdgeInsets.all(50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(
color: primaryTextColor,
fontSize: 25,
fontFamily: 'CoffeeAndTea'),
),
SizedBox(height: 10),
Text(
body,
style: TextStyle(
color: primaryTextColor,
fontSize: 24,
height: 1.4,
fontFamily: 'ElegantSans'),
),
SizedBox(height: 20),
Text(
"Let's Go!",
style: TextStyle(
color: Colors.white, fontFamily: 'CreamCake', fontSize: 30),
textAlign: TextAlign.center,
),
],
),
),
),
);
}
}
To adjust row items height to biggest one wrap row of items with IntrinsicHeight
widget:
IntrinsicHeight(
child:Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _homePageContent(),
),
),
Here is dartpad demo.