整个图标按钮变成灰色:flutter

问题描述

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

enter image description here

我目前拥有的是:

enter image description here

这是代码

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),color: light_mode
                                        ? Color(0xFFEA80FC)
                                        : Color(0xFF6D6D6D))),Padding(
                                padding: EdgeInsets.all(1.0),child: IconButton(
                                    icon: Icon(Icons.skip_next),child: IconButton(
                                    icon: Icon(
                                        Icons.bookmark_border_outlined),child: IconButton(
                                    icon: Icon(Icons.share_rounded),],)))

解决方法

在您的代码中:

if (index($0,a[i]))

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

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.only(right: 10),child: IconButton(
    icon: Icon(Icons.play_circle_fill_outlined,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),

enter image description here