title: How to build dependent dropdown menus in Flutter?
body: <p>I have three dropdown-menus, and I want a fourth one to be displayed <code>ONLY</code> if certain conditions are met (<code>Favourite Animal = Cat</code>). I also want that fourth dropdown-menu to disappear whenever the conditions are no longer true. Right now the changes are displayed if I manually save the file and execute hot reload, so I'm guessing it has something to do with <code>setState()</code>, which I have not included in the <code>filter.dart</code>-file.</p>
  
  <p>File 1 - filter.dart:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import './dropdown.dart';
  
  class Filter extends StatefulWidget {
    @override
    _FilterState createState() =&gt; _FilterState();
  }
  
  class _FilterState extends State&lt;Filter&gt; {  
    @override
    Widget build(BuildContext context) {
      return Card(
        elevation: 10,
        child: Container(
          height: ((MediaQuery.of(context).size.height) / 2),
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: &lt;Widget&gt;[
              Column(
                children: &lt;Widget&gt;[
                  Dropdown('Gender', ['Female', 'Male']),
                  Dropdown('Age', ['&lt;15', '15-20', '&gt;20']),
                  Dropdown('Favourite Animal', ['Cat', 'Dog', 'Hamster']),
                  (cat) ? Dropdown('Favourite cat-toy', ['Toy-mouse', 'Ribbon', 'Ball']) : Text('')
                ],
              ),
              RaisedButton(
                child: Text('Submit'),
                onPressed: () {},
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>File 2 - dropdown.dart:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  class Dropdown extends StatefulWidget {
    final String _key;
    final List&lt;String&gt; _values;
  
    Dropdown(this._key, this._values);
  
    @override
    _DropdownState createState() =&gt; _DropdownState();
  }
  
  class _DropdownState extends State&lt;Dropdown&gt; {
    var _chosenValue;
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        child: DropdownButton&lt;String&gt; (
          hint: Text(widget._key),
          value: _chosenValue,
          icon: Icon(Icons.arrow_drop_down),
          iconSize: 24,
          isExpanded: true,
          items: widget._values.map&lt;DropdownMenuItem&lt;String&gt;&gt;((String value) {
            return DropdownMenuItem&lt;String&gt;(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (String value) {
            _chosenValue = value;
            (widget._key == 'Favourite Animal' &amp;&amp; _chosenValue == 'Cat') ? cat = true : cat = false;
            setState(() {
  
            });
          },
        ),
      );
    }
  }
  
  bool cat = false; //Feels wrong to have this bool out in the open
  </code></pre>
  
  <p>The <code>filter.dart</code>-file is called from main with <code>Filter()</code>.</p>
  
  <p>Bonus question: I also want to extract the chosen values and return them to the <code>filter.dart</code>-file and use them in the <code>onPressed</code>-function in the <code>RaisedButton</code>, not quite sure how to do that.</p>