mon conteneur animé Causé par l'interférence des pixels

Question

J'ai une ligne simple contenant 2 éléments comme suit

class Test2 extends StatefulWidget {
  const Test2({Key? key}) : super(key: key);

  @override
  State<Test2> createState() => Test2State();
}

class Test2State extends State<Test2> {

 bool selected = false ;
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      bottomNavigationBar: FloatingActionButton(
        child: Icon(Icons.done),
        onPressed: () {
          setState(() {
            selected = !selected;
          });
        },
      ),
      backgroundColor: Colors.blue,
      appBar: AppBar(),
      body:
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          AnimatedContainer(
              duration: Duration(milliseconds: 500),
              color: Colors.yellowAccent,
              width:  !selected? 50:MediaQuery.of(context).size.width,
              height:50
          ),

          Container(
              width:50,
              child:Icon(Icons.star)
          )

        ],
      )
    );
  }
}

Maintenant quand je change la valeur de bool à true il s'anime vers la gauche mais cela cause l'inspection du widget à quelques pixels sur la droite même si j'utilise Flexible pour mon deuxième item cela résout le problème mais aussi mon icône disparaît.

J'ai besoin d'une animation au maximum à gauche tout en gardant mon icône visible.

Comment puis-je résoudre ce problème ?

Answer 1

Sur AnimatedContainer vous définissez la largeur MediaQuery.of(context).size.width au moment du clic, il n'y aura donc pas d'espace disponible pour le second conteneur dont la largeur est 50 .

AnimatedContainer(
    duration: Duration(milliseconds: 500),
    color: Colors.yellowAccent,
    width: !selected ? 50 : MediaQuery.of(context).size.width - 50, // -50 space for second container
    height: 50),
Container(
  width: 50,
  child: Icon(Icons.star),
)