Implementing transitions in a BottomSheet

Why complicate things when you can achieve the same using AnimatedContainer and AnimateCrossFade.

Just for your information

    class BS extends StatefulWidget {      _BS createState() => _BS();    }    class _BS extends State<BS> {      bool _showSecond = false;      @override      Widget build(BuildContext context) {        return BottomSheet(          onClosing: () {},          builder: (BuildContext context) => AnimatedContainer(            margin: EdgeInsets.all(20),            decoration: BoxDecoration(                color: Colors.white, borderRadius: BorderRadius.circular(30)),            child: AnimatedCrossFade(                firstChild: Container(                  constraints: BoxConstraints.expand(                      height: MediaQuery.of(context).size.height - 200),//remove constraint and add your widget hierarchy as a child for first view                  padding: EdgeInsets.all(20),                  child: Align(                    alignment: Alignment.bottomCenter,                    child: RaisedButton(                      onPressed: () => setState(() => _showSecond = true),                      padding: EdgeInsets.all(15),                      shape: RoundedRectangleBorder(                          borderRadius: BorderRadius.circular(10)),                      child: Row(                        mainAxisAlignment: MainAxisAlignment.center,                        children: <Widget>[                          Text("Suivant"),                        ],                      ),                    ),                  ),                ),                secondChild: Container(                  constraints: BoxConstraints.expand(                      height: MediaQuery.of(context).size.height / 3),//remove constraint and add your widget hierarchy as a child for second view                  padding: EdgeInsets.all(20),                  child: Align(                    alignment: Alignment.bottomCenter,                    child: RaisedButton(                      onPressed: () => setState(() => _showSecond = false),                      color: Colors.green,                      padding: EdgeInsets.all(15),                      shape: RoundedRectangleBorder(                          borderRadius: BorderRadius.circular(10)),                      child: Row(                        mainAxisAlignment: MainAxisAlignment.center,                        children: <Widget>[                          Text("ok"),                        ],                      ),                    ),                  ),                ),                crossFadeState: _showSecond                    ? CrossFadeState.showSecond                    : CrossFadeState.showFirst,                duration: Duration(milliseconds: 400)),            duration: Duration(milliseconds: 400),          ),        );      }    }

Since the BottomNavigationSheet's height is based on the height of it's content, you could easily animate it.

Use to Container inside the BottomSheet an give it the height it needs. The height itself can be animated by creating an AnimationController with begin and end set to values you want the height be and set the state. Then just start the animation with the opacity-animation.

containerHeight = CurvedAnimation(    parent: Tween<double>(begin: 350, end: 200).animate(_controller)..addListener(() {setState(() {});});,    curve: Curves.easeInOutExpo);

This should do the work.