flutter - 小部件在我的屏幕右侧溢出（RenderFlex 错误）

Question

我似乎无法修复此错误以挽救我的生命。我尝试过使用 Expanded、Flexible、从父小部件提供大小限制等。请救救我。

错误信息：

“有问题的具体 RenderFlex 是：RenderFlex#d88fa relayoutBoundary=up5 OVERFLOWING: 需要合成创建者：Row ← IntrinsicHeight ← _InputPadding ← ToggleButtons ← ToggleSort ← Container ← Column ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#950e0] ← Semantics ← Listener ⋯ parentData: (可以使用大小) 约束: BoxConstraints(0.0<=w<=55.0, h=37.0) size: Size(55.0, 37.0) direction: 水平 mainAxisAlignment: 开始 mainAxisSize: min crossAxisAlignment: 拉伸 textDirection: ltr verticalDirection: down "

“抛出了另一个异常：RenderFlex 在右侧溢出了 293 个像素。”

此函数构建了混乱的 UI 部分

Column sorters() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        ... more code ...
        Container(
          child: ToggleSort(),
        )
      ],
    );
  }

这是使用它的地方

Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Hero(
          tag: widget._heroFilterTag,
          child: Material(
            color: Colors.white,
            elevation: 2,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(16),
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  bottom: 15.0, left: 15.0, right: 15.0, top: 5.0),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    header(),
                    categories(),
                    sorters(),
                    ]
                    ... more code ...

切换按钮类（有状态小部件）

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      isSelected: isSelected,
      constraints: BoxConstraints(minHeight: 35),
      fillColor: Colors.grey.shade300,
      splashColor: Colors.white,
      renderBorder: true,
      children: <Widget>[
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.access_time_filled_outlined,
                color: Colors.grey.shade700,
              ),
              Text(
                "Date & Time",
                style: TextStyle(
                  color: Colors.grey.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.location_on_outlined,
                color: Colors.blue.shade700,
              ),
              Text(
                "Proximity",
                style: TextStyle(
                  color: Colors.blue.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
        Container(
          width: 106,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Icon(
                Icons.attach_money_rounded,
                color: Colors.green.shade700,
              ),
              Text(
                "Cost",
                style: TextStyle(
                  color: Colors.green.shade900,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ],
     ... more code ...

这就是我想要实现的