容器小部件溢出其他小部件 - 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: () {},
       ),
     ],
    ),
  );