我刚刚更新了Ffltter中的代码,使用TextButton而不是旧的FlatButton.不过,我想不出如何设置按钮的宽度和高度.

我有两个问题.第一个是我现在有了这个图标按钮:

TextButton.icon(
    label: Container(),
    style: TextButton.styleFrom(padding: EdgeInsets.all(0),
        backgroundColor: Colors.black26),
        icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
        onPressed: () {}),

which loos like this: enter image description here

我想不出怎么go 掉左右两边的垫子.虽然我确实将样式内部的填充设置为零.

我的第二个问题是我有一个像这样的按钮:

ButtonTheme(
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    height: 10,
    minWidth: 15,
    padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
    child: FlatButton(
      color: Colors.white.withOpacity(0.9),
      child: <MyChild>,
      onPressed: () {},
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
          side: BorderSide(
              color: condition
                  ? Theme.of(context).primaryColor
                  : widget.color != null
                      ? widget.color
                      : Colors.black54,
              width: 0.5)),
    ));
}

and it looked like this: enter image description here

现在我将代码更新为:

OutlinedButton(
    style: OutlinedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      side: BorderSide(
          width: 0.5,
          color: condition
              ? Theme.of(context).primaryColor
              : widget.color != null
                  ? widget.color
                  : Colors.black54),
      primary: Colors.white.withOpacity(0.9),
    ),
    child: <MyChild>,
    onPressed: () {})

But it looks like this now: enter image description here The padding on top/bottom is too much but I can't figure out how to minimize it.

有什么建议吗?非常感谢.

Edit:我try 使用OutlinedButtonTheme,但这不允许我设置高度等.

推荐答案

Ffltter TextButton是新的按钮.从Ffltter 2.0开始,FlatButton已弃用.

如何将此按钮与自定义样式一起使用的示例. 这是一个带图标的后退按钮. 它有一个宽的可压区域,并根据设计向左对齐.

对于内部填充,只需在Child属性中使用Padding小部件-它为任何字符串长度提供一致的样式.

TextButton(
  onPressed: () => Navigator.pop(context),
  style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      minimumSize: Size(50, 30),
      alignment: Alignment.centerLeft),
  child: Icon(
    CupertinoIcons.back,
    color: Colors.black,
    size: 18,
  ),
),

enter image description here

Flutter相关问答推荐

在Flutter 中压缩图片返回空

来自FirebaseAuth的错误DisplayName和邮箱在Flutter应用程序中给出错误

在Flutter 中更改扩展瓷砖的高度

如何管理枚举类型的阻塞事件?

Firebase WHERE过滤器在日期字段中不起作用

使用 Flutter 显示/隐藏带有下拉抽屉动画的小部件

如何给按钮的边框半径?

找不到任何与 com.google.firebase:firebase-sessions:[15.0.0, 16.0.0) 匹配的版本

通过在父窗口小部件功能上设置状态来浏览屏幕

Flutter Firebase 升级后出现问题? ARC 语义问题 (Xcode): Select 器appleCredentialWithIDToken:rawNonce:fullName:没有已知的类方法

如何在 Flutter 中使用 drawLine() 和 drawCircle() 绘制等距离的 4 条线

在 Flutter 中使用 HardwareKeyboard 时所有键都没有响应

type '({bool growable}) => List' 不是类型转换中类型 'List' 的子类型

扩展磁贴尾随图标在与一个磁贴交互时更新列表中的所有内容.如何只更改展开图块的图标?

Flutter - 使用 pin 进行身份验证

为什么容器会填满整个空间?

如何按键在 map 列表中搜索

更新未知文档 ID firebase\flutter 中的字段

如何从 Firebase Firestore 中获取具有特定字段值的文档?

Textfield 和 MasonryGrid 给出错误(垂直视口的高度没有限制)