容器小部件溢出其他小部件 - Flutter

Question

这是预期的屏幕，容器将根据显示的文本折叠和展开，并且应该只占用放置其他图标留下的空间。

但请参阅 flutter 实现的屏幕。 图标在容器扩展时向右移动，并显示溢出像素错误。

我的代码

  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

删除垫片并在灵活的小部件中添加下拉菜单

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: () {},
       ),
     ],
    ),
  );