my animated Container Caused by pixel interference - flutter

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