title: Row with multiple TextFields and a DropDown where one TextField should be be bigger, and all should have same height
body: <p>I have a Row that has 3 fields in it: 2 TextFields, 1 DropdownButtonHideUnderline wrapped in a Container. I'm trying to ensure that the first TextField takes up about 50-60% and the other two fields share the remaining space. I also want the fields to have the same height. So, something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/FLpTD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FLpTD.png" alt="enter image description here"></a></p>
  
  <p>This is the code I have:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Container(
          color: Theme.of(context).accentColor,
          child: Padding(
              padding: const EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
              child: Row(children: &lt;Widget&gt;[
                Expanded(
                    child: Container(
                        padding: EdgeInsets.only(right: 5.0),
                        child: TypeAheadField(
                          textFieldConfiguration: TextFieldConfiguration(
                              autofocus: true,
                              controller: widget.ingredientController,
                              style: DefaultTextStyle.of(context)
                                  .style
                                  .copyWith(fontStyle: FontStyle.italic),
                              decoration: InputDecoration(
                                  border: InputBorder.none,
                                  filled: true,
                                  fillColor: Colors.white.withOpacity(1),
                                  hintText: 'Ingredient',
                                  suffixIcon: GestureDetector(
                                      onTap: widget.addFunction,
                                      child: Icon(
                                        Icons.add,
                                        color: Colors.grey,
                                      )))),
                          suggestionsCallback: (pattern) async {
                            return await _findIngredients(pattern);
                          },
                          //If not items are found, return an empty container.
                          noItemsFoundBuilder: (context) {
                            return Container(height: 0, width: 0);
                          },
                          itemBuilder: (context, suggestion) {
                            return ListTile(
                              title: Text(suggestion.name),
                            );
                          },
                          onSuggestionSelected: (Ingredient suggestion) {
                            widget.ingredientController.text = suggestion.name;
                          },
                        ))),
                Expanded(
                    child: TextField(
                        maxLines: 1,
                        controller: widget.quantityController,
                        keyboardType: TextInputType.text,
                        autofocus: false,
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          filled: true,
                          fillColor: Colors.white.withOpacity(1),
                          hintText: 'Qty',
                        ))),
                Expanded(flex: 1, child: UnitDropdown()),
              ])));
    }
  </code></pre>
  
  <p>What I'm left with is this:</p>
  
  <p><a href="https://i.stack.imgur.com/amnZM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/amnZM.png" alt="enter image description here"></a></p>
  
  <p>I've tried setting the flex factor on the Expanded to different things, but that just results in an overflow on the right side. I've also not found a way to force all of the widgets to have the same height.</p>