I have a Row that has 2 children like this:
----------------------
| wide child1 | child2 |
----------------------
Is there any way to make each cell be equal in size, so that each cell's width would be equal to the width of the widest cell? Like this:
--------------------------
| wide child1 | child2 |
--------------------------
So the whole Row would take biggestCellWidth * numOfChildren
in width.
I couldn't achieve this behavior with built-in widgets and tried to implement MultiChildLayoutDelegate
but it also doesn't work since I can't measure children.
Upd:
// in build function
Container(
height: 48,
child: Material(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.circular(16),
color: Theme.of(context).colorScheme.primary,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// this widgets should be equal in width
_buildButton(
text: "Review",
onTap: _onReviewTap,
),
_buildButton(
text: "Buy",
onTap: _onBuyTap,
),
],
),
),
);
Widget _buildButton({
@required String text,
@required Function onTap,
@required EdgeInsets padding,
}) {
return InkWell(
onTap: onTap,
child: Center(
child: Text(
text,
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
),
);
}
Wrap your child1 and child2 inside Expanded,
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.amber,
height: 100,
),
),
Expanded(
child: Container(
color: Colors.amber,
height: 100,
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With