为什么我的行按钮在颤动时溢出屏幕？

Question

为什么我的行按钮在抖动时从屏幕上溢出？

 List<Widget> buildButtonsRow() {
    List<Widget> buttons = [];
    for (int index = 0; index < widget.buttonLables.length; index++) {
      var button = FlatButton(
        child: Text(
          widget.buttonLables[index],
          style: TextStyle(
            color: selectedLables.contains(widget.buttonValuesList[index])
              ? Colors.white
              : Theme.of(context).textTheme.body1.color,
            fontSize: 10,
          ),
        ),
        color: selectedLables.contains(widget.buttonValuesList[index])
          ? widget.selectedColor
          : widget.buttonColor,
        shape: new CircleBorder(
          side: BorderSide(color: Theme.of(context).buttonColor)
        ),
        onPressed: () {
          if (selectedLables.contains(widget.buttonValuesList[index])) {
            selectedLables.remove(widget.buttonValuesList[index]);
          } else {
            selectedLables.add(widget.buttonValuesList[index]);
          }
          setState(() {});
          widget.checkBoxButtonValues(selectedLables);
        },
      );

      buttons.add(button);
    }
    // buttons.add(Spacer(flex: 2));
    return buttons;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: buildButtonsRow(),
      );
  }

Answer 1

通过将Expanded环绕FlatButton来解决。

List<Widget> buildButtonsRow() {
    List<Widget> buttons = [];
    for (int index = 0; index < widget.buttonLables.length; index++) {
      var button = Expanded( 
        child: FlatButton(
        child: Text(
          widget.buttonLables[index],
          style: TextStyle(
            color: selectedLables.contains(widget.buttonValuesList[index])
              ? Colors.white
              : Theme.of(context).textTheme.body1.color,
            fontSize: 10,
          ),
        ),
        color: selectedLables.contains(widget.buttonValuesList[index])
          ? widget.selectedColor
          : widget.buttonColor,
        shape: new CircleBorder(
          side: BorderSide(color: Theme.of(context).buttonColor)
        ),
        // elevation: widget.elevation,
        onPressed: () {
          if (selectedLables.contains(widget.buttonValuesList[index])) {
            selectedLables.remove(widget.buttonValuesList[index]);
          } else {
            selectedLables.add(widget.buttonValuesList[index]);
          }
          setState(() {});
          widget.checkBoxButtonValues(selectedLables);
        },
      )
      );
      buttons.add(button);
    }
    // buttons.add(Spacer(flex: 2));
    return buttons;
  }