Container widget overflows other widgets- Flutter - flutter

Question

This is the expected screen and the container will collapse and expand based on the text displayed and should only occupy the space left out by placing other icons.
But see the flutter implemented screen.
The icons are moved to the right on container expansion and shows overflowed pixel error.
My code
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
//container section
GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(children: const <Widget>[
Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
const Spacer(), // I just added one line
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);

Answer 1

Remove the spacer and add the dropdown in a flexible widget
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.black,
size: 34,
),
onPressed: () {},
),
Flexible(//<-------Flexible
child: GestureDetector(
child: Container(
margin: const EdgeInsets.only(left: 10, right: 10),
decoration: BoxDecoration(
color: Colors.red.shade100,
borderRadius: BorderRadius.circular(40.0)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Align(
alignment: Alignment.centerLeft,
child: Row(
children: const <Widget>[
Flexible(//<-------Flexible
child: Text(
"Content is here",
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black54,
fontSize: 19.0,
fontWeight: FontWeight.bold),
),
),
Icon(
Icons.arrow_drop_down,
color: Colors.black,
),
]),
),
),
),
onTap: () {
//todo show bottom sheet dialog here.
},
),
),
//Spacer() //<--------remove this
IconButton(
icon: Image.asset('assets/images/ic_scan.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_notification.png'),
iconSize: 20,
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/ic_search.png'),
iconSize: 20,
onPressed: () {},
),
],
),
);