Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set equal size to all children in Row

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,
          ),
        ),
      ),
    );
  }
like image 597
frozzyk Avatar asked Dec 05 '22 09:12

frozzyk


1 Answers

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,
            ),
          ),
like image 53
Ravinder Kumar Avatar answered Dec 15 '22 00:12

Ravinder Kumar