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

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

- Darshan

Answer 1

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

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

因此，代码块将如下所示：

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

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

- FJCG

Answer 2

您可以将IconButton包装在Container中，并使用color属性来实现所需的输出。以下示例可能对您有帮助。

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

- Viren V Varasadiya

---

使用这个实现，当 onPressed 不为 null 时，你会得到一个有点奇怪的动画，但仍然可以工作。 - olexa.le

Flutter有很多图标，使用外部图标之前，尽量先找到你想要的图标。 - dmarquina

当使用普通容器时，您也无法获得所有内置的Flutter墨水/溅射效果。请查看Flutter文档中的IconButton，它已经更新，包括如何使用"Ink"小部件设置背景颜色并保留这些漂亮细节的示例。 - James Allen

詹姆斯·艾伦的评论是最佳答案！ - Ashkan Sarlak

Answer 3

来自官方 Flutter 文档:

添加填充背景

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

使用 Ink 小部件很容易创建具有填充背景的图标按钮。 Ink 小部件会在底层 Material 上呈现装饰，以及由后代小部件贡献的泼溅和高亮 InkResponse。

Tl;dr: IconButton 不直接支持设置背景颜色。使用这种方法来添加背景颜色和点击按钮时的泼溅效果：

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

现场演示

这是在 IconButton 上设置背景颜色的官方推荐方式，而且Flutter 文档已经更新以反映这一点。

- NearHuscarl

---

现在，这是在IconButton上设置背景颜色的官方推荐方式，并且Flutter文档已经更新以反映这一点。这应该是最佳答案。 - James Allen

这适用于蓝色 - 但如果我将颜色更改为白色，这正是我所需要的，那么它就什么也不做了。 - kris

当我在堆栈内使用此解决方案时，背景颜色不会显示出来，你认为问题出在哪里？ - Duck Programmer

@DuckProgrammer 我也是。你找到解决方案了吗？我现在必须使用CircleAvatar。 - BeniaminoBaggins

Answer 4

你可以使用TextButton实现它。

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

输出将类似于：

- ulusoyca

---

最佳解决方案。 - Aldy Yuan

Answer 5

搭配最新的Flutter和Material-3设计系统，这只是小菜一碟。

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

- Satyajyoti Biswas

---

我尝试过这个，但是它没有任何影响。 - DaniyalAhmadSE

还要在MaterialApp的theme中设置useMaterial3: true。 - Satyajyoti Biswas

这应该是Flutter当前版本的最佳答案。 - Chris

Answer 6

希望这能满足您的需求。

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

- Mukta

---

这是我认为最好的解决方案。 - Taufik Nur Rahmanda

Answer 7

目前还无法使用IconButton小部件实现此功能。好消息是，您可以使用以下方式将其替换为FlatButton：

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

如果定义了onPressed处理程序，则将使用color，否则将使用disabledColor背景呈现。

- olexa.le

Answer 8

IconButton 不支持该功能，RaisedButton 最近已被弃用，建议使用 ElevatedButton 替代，它支持更改背景颜色以及形状，但您无法轻松地将其变成完美的圆形。

所以为了有新意，为什么不使用 FloatingActionButton 呢？它们也只是小部件，因此可以出现在屏幕任何位置。例如，我在视频聊天演示应用中使用FAB来切换相机。

示例代码：

FloatingActionButton(
  child: Icon(
    Icons.flip_camera_ios_outlined,
    color: Colors.white,
  ),
  onPressed: () {
    // do your thing here
  },
)

如果你不满意默认大小，你可以用SizedBox包裹它，以便按照你的需求调整宽度。

- WSBT

---

请记住，FloatingActionButton 本质上具有 Hero-Animations，在导航时可能会产生不良影响。 - Marwin Lebensky

Answer 9

添加一个材料。

Material(
color:Colors.green
child:IconButton(
    icon: Icon(Icons.add),
    color: Colors.white,
    onPressed: () {},
  ));

- Dean Villamia

Answer 10

你可以使用GestureDetector和容器来解决这个问题。我喜欢使用这种解决方案，因为它提供了各种控件的组合。

此外，如果您想在不同设备上实现更多交互事件，GestureDetector也会打开更多的可能性。

GestureDetector(
      onTap: () {},
      child: ClipOval(
        child: Container(
          //add extra margin to visual center icon if icon isn't balanced
          color: backgroundColor,
          width: size,
          height: size,
          child: Icon(
            Icons.question_mark_sharp,
            size: size * 0.6, //size to your preference
            color: iconColor,
          ),
        ),
      ),
    );

或者你可以从另一个问题中进行操作圆形图标按钮

RawMaterialButton(
  onPressed: () {},
  elevation: 2.0,
  fillColor: Colors.white,
  child: Icon(
    Icons.pause,
    size: 35.0,
  ),
  padding: EdgeInsets.all(15.0),
  shape: CircleBorder(),
)

- Aaron Kennedy