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

c0vxltue  于 2023-01-31  发布在  Flutter
关注(0)|答案(8)|浏览(673)

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

4ngedf3f1#

我跟着导游来到这里: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),
    ),
  );
}
yrefmtwq

yrefmtwq2#

你可以做这样的事。

  • 平面按钮到文本按钮迁移 *
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

mtb9vblg

mtb9vblg3#

FlatButton已弃用,因此最佳选项是ElevatedButton
下面是代码:

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

v09wglhw4#

FlatButton也可以替换为MaterialButton

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

wwwo4jvm5#

创建可用于按钮的样式,如下所示:

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

fbcarpbf6#

TextButton代替新Flutter中的FlatButton,读取此Document

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

jgovgodb7#

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

btqmn9zl8#

这对我很有效,使用:

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

取代:

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

相关问题