Row inside a column - Widgets in Row are invisible

Question

I have Designed an Sign Up form Where the first two field will be the First name and Last Name. both the fields will be in a single row. The Custom widget for the Field is given below

class LabelFormField extends StatelessWidget {
  final String label;

  const LabelFormField({this.label});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          label,
          style: TextStyle(
              color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 4.0,
        ),
        TextField(
          textAlign: TextAlign.start,
          decoration: new InputDecoration(
              contentPadding:
                  EdgeInsets.symmetric(horizontal: 4.0, vertical: 0),
              hintStyle: TextStyle(fontSize: 18.0),
              border: new OutlineInputBorder(
                borderSide: BorderSide(
                  width: 0,
                  style: BorderStyle.none,
                ),
                borderRadius: const BorderRadius.all(
                  const Radius.circular(10.0),
                ),
              ),
              filled: true,
              fillColor: Colors.grey[200]),
        )
      ],
    );
  }
}

And I Used this Custom Widget as

Column(                
 children: <Widget>[
                    Row(
                      children: <Widget>[
                        LabelFormField(
                          label: 'First Name',
                        ),
                        SizedBox(
                          width: 16.0,
                        ),
                        LabelFormField(
                          label: 'Last Name',
                        )
                      ],
                    ),
                  ],
                ),

You can see the ScreenShot it where the field is should be.

*The Row widget wants to determine the intrinsic size of its non-flexible children so it knows how much space that it has left for the flexible ones. However, TextField doesn't have an intrinsic width; it only knows how to size itself to the full width of its parent container. Try wrapping it in a Flexible or Expanded to tell the Row that you're expecting the TextField to take up the remaining space:* From: https://stackoverflow.com/questions/45986093/textfield-inside-of-row-causes-layout-exception-unable-to-calculate-size — Mobina, Jul 31 '20 at 18:53

MohanKumar · Accepted Answer · 2020-07-31T20:08:17.727

A simple solution will be Wrapping your Custom Field with Flexible or Expanded Which will look Like

  Column(
         children: <Widget>[
               Row(
                  children: <Widget>[
                    Expanded(
                      child: LabelFormField(
                        label: 'First Name',
                      ),
                    ),
                    SizedBox(
                      width: 16.0,
                    ),
                    Expanded(
                      child: LabelFormField(
                        label: 'Last Name',
                      ),
                    )
                  ],
                ),
              ],
            ),

By doing this your are giving equal spaces to both the custom widgets (Which occupies the full width of the row), where as before the row doesn't know the sizes of your custom widgets Hope this Solves your issue!

Row inside a column - Widgets in Row are invisible

1 Answers1