How to give all Row children the same height

Question

I am having a hard time making a Row's two children, i.e. a TextField and a RaisedButton the same height. The button is always shorter in height. I can do that with SizedBox, but it is a fixed height and is manual. Here's what my code and UI looks like now:

                   Row(
                     children: [
                       Padding(
                         padding: _padding,
                         child: SizedBox(
                           width: 200,
                           child: TextField(
                             keyboardType: TextInputType.number,
                             decoration: InputDecoration(
                                 labelText: 'Answer',
                                 border: OutlineInputBorder(borderRadius: BorderRadius.circular(4.0))
                             ),
                           ),
                         ),
                       ),
                       RaisedButton(
                         onPressed: _evaluate,
                         child: Text('Evaluate'),
                       ),
                     ],
                   ),

I wonder if there is a recommended way how to make a Row's children the same height.

By the way, the black lines on the sides are for the emulator frames.

score 2 · Answer 1 · answered Aug 26 '20 at 17:48

2

It's not good to wrap textfield with container and give it height, some cases textfield crack when typing, you can use inside of you Textfield -> InputDecoration;

contentPadding: EdgeInsets.all(20),

you can adjust textfield height from here.

answered Aug 26 '20 at 17:48

Ulaş Kasım

810
1
8
14

score 1 · Answer 2 · answered Aug 26 '20 at 17:17

1

Try to wrap Row with SizedBox or container with fixed height

answered Aug 26 '20 at 17:17

ElsayedDev

601
1
8
15

void · Answer 3 · 2020-08-26T17:44:02.387

1

You can wrap the Row widget with a SizedBox widget and give it a desired height:

I added a demo using your code as an example:

 SizedBox( // new line 
      height: 60, // give it a desired height here
      child: Row(
        children: [
          Padding(
            padding: _padding,
            child: SizedBox(
              width: 200,
              child: TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    labelText: 'Answer',
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(4.0))),
              ),
            ),
          ),
          RaisedButton(
            onPressed: _evaluate,
            child: Text('Evaluate'),
          ),
        ],
      ),
    ),

edited Aug 26 '20 at 17:44

answered Aug 26 '20 at 17:38

void

12,787
3
28
42

I like this answer, but what if this row is child of a column of textfields? How to make sure the spacing between rows are the same? – Mehdi Haghgoo Aug 26 '20 at 18:04
1

I don't really get what example you are trying to make me picture, but the `Row` has properties of `mainAxisAlignment` and `crossAxisAlignment` to space it's children. Same as the `Column` – void Aug 26 '20 at 18:52

How to give all Row children the same height

3 Answers3