Flutter DropdownButtonFormField does not show in Row

Question

I am adding a DropdownFormField and TextFormField side by side inside a Row. This is what the build function looks like

Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                DropdownButton(
                  hint: new Text('Select Gender'),
                  items: _salutations,
                  value: client.salutation,
                ),
                SizedBox(width: 20),
                new Expanded(
                  child: TextFormField(
                    decoration: InputDecoration(labelText: 'Name'),
                    validator: (value) {
                      return value.isEmpty ? 'Empty name.' : '';
                    },
                  ),
                ),
              ]
            )
          ],
        )
      ),
    );
  }

That code currently shows because it is DropdownButton. But if I change it to DropdownButtonFormField it won't show, as long as it is in the Row(). Why is this?

I wish to use DropdownButtonFormField so that the height of the Dropdown will be the same as the TextFormField since the current code shows the dropdown with a smaller height.

Answer 1

Try out like this,

List<String> valueList = ['A', 'B', 'C', 'D'];

  String _value = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Form(
        key: _formKey,
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: 50.0,
                    width: 100.0,
                    child: new DropdownButtonFormField<String>(
                      hint: new Text('Select'),
                      items: valueList.map((String value) {
                        return new DropdownMenuItem<String>(
                          value: value,
                          child: new Text(value),
                        );
                      }).toList(),
                    ),
                  ),
                  SizedBox(width: 20),
                  new Expanded(
                    child: Container(
                      height: 50.0,
                      child: TextFormField(
                        decoration: InputDecoration(labelText: 'Name'),
                        validator: (value) {
                          return value.isEmpty ? 'Empty name.' : '';
                        },
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

DropdownButtonFormField must have a width inside Row so wrap it inside a Container and set width for that Container

Hope this could help..