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.

Answer 1

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!