如何设置图标按钮的背景色？

Question

我想为图标按钮应用背景色，但没有看到它的显式backgroundColor属性。我想实现这一目标：

目前，我能够做到：

下面是到目前为止的代码：

@override
  Widget build(BuildContext context) {

return Scaffold(
    resizeToAvoidBottomPadding: false,
    backgroundColor: Color(0xFF13212C),
    appBar: AppBar(
      title: Text('Demo'),
    ),
    drawer: appDrawer(),
    body: new Center(
    child: new Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
 //     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Column(
        children: <Widget>[
       //   new Flexible(
    new TextField(
        style: new TextStyle(
        color: Colors.white,
      fontSize: 16.0),
      cursorColor: Colors.green,
      decoration: new InputDecoration(

        suffixIcon: new IconButton(
            icon: new Image.asset('assets/search_icon_ivory.png'),onPressed: null),

      fillColor: Colors.black,
        contentPadding: new EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0),
        filled: true,
        hintText: 'What Do You Need Help With?',
        hintStyle: new TextStyle(
          color: Colors.white
        )
    )
    )
      //    )
    ]
),

Answer 1

您可以使用半径 = 文本字段高度/2 或任何您喜欢的高度的圆形头像。

要找出文本字段规格，您可以访问material.io

所以代码块将如下所示：

CircleAvatar(
                radius: 30,
                backgroundColor: Color(0xff94d500),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    ...
                  },
                ),
              ),

这样你就会得到一个带有背景颜色的图标按钮。我希望这可以帮助你们。

Answer 2

来自Flutter官方文档：

添加填充背景

图标按钮不支持指定背景颜色或其他背景装饰，因为通常图标仅显示在父窗口小部件背景的顶部。中出现的图标按钮AppBar.actions就是一个例子。

使用小部件创建带有填充背景的图标按钮非常容易Ink。该小部件在底层材质Ink上呈现装饰，以及由后代小部件贡献的启动和突出显示 。InkResponse

Tl;dr：IconButton不支持开箱即用的背景颜色。使用此解决方法可以在单击按钮时添加背景颜色和飞溅效果：

Ink(
  decoration: ShapeDecoration(
    color: Colors.blue,
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ),
),

现场演示

这是现在官方推荐的在 IconButton 上设置背景颜色的方法，并且flutter 文档已更新以反映这一点。

Answer 3

借助最新的 flutter 和 Material-3 设计系统，这简直就是小菜一碟。

IconButton(
  onPressed: () { ... },
  icon: const Icon(Icons.search),
  style: IconButton.styleFrom(backgroundColor: Colors.redAccent),
),

Answer 4

希望，这会让您满意

Ink(
  decoration: ShapeDecoration(
     color: Colors.red,
     shape: CircleBorder(),
  ),
  child: IconButton(
    icon: Icon(Icons.delivery_dining),
    onPressed: () {
    print('pressed');
    },
  ),
),

Answer 5

你不能做到这一点与IconButton部件还没有。好消息是，您可以将其替换为FlatButton：

suffixIcon: new FlatButton(
                      color: Colors.green,
                      disabledColor: Colors.green[100],
                      child: Icon(Icons.search)),

color将在onPressed定义处理程序的情况下使用，否则将使用disabledColor背景呈现。

Answer 6

你可以用 TextButton

    TextButton(
      style: TextButton.styleFrom(
        backgroundColor: colorScheme.primary,
        shape: CircleBorder(),
      ),
      child: Icon(
        MdiIcons.send,
        color: colorScheme.onPrimary,
      ),
      onPressed: () {},
    ),

输出将如下所示：

Answer 7

您可以使用容器包装IconButton并使用color属性来实现所需的输出。以下示例可以帮助您。

 suffixIcon: Container(
              color: Colors.green,
              child: new IconButton(
                  icon: new Icon(Icons.search,color: Colors.white,),onPressed: null),
            ),

Answer 8

如果您使用的是 Material 3，Flutter 引入了IconButton.filled()构造函数，它会根据材质自动为其提供背景颜色colorScheme。它还具有调整不同图标大小的额外好处。

例子：

IconButton.filled(
    icon: const Icon(Icons.phone)
)

深色模式和浅色模式填充 IconButtons

如果您想指定颜色，请使用此答案