3.0.0-beta.2 : arrange widget with Row and Column

[benoitverstraete]

Hi @danvick,

I would like to arrange the widgets with Column and Row but there are a lot of exceptions thrown (RenderObject, RenderFlex, etc.). Could you please tell me how, for example, put two inputs in a Row ?

Here is an example :

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<FormBuilderState> _fbKey = GlobalKey();

  var data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(child: _buildForm()),
    );
  }

  Widget _buildForm() {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, right: 8.0),
      child: Column(
        children: <Widget>[
          FormBuilder(
            context,
            key: _fbKey,
            autovalidate: true,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    FormBuilderDateTimePicker(
                      attribute: 'begin_time',
                      inputType: InputType.time,
                      format: DateFormat("HH:mm"),
                      decoration: InputDecoration(labelText: "Start time"),
                    ),
                    FormBuilderDateTimePicker(
                      attribute: 'end_time',
                      inputType: InputType.time,
                      format: DateFormat("HH:mm"),
                      decoration: InputDecoration(labelText: "End time"),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              MaterialButton(
                child: Text("Submit"),
                onPressed: () {
                  _fbKey.currentState.save();
                  if (_fbKey.currentState.validate()) {
                    print(_fbKey.currentState.value);
                  }
                },
              ),
              MaterialButton(
                child: Text("Reset"),
                onPressed: () {
                  _fbKey.currentState.reset();
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}

Thanks !

[danvick]

This issue does not directly stem from this package but I'll try to help.

The reason for the error is because the widgets you've placed inside the Row i.e. the FormBuilderDateTimePickers have no pre-defined width - since they are meant to take the entire width of their parent - so Flutter will not know how much space on screen to allocate to each when rendering.

Putting Expandable widget around each will have Flutter assign them equal width thus the Row will render without issues:

              Row(
                  children: <Widget>[
                    Expanded(
                      child: FormBuilderDateTimePicker(
                        attribute: 'begin_time',
                        inputType: InputType.time,
                        format: DateFormat("HH:mm"),
                        decoration: InputDecoration(labelText: "Start time"),
                      ),
                    ),
                    SizedBox(width: 10,),
                    Expanded(
                      child: FormBuilderDateTimePicker(
                        attribute: 'end_time',
                        inputType: InputType.time,
                        format: DateFormat("HH:mm"),
                        decoration: InputDecoration(labelText: "End time"),
                      ),
                    ),
                  ],
                ),

[benoitverstraete]

Ho, sorry @danvick, I though it came from the package.

Thanks for the solution, it works !