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

- Moo

---

这个回答解决了你的问题吗？RaisedButton vs ElevatedButton，FlatButton vs TextButton和OutlineButton vs OutlinedButton - iDecode

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

- Patrick O'Hara

Answer 2

你可以像这样做。

扁平按钮转换为文本按钮

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

示例按钮

参考文献

迁移到新的Material按钮及其主题

新的按钮和按钮主题

- hbamithkumara

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

- Vishal_VE

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

- Sanka Werapitiya

Answer 5

在Flutter的新版本中，使用TextButton代替FlatButton。它们看起来一样。如需更多信息，请阅读文档。

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

- Majid Ebrahimi

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

Answer 6

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

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

- A v o c a d o

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

- 0xShakhawat

Answer 8

可定制的扁平按钮小部件。

xflat_button.dart

import 'package:flutter/material.dart';

class XFlatButton extends StatelessWidget {
  final String text;
  final void Function()? onPressed;
  final double width;
  final double height;
  final IconData? iconData;
  final Color bgColor;
   final Color fgColor;

  const XFlatButton(
      {required this.text,
      this.onPressed,
      this.width = 200,
      this.height = 40,
      super.key,
      this.iconData,
      this.bgColor = Colors.blue,
      this.fgColor = Colors.white});
  @override
  Widget build(BuildContext context) {
    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
      ),
      backgroundColor: bgColor,
      foregroundColor: fgColor
    );
    return SizedBox(
      width: width,
      height: height,
      child: TextButton(
          onPressed: onPressed,
          style: flatButtonStyle,
          //child: Text(text),
          child: iconData == null
              ? Text(text, style: TextStyle(color: fgColor),)
              : Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Icon(iconData, color: fgColor,),
                  SizedBox(
                    width: 10,
                  ),
                  Text(text, style: TextStyle(color: fgColor),),
                ])),
    );
  }
}

像这样调用：

XFlatButton(
            text: 'Восстановить тему по умолчанию',
            width: 350,
            iconData: Icons.restore,
            bgColor: Theme.of(context).colorScheme.primary, 
            fgColor: Theme.of(context).colorScheme.onPrimary,
            onPressed: (){
              ref.read(themeProvider.notifier).setState(defaultTheme);
            },
          ),

- yurin

Answer 9

这对我有用，使用：

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

不是：

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

- Umair Sultan

---

ElevatedButton不同于FlatButton因为它具有高程属性！ - Delicia Fernandes

Answer 10

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

- elrick edward

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - lepsch