my animated Container Caused by pixel interference

Question

i have simple row contains 2 item like following

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)
          )

        ],
      )
    );
  }
}

now when i change bool value to true it animated to left side but it Caused inspect widget to some pixels on the right .. even though if i use Flexible to my second item it solve problem . but also my icon disappear

i need animated to max lef side with keep my icon visible

how can i solve this

Answer 1

On AnimatedContainer you are setting width MediaQuery.of(context).size.width on click, therefore there will be no available space for second container which width is 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),
)