Flutter中如何扩展Icon Button？使用SizedBox.expand报错求助

Hey there! Let's break down what's causing your layout issue and how to fix it.

The Root Problem #

When you tried wrapping your FlatButton.icon with SizedBox.expand, you hit an infinite width/height error because:

• SizedBox.expand forces its child to take up all available space from the parent.
• Your parent containers (inside the Row and Columns) didn't have any explicit size constraints. Without limits, the layout system can't calculate a valid size, hence the "BoxConstraints forces an infinite width and infinite height" error.

Solution 1: Add Explicit Size Constraints #

You can fix this by giving each button's parent Container a fixed width and height. This gives the layout system clear boundaries to work with:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Container(
      width: 120,
      height: 60,
      child: FlatButton.icon(
        onPressed: null,
        icon: Icon(Icons.add),
        label: Text("satu"),
        color: Colors.red,
      ),
    ),
    Column(
      children: <Widget>[
        Container(
          width: 120,
          height: 60,
          child: FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("dua"),
            color: Colors.green,
          ),
        ),
        SizedBox(height: 10),
        Container(
          width: 120,
          height: 60,
          child: FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("tiga"),
            color: Colors.yellow,
          ),
        ),
      ],
    ),
    Column(
      children: <Widget>[
        Container(
          width: 120,
          height: 60,
          child: FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("dua"),
            color: Colors.red,
          ),
        ),
        SizedBox(height: 10),
        Container(
          width: 120,
          height: 60,
          child: FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("tiga"),
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ],
)

Solution 2: Use Expanded to Distribute Space #

If you want the buttons to adapt to the screen width instead of using fixed sizes, wrap each of the Row's child components with Expanded. This will make them evenly share the available horizontal space, eliminating the infinite constraint issue:

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        child: FlatButton.icon(
          onPressed: null,
          icon: Icon(Icons.add),
          label: Text("satu"),
          color: Colors.red,
        ),
      ),
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("dua"),
            color: Colors.green,
          ),
          SizedBox(height: 10),
          FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("tiga"),
            color: Colors.yellow,
          ),
        ],
      ),
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("dua"),
            color: Colors.red,
          ),
          SizedBox(height: 10),
          FlatButton.icon(
            onPressed: null,
            icon: Icon(Icons.add),
            label: Text("tiga"),
            color: Colors.blue,
          ),
        ],
      ),
    ),
  ],
)

Quick Note on Deprecated Widgets #

Just a heads-up: FlatButton is deprecated in newer Flutter versions. For better compatibility, replace it with TextButton.icon (for flat, no-shadow buttons) or ElevatedButton.icon (for raised, shadowed buttons) — the usage is almost identical!

内容的提问来源于stack exchange，提问作者Boby