Home Articles

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

Asked
Viewed 1401 times
0

我想为图标按钮应用背景颜色,但我没有看到明确的 backgroundColor 属性 . 我想实现这个目标:

enter image description here

目前我能够实现到这里:

enter image description here

以下是目前的代码:

@override小部件构建(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
        )
    )
    )
      //    )
    ]
),

2 Answers

  • 2

    你不能用 IconButton widget yet做到这一点 . 好消息是你可以用 FlatButton 代替它:

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

    color 将用于定义 onPressed 处理程序的情况,否则将使用 disabledColor 背景呈现 .

  • 1

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

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

Related