Animated Container does not animate when changing flex value of parent widget "Expanded"

Question

bool left = true;

Row(
children: [
Expanded(
flex: left? 1: 0,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
color: Colors.red,
child: Text('Left Box'),
),
),
Expanded(
flex: left? 0: 1,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
color: Colors.green,
child: Text('Left Box'),
),
),
]),

The above code sample is what I am dealing with. I cannot animate the container by using the width parameter since I want it to take the whole space when the left container is selected for example. Using MediaQuery or constant values did not work as intended. Is there a way to force the container to animate from the expanded flex condition?

score 0 · Answer 1 · answered Jun 01 '22 at 21:59

You have to keep everything you want to animate in AnimatedContainer.

for example:

Row(
    children: [
      AnimatedContainer(
        width: !left ? MediaQuery.of(context).size.width : 0,
        height: 500,
        color: Colors.red,
        duration: const Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
        child: const FlutterLogo(size: 75),
      ),
        AnimatedContainer(
        width: left ? MediaQuery.of(context).size.width : 0,
        height: 500,
        color: Colors.white,
        duration: const Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
        child: const FlutterLogo(size: 75),
      ),
    ],
  ),

and the function you need to use is:

onPressed: (){
      setState(() {
        left = !left;
      });
    }

result:

This link might be helpful for you.

But I want the container to take the size of the child and using mediaquery does not achieve the desired effect. When flex is 0, expanded no longer works and the container takes the size of its child. In your case, the behavior is not what I want — Salah eddine Naoushi, Jun 02 '22 at 10:25
Oh, I got it. Are you looking for something like this: https://stackoverflow.com/a/54814138/12216762 ? — Eray, Jun 02 '22 at 14:06

Animated Container does not animate when changing flex value of parent widget "Expanded"

1 Answers1