不推荐使用 Flutter FlatButton - 具有宽度和高度的替代解决方案答案

【问题标题】：Flutter FlatButton is deprecated - alternative solution with width and height不推荐使用 Flutter FlatButton - 具有宽度和高度的替代解决方案
【发布时间】：2021-03-25 18:25:35
【问题描述】：

Flutter 升级后“FlatButton”被弃用，我必须改用 TextButton。我没有找到具有宽度和高度的新按钮类型的解决方案。

这是我工作的 FlatButton。如何使用 textButton 或提升按钮解决？

_buttonPreview(double _height, double _width) {
    return FlatButton(
      onPressed: () {  },
      height: _height,
      minWidth: _width,
      color: Colors.grey,
      padding: EdgeInsets.all(0),
      child: Text(
        "some text",
        style: TextStyle(color: Colors.white),
      ),
    );
  }

【问题讨论】：

这能回答你的问题吗？ RaisedButton vs ElevatedButton, FlatButton vs TextButton and OutlineButton vs OutlinedButton

标签： flutter deprecated flatbutton

【解决方案1】：

我按照这里的指南进行操作：https://flutter.dev/docs/release/breaking-changes/buttons。

_buttonPreview(double _height, double _width) {
  final ButtonStyle flatButtonStyle = TextButton.styleFrom(
    minimumSize: Size(_width, _height),
    backgroundColor: Colors.grey,
    padding: EdgeInsets.all(0),
  );
  return TextButton(
    style: flatButtonStyle,
    onPressed: () {},
    child: Text(
      "some text",
      style: TextStyle(color: Colors.white),
    ),
  );
}

【讨论】：

【解决方案2】：

你可以这样做。

FlatButton 到 TextButton 的迁移

    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      primary: Colors.white,
      minimumSize: Size(88, 44),
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(2.0)),
      ),
      backgroundColor: Colors.blue,
    );

    return TextButton(
      style: flatButtonStyle,
      onPressed: () {
        print('Button pressed');
      },
      child: Text('FlatButton To TextButton Migration'),
    );
  }

示例按钮

参考

Migrating to the New Material Buttons and their Themes

New Buttons and Button Themes

【讨论】：

【解决方案3】：

为按钮创建一个样式，如下所示：

final ButtonStyle flatButtonStyle = TextButton.styleFrom(
backgroundColor: Colors.blue,
padding: EdgeInsets.all(8),
//few more styles

);

然后在替换你的flatButton时使用上面的样式

return TextButton(
style: flatButtonStyle,
onPressed: () {},
child: Text(
  "some text",
  style: TextStyle(color: Colors.white),
),);

【讨论】：

【解决方案4】：

FlatButton 已弃用，因此最好的选择是 ElevatedButton()。代码如下：

ElevatedButton(
        style: ElevatedButton.styleFrom(
          primary: Colors.teal,
          fixedSize: Size.fromWidth(100),
          padding: EdgeInsets.all(10)
        ),
        child: Text("Press Here"),
        onPressed: (){
          //Code Here
        },
      )

【讨论】：

【解决方案5】：

这对我有用，使用：

ElevatedButton(
  onPressed: () {},
  child: Text('Simple FlatButton'),
)

代替：

FlatButton(
  onPressed: () {},
  child: Text('Simple FlatButton'),
)

【讨论】：

ElevatedButton 不是平面按钮，因为它具有高度属性！