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

您无法使用{ "size":0, "query":{ "bool":{ "must":[ { "terms":{ "month":[ "oct", "nov", "dec" ] } } ] } }, "aggs":{ "byProductId":{ "terms":{ "field":"productId", "size":1000 }, "aggs":{ "maxSales":{ "max":{ "field":"sales" } } } }, "count":{ "cardinality":{ "field":"productId" } } } }小部件yet执行此操作。好消息是，您可以像这样用IconButton替换它：

FlatButton

suffixIcon: new FlatButton( color: Colors.green, disabledColor: Colors.green[100], child: Icon(Icons.search)),将在定义color处理程序的情况下使用，否则将以onPressed背景呈现。

Answer 3

您可以将Container的IconButton包裹起来，并使用color属性来实现所需的输出。以下示例可以帮助您。

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

Answer 4

IconButton不支持，RaisedButton最近被弃用，而支持ElevatedButton，后者支持更改背景颜色和形状，但是您不能轻易地使其成为一个完美的圆圈

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

示例代码：

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

如果您对默认大小不满意，可以随时用SizedBox包裹它以更改宽度，只要您认为合适即可。

Answer 5

来自官方Flutter docs：

<块引用>

添加填充背景

图标按钮不支持指定背景颜色或其他背景装饰，因为通常图标仅显示在父小部件背景的顶部。图标 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: () {},
  ),
),

Live Demo

Answer 6

添加材质

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

Answer 7

如果您希望将其升高，则可以像这样使用RaisedButton：

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

Answer 8

您可以使用TextButton

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

输出将如下所示：

Answer 9

希望，这会让您满意

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

Answer 10

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

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

10 个答案:

添加填充背景

Live Demo