Flutter FlatButton 已弃用 - 具有宽度和高度的替代解决方案

Question

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

这是我的工作 FlatButton。我如何使用 textButton 或 elevatedButton 解决它？

_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),
      ),
    );
  }

Answer 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),
    ),
  );
}

Answer 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'),
    );
  }

示例按钮

参考

迁移到新材料按钮及其主题

新按钮和按钮主题

Answer 3

FlatButton

已弃用，所以最好的选择是

ElevatedButton

.

代码如下：

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

Answer 4

FlatButton 也可以用 MaterialButton 代替

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

Answer 5

创建一个样式，您可以像这样用于按钮：

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),
  ),
);

Answer 6

TextButton

在新的 flutter 中代替

FlatButton

，阅读这个 文档.

TextButton(
           onPressed: () {/*what happened when tapped...*/},
           child: /*you can pass the widget you want to show in button, Usually use : Icon & Text*/
          ),

Answer 7

来自 flutter 文档 -

迁移指南

使用以下信息将您的按钮迁移到新的 API。

恢复原来的按钮视觉效果 在许多情况下，可以只从旧按钮类切换到新按钮类。这是假设尺寸/形状的微小变化和颜色可能更大的变化都不是问题。

为了在这些情况下保留原始按钮的外观，您可以定义尽可能接近原始按钮的样式。例如，以下样式使 TextButton 看起来像默认的 FlatButton：

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

TextButton(
  style: flatButtonStyle,
  onPressed: () { },
  child: Text('Looks like a FlatButton'),
)

Answer 8

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

Answer 9

这对我有用，使用：

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

代替：

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