'How to force a row to take the height of one (or the smallest) of its children
I would like the row (containing the green and the red widgets) or the green widget to take the red widget's height, but without using a fixed size or a ratio anywhere.
The red widget must impose its size which depends on its content.
Is it possible (in a simple way) ?
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(child: MyContainer(color: Colors.red, child: Column(children: generateTexts(10)))),
Expanded(child: MyContainer(color: Colors.green, child: ListView(children: generateTexts(50))))
],
),
),
Expanded(child: MyContainer(color: Colors.blue, child: Center(child: Text('REMAINING HEIGHT OF THE COLUMN')))),
MyContainer(
height: 50,
color: Colors.yellow,
child: Center(child: Text('FIXED HEIGHT')),
)
],
));
}
}
List<Widget> generateTexts(int count) {
return List<Widget>.generate(count, (index) => Text('text $index'));
}
class MyContainer extends StatelessWidget {
const MyContainer({this.child, this.color = Colors.transparent, this.width, this.height});
final Widget? child;
final Color color;
final double? width;
final double? height;
@override
Widget build(BuildContext context) {
return Container(
child: child,
decoration: BoxDecoration(
color: color, border: Border.all(color: Colors.black), borderRadius: BorderRadius.circular(12)),
width: width,
height: height);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
