title: How to animate bottom sheet and its content in Flutter
body: <p>I want to animate a bottom sheet (or a custom made widget) and its content in flutter. The widget should be able to snap to a starting height when items on the screen are pressed. By dragging the bottom sheet or pressing a &quot;read more&quot; button, the bottom sheet should animate its height to show more content. As this animation takes place, widgets with text, images etc should also animate to new positions (<strong>see video</strong>). The content of the bottom sheet should also be able to update if state changes without having to rerender the starting animation.</p>
  <p><a href="https://i.stack.imgur.com/yxUse.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yxUse.gif" alt="enter image description here" /></a></p>
  <p>I am happy if anyone has any suggestions on where to start and what to do :)</p>
  <p><strong>EDIT</strong></p>
  <p>I watched the video suggested by pskink and found an <a href="https://fidev.io/tickets-advanced-transitions/" rel="nofollow noreferrer">article</a> showing how to build such a design I had in mind. By using an <code>AnimatedBuilder</code> and an <code>AnimationController</code> I could update the width, height and so on of the widgets, based on how far the animation had animated. See part of the code below:</p>
  <pre class="lang-dart prettyprint-override"><code>   ...
  
      double get imageWidth =&gt; lerp(imageStartWidth,maxWidthInsideSheet);    
      
      double lerp(double min, double max) =&gt; lerpDouble(min, max, _controller.value)!;
  
     ...
  
      @override
      Widget build(BuildContext context) {
        return AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Positioned(
              height: lerp(minHeight, maxHeight),
              left: 0,
              right: 0,
              bottom: 0,
              child: GestureDetector(
                onVerticalDragUpdate: _handleDragUpdate,
                onVerticalDragEnd: _handleDragEnd,
                child: Stack(
                  children: [
                    CustomImage(
                      width: imageWidth,
                      ... (more properties), 
                      ...,
                    ),
                    ...,
                    ...
                  ],
                ),
              ),
            );
          },
        );
      }
      
     ...
  </code></pre>
  <p><strong>This is the result</strong></p>
  <p><a href="https://i.stack.imgur.com/KGjEn.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KGjEn.gif" alt="enter image description here" /></a></p>
  <p>The animation of the widgets inside the custom bottom sheet works perfectly! However, I am not sure how I would animate the custom bottom sheet in the beginning so it doesn't just pop up, but rather slide up as the flutter <code>ModalButtomSheet</code> does. The other problem comes when I want to close the bottom sheet by pressing the 'close' button. At the moment, I am calling a function which gets passed from the parent widget which stops rendering this custom bottom sheet. This of course makes the widget disappear. <strong>How would I</strong> implement it, such that the custom bottom sheet can slide up when first rendering and slide down before it stops rendering?</p>
  <p>Any help will be appreciated!</p>