Flutter: How to make a custom animated Drop Down Menu?

Question

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.

Here is my code so far by the way:

class ModelsDropdown extends StatefulWidget {
  final List<Phone> phones;

  ModelsDropdown({@required this.phones});

  @override
  _ModelsDropdownState createState() => _ModelsDropdownState();
}

class _ModelsDropdownState extends State<ModelsDropdown> {
  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()
        ],
      ),
    );
  }
}

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.

Answer 1

I Think you should Change The Below Container with an AnimatedCrossFade. Animated Cross Fade Has Two Child First and Second... https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html

Dont set Height for Your Child... its Works Perfectly...

AnimatedCrossFade(
 duration: const Duration(seconds: 3),
 firstChild: Container(),  // When you don't want to show menu.. 
 secondChild: menu,
 crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

with this method you don't need Animated Container at top... remove that.(return Column)... with Animated cross Fade You don't need to Know The Height of widget and its for works dynamic Heights

-------------- if You Want to use Your Code and Use Fixed Height ----------------

width: _droppedDown ? YourWidth : 32.0,
height: _droppedDown ? 300 : 32.0,