整个图标按钮变为灰色：颤动答案

【问题标题】：Whole Icon button becomes grey : flutter整个图标按钮变为灰色：颤动
【发布时间】：2021-09-09 19:42:00
【问题描述】：

我正在尝试在底部导航栏中的 play_icon 上应用颜色。问题是整个图标变成灰色。我想要实现的是：

我目前拥有的是这样的：

这是代码：

Material(
                    color:
                        light_mode ? Color(0xFFFFFFFF) : Color(0xFF616161),
                    child: Container(
                        alignment: Alignment.center,
                        height: 60,
                        width: MediaQuery.of(context).size.width,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.skip_previous),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: light_mode
                                        ? Color(0xFFEA80FC)
                                        : Color(0xFF6D6D6D))),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.skip_next),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.bookmark_border_outlined),
                                    onPressed: () {},
                                    color: Colors.grey)),
                            Padding(
                                padding: EdgeInsets.all(1.0),
                                child: IconButton(
                                    icon: Icon(Icons.share_rounded),
                                    onPressed: () {},
                                    color: Colors.grey)),
                          ],
                        )))

【问题讨论】：

标签： flutter colors icons iconbutton

【解决方案1】：

这个怎么样。

从您的代码中，

Padding(
  padding: EdgeInsets.only(right: 10),
  child: IconButton(
    icon: Icon(Icons.play_circle_fill_outlined, size: 45),
    onPressed: () {},
    color: light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
  ),
),

到这个。

SizedBox(
  width: 36,
  height: 36,
  child: FloatingActionButton(
    onPressed: () {},
    backgroundColor:
        light_mode ? Color(0xFFEA80FC) : Color(0xFF6D6D6D),
    child: Icon(Icons.play_arrow),
  ),
),

【讨论】：

【解决方案2】：

在您的代码中：

Padding(
                                padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: light_mode
                                        ? Color(0xFFEA80FC)
                                        : Color(0xFF6D6D6D))),

您应该为 IconButton 的父级设置颜色，而不是它本身。例如，可以使用带有装饰的容器（通过改变borderRadius可以实现圆形按钮）：

Container(
  decoration: BoxDecoration(
    color: const Colors.grey,
    border: Border.all(
      color: Colors.black,
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
padding: EdgeInsets.only(right: 10),
                                child: IconButton(
                                    icon: Icon(
                                        Icons.play_circle_fill_outlined,
                                        size: 45),
                                    onPressed: () {},
                                    color: Colors.white,
),

【讨论】：