Insert a Row inside a Column in Flutter

Question

My UI screen is basically rendered using a Column Widget and inside this widget, I am inserting all the other UI components. One of these happens to be a Row ( consisting of 2 text fields). This is the Row Widget :

var phoneNumber = new Row(
  children: <Widget>[
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: countryCodePicker,
    ),
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: mobileNumber,
    ),
  ],
);

The Main UI Screen being :

     return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
                customerName,
                emailAddress,
//                new Container(
//                  child: deliveryOptionRow,
//                ),
                mobileNumber,
                countryCodePicker,
                templateMessagesDropDown,
                templateMessageTextField,
                sendGoogleReview,
              ],
            )
    );

I see this exception when I add the Row to the Column

     The following RenderObject was being processed when the exception was fired:
flutter:   _RenderListTile#06b03 relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: _ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← Listener ← _GestureSemantics ←
flutter:   RawGestureDetector ← GestureDetector ← InkWell ← ListTile ← ListTileTheme ← ⋯
flutter:   parentData: offset=Offset(0.0, 0.0) (can use size)
flutter:   constraints: BoxConstraints(unconstrained)
flutter:   size: MISSING
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter:   _RenderRadio#302a4 relayoutBoundary=up12 NEEDS-PAINT
flutter:   RenderParagraph#58a45 NEEDS-LAYOUT NEEDS-PAINT

What would be the best way to add the row inside the main UI screen.

Answer 1

this should solve your problem,

var phoneNumber = new Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Expanded(
      child: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: countryCodePicker,
      ),
    ),
    Expanded(
      child: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: mobileNumber,
      ),
    ),
  ],
);

hope it helps!

Answer 2

If your Row contains a TextField or TextFormField or any other widget which tries to grow to infinity, you need to provide an intrinsic width to it. You can do it in several ways:

• Use Expanded:

  Row(
    children: [
      Expanded(
        child: TextField(), // <-- Wrapped in Expanded.
      ),
    ],
  )
  

• Use Flexible:

  Row(
    children: [
      Flexible(
        child: TextField(), // <-- Wrapped in Flexible.
      ),
    ],
  )
  

• Provide a fixed width:

  Row(
    children: [
      SizedBox(
        width: 200, // <-- Fixed width.
        child: TextField(),
      ),
    ],
  )