flutterflutter-animationflutter-container

How do you animate to expand a container from 0 height to the height of its contents in Flutter?


I have a container that starts at zero height and needs to be expanded after a user interaction.

How do I animate expanding a widget such that it dynamically grows big enough to wrap its contents? And if this can't be done dynamically, what's a safe way to size contents such that they make sense across screen sizes? In web dev, I know things like em are sort of relative sizing, but in the context of Flutter, I don't see how to control the size of things reliably.


Update: As suggested by @pskink, wrapping the child in an Align widget and animating Align's heightFactor param accomplishes collapsing. However, I'm still having trouble getting collapse to work when the collapsing child itself has children. For example, Column widgets don't clip at all with ClipRect (see https://github.com/flutter/flutter/issues/29357), and even if I use Wrap instead of Column, that doesn't work if the Wrap's children are Rows. Not sure how to get clipping to work consistently.


Solution

  • Maybe you could also solve this with a SizeTransition?

    enter image description here

    class VariableSizeContainerExample extends StatefulWidget {
      VariableSizeContainerExample();
    
      @override
      _VariableSizeContainerExampleState createState() => _VariableSizeContainerExampleState();
    }
    
    class _VariableSizeContainerExampleState extends State<VariableSizeContainerExample> with TickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> _animation;
    
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
          duration: const Duration(seconds: 1),
          vsync: this,
        );
        _animation = CurvedAnimation(
          parent: _controller,
          curve: Curves.fastLinearToSlowEaseIn,
        );
      }
    
      _toggleContainer() {
        print(_animation.status);
        if (_animation.status != AnimationStatus.completed) {
          _controller.forward();
        } else {
          _controller.animateBack(0, duration: Duration(seconds: 1));
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: Column(
                children: [
                  TextButton(
                    onPressed: () => _toggleContainer(),
                    child: Text("Toggle container visibility"),
                  ),
                  SizeTransition(
                    sizeFactor: _animation,
                    axis: Axis.vertical,
                    child: Container(
                      child: Text(
                        "This can have variable size",
                        style: TextStyle(fontSize: 40),
                      ),
                    ),
                  ),
                  Text("This is below the above container"),
                ],
              ),
            ),
          ),
        );
      }
    }