title: Flutter: How to make a custom animated Drop Down Menu?
body: <p>I'm trying to make a custom drop-down menu in Flutter that is just a simple button that on tap shows a scrollable row of products. I've attached some images that better show what I'm referring to. I tried to use an IconButton and an AnimatedContainer but I can't seem to get it working. I was hoping someone would have a better idea on how to do something like this.<a href="https://i.stack.imgur.com/Iazlp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iazlp.jpg" alt="enter image description here" /></a></p>
  <p>Here is my code so far by the way:</p>
  <pre><code>class ModelsDropdown extends StatefulWidget {
    final List&lt;Phone&gt; phones;
  
    ModelsDropdown({@required this.phones});
  
    @override
    _ModelsDropdownState createState() =&gt; _ModelsDropdownState();
  }
  
  class _ModelsDropdownState extends State&lt;ModelsDropdown&gt; {
    bool _droppedDown;
  
    @override
    void initState() {
      _droppedDown = false;
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return AnimatedContainer(
        duration: Duration(milliseconds: 300),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.0),
          border: Border.all(width: 2.0)
        ),
        width: 32.0,
        height: 32.0,
        child: Column(
          children: [
            IconButton(
                padding: const EdgeInsets.only(right: 0.0),
                icon: Icon(
                    _droppedDown ? Icons.expand_more : Icons.expand_less
                ),
                color: Colors.black,
                onPressed: () {
                  setState(() {
                    _droppedDown = !_droppedDown;
                  });
                }
            ),
            _droppedDown ?
            Container(
              width: MediaQuery.of(context).size.width,
              height: 300.0,
              color: Colors.orangeAccent,
            ) :
            SizedBox.shrink()
          ],
        ),
      );
    }
  }
  </code></pre>
  <p>With the container at the bottom, it doesn't even work. I get an overflow error. Any help is very much appreciated. Thanks a lot, everyone.</p>