Flutter: AnimatedContainer with Column child overflow warning

Question

      Container(
      color: Colors.yellow,
      child: Center(
          child: GestureDetector(
        onTap: () {
          open = !open;
          print(open);
        },
        child: AnimatedContainer(
          color: Colors.white,
          duration: Duration(seconds: 2),
          curve: Curves.easeInCubic,
          width: open ? 200 : 20,
          height: open ? 200 : 15,
          child: Container(
            width: 200,
            height: 200,
            child: Column(
              children: [
                Text('heey'),
                Text('heey'),
                Text('heey'),
              ],
           

I am trying to have the AnimatedContainer with the Column widget. How can I make it inside the AnimatedContainer? I want the Text() Widgets are under the Container and it stays that way when the AnimatedContainer expands.

Tried to achieve this by OverflowBox() but it seems not working or prob I am doing something wrong here.

Answer 1

I've modified your code, i think you want something like that:

Changes: Use expanded in column child widgets

Call open in SetState method.

         Container(
              color: Colors.yellow,
              child: Center(
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      open = !open;
                    });
                    print(open);
                  },
                  child: AnimatedContainer(
                    color: Colors.white,
                    duration: Duration(seconds: 2),
                    curve: Curves.easeInCubic,
                    width: open ? 200 : 20,
                    height: open ? 200 : 15,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Spacer(),
                        Expanded(child: Text('heey')),
                        Expanded(child: Text('heey')),
                        Expanded(child: Text('heey')),
                      ],
                    ),
                  ),
                ),
              ),
            )

Answer 2

Use Exapanded() Widget your Problem will be solved.

Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Expanded(child: Text('heey')),
                        Expanded(child: Text('heey')),
                        Expanded(child: Text('heey')),
                      ],
                    ),