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

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

score 48 · Accepted Answer

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

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

所以代码块将如下所示：

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

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

score 40 · Accepted Answer

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

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

score 13 · Accepted Answer

你可以用TextButton

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

输出将如下所示：

score 7 · Accepted Answer

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

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

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

score 5 · Accepted Answer

希望，这会让你满意

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

score 4 · Accepted Answer

来自官方Flutter 文档：

添加填充背景

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

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

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

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

现场演示

score 3 · Accepted Answer

IconButton不支持，RaisedButton最近被弃用ElevatedButton，支持改变背景颜色和形状，但你不能轻易使它成为一个完美的圆形。

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

示例代码：

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

如果你对它的默认尺寸不满意，你可以随时用 a 包裹它SizedBox来改变你认为合适的宽度。

score 1 · Accepted Answer

I've used multiple colors to demonstrate You can do as you want. And I say that You put your IconButton into Material widget. This will also solve your Splash Color (which is slightly grey color with some transparency) . and

score 1 · Accepted Answer

Official solution:

Depends on 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.

使用 [Ink] 小部件创建具有填充背景的图标按钮非常简单。[Ink] 小部件在底层 [Material] 上呈现装饰以及由后代小部件贡献的飞溅和突出显示 [InkResponse]。

所以代码将是这样的：

   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的官方示例代码，点击这里...

注意：用Material小部件包装它的原因是因为它Ink是在底层小部件上绘制的Material，如果你删除它，装饰将不会出现。

score 0 · Accepted Answer

如果你想提高它，你可以像这样使用 RaisedButton：

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

score 0 · Accepted Answer

Add a Material

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

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

11 回答 11

添加填充背景

现场演示

Related

Reference