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

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

使用 IconButton 小部件 yet 无法做到这一点。好消息是你可以像这样用 FlatButton 替换它：

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

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

Answer 2

您可以使用 Container 包装 IconButton 并使用颜色属性来实现所需的输出。希望下面的例子能帮到你。

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

Answer 3

您可以使用半径为 height/2 或您喜欢的任何高度的圆形头像。

要了解文本字段规范，您可以访问 material.io

所以代码块将如下所示：

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

这样你就可以得到一个带有背景颜色的图标按钮。希望对大家有所帮助。

Answer 4

如果你想让它升起，你可以像这样使用RaisedButton：

                          ConstrainedBox(
                            constraints: BoxConstraints(maxWidth: 50),
                            child: RaisedButton(
                              color: kColorLightGrey,
                              padding: EdgeInsets.symmetric(
                                vertical: 12,
                              ),
                              shape: StadiumBorder(),
                              child: Icon(Icons.refresh),
                              onPressed: () {
                              },
                            ),
                          ),

Answer 5

IconButton 不支持，RaisedButton 最近被弃用，取而代之的是 ElevatedButton，后者支持更改背景颜色和形状，但您不能轻易将其设为完美的圆。

所以要跳出框框，为什么不使用 FloatingActionButton？它们也只是小部件，因此它们可以出现在屏幕上的任何位置。例如，我在视频聊天演示应用程序中使用 FAB 来切换摄像头。

示例代码：

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

如果您对其默认大小不满意，您可以随时用 SizedBox 包裹它以根据您认为合适的方式更改宽度。

Answer 6

你可以用TextButton

实现

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

输出将如下所示：

Answer 7

希望，这会让你满意

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

Answer 8

来自官方Flutter docs:

Adding a filled background

Icon buttons don't support specifying a background color or other background decoration because typically the icon is just displayed on top of the parent widget's background. Icon buttons that appear in AppBar.actions are an example of this.

It's easy enough to create an icon button with a filled background using the Ink widget. The Ink widget renders a decoration on the underlying Material along with the splash and highlight InkResponse contributed by descendant widgets.

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

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

Live Demo

Answer 9

添加一个Material

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

Answer 10

我用了多种颜色来演示你可以随心所欲。我说您将 IconButton 放入 Material 小部件中。这也将解决您的 Splash Color（具有一定透明度的浅灰色）。

Answer 11

官方解决方案：

取决于official documentation of flutter about IconButton Class:

Adding a filled background

Icon buttons don't support specifying a background color or other background decoration because typically the icon is just displayed on top of the parent widget's background. Icon buttons that appear in [AppBar.actions] are an example of this.

It's easy enough to create an icon button with a filled background using the [Ink] widget. The [Ink] widget renders a decoration on the underlying [Material] along with the splash and highlight [InkResponse] contributed by descendant widgets.

所以代码将是这样的：

   Material(
    color: Colors.transparent,
    child: Ink(
      decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder(),
      ),
      child: IconButton(
        tooltip: "Some Text...",
        icon: Icon(Icons.flash_off),
        color: Colors.black,
        onPressed: () {},
      ),
    ),
  );

看flutter的官方示例代码，click here ...

Note: Reason to wrap it with Material widget because Ink is drawn on the underlying Material widget, if you remove it decoration will not appear.

Answer 12

带主题的 ElevatedButton。

 ElevatedButton(
  style: ButtonThemes.iconButton,
  child: Icon(
    icon,
    color: color,
  ),
  onPressed: () {},
)

static ButtonStyle get iconButton=> ButtonStyle(
  backgroundColor: MaterialStateProperty.all(
    backgroundColor,
  ),
  ...
);

Answer 13

SizedBox(
  height: 38,
  width: 38,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
    primary: Colors.grey,
    onPrimary: Colors.red,
    padding: EdgeInsets.zero,
    shape: const CircleBorder(),
  ),
  onPressed: () {},
  child: const Icon(Icons.refresh),
);

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

How to set background color for an icon button?

flutter

flutter-layout

iconbutton

Adding a filled background

Live Demo