title: Implementing transitions in a BottomSheet
body: <p>I'm trying to implement the following design, but I can't seem to get my head around the way I should do it :P</p>
  
  <p><img src="https://media.giphy.com/media/YBkGPyNk0SCne2o1cO/giphy.gif" alt="gif"></p>
  
  <p>I was thinking about using a <code>BottomSheet</code> displayed via the <code>showModalBottomSheet</code> function, but I can't figure out how to implement the transitions (I'd use a <code>FadeTransition</code> for the fade effect, no idea for the the height-changing effect though)</p>
  
  <p>What I got so far :</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'dart:math';
  
  class Setup extends StatefulWidget {
    final Widget child;
  
    const Setup(this.child);
  
    @override
    _SetupState createState() =&gt; _SetupState();
  }
  
  class MyCurve extends Curve {
    @override
    double transform(double t) =&gt; -pow(t, 2) + 1;
  }
  
  class _SetupState extends State&lt;Setup&gt; with SingleTickerProviderStateMixin {
    AnimationController _controller;
    Animation&lt;double&gt; opacityAnimation;
    int i = 0;
  
    @override
    void initState() {
      super.initState();
  
      _controller =
          AnimationController(vsync: this, duration: Duration(milliseconds: 500));
      opacityAnimation = CurvedAnimation(
          parent: Tween&lt;double&gt;(begin: 1, end: 0).animate(_controller),
          curve: Curves.easeInOutExpo);
    }
  
    @override
    Widget build(BuildContext context) {
      return BottomSheet(
        enableDrag: false,
        elevation: 16,
        backgroundColor: Colors.transparent,
        builder: (_) =&gt; Container(
              margin: EdgeInsets.all(8),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(16)),
              child: Material(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16)),
                  child: FadeTransition(
                    opacity: opacityAnimation,
                    child: Padding(
                        padding: EdgeInsets.all(16),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: &lt;Widget&gt;[
                            widget.child,
                            Container(
                              height: 10,
                            ),
                            RaisedButton(
                              child: Text("Next"),
                              onPressed: () {
                                _controller.forward().then((_) {
                                  _controller.reverse();
                                });
                              },
                            )
                          ],
                        )),
                  )),
            ),
        onClosing: () {},
      );
    }
  }
  </code></pre>
  
  <p>As you can see, I just got the fade animation working, and got none of the routing or height transition done.</p>