Flutter 用逻辑从数组中提取颜色

我有我的网站上的颜色像第N个孩子

.categories-item:nth-child(8n):before, .categories-item:nth-child(8n + 2):before {
  background-color: rgba(255, 173, 49, 0.26);
}

.categories-item:nth-child(8n + 3):before, .categories-item:nth-child(8n + 5):before {
  background-color: rgba(46, 209, 180, 0.26);
}

.categories-item:nth-child(8n + 4):before, .categories-item:nth-child(8n + 6):before {
  background-color: rgba(0, 198, 255, 0.26);
}

在我的dart中，我实现了以下功能：

var colorList = [Color.fromRGBO(0, 87, 255, 0.26), Color.fromRGBO(255, 173, 49, 0.26), Color.fromRGBO(46, 209, 180, 0.26), Color.fromRGBO(0, 198, 255, 0.26)];
GridView.count(
    crossAxisCount: 2,
    shrinkWrap: true,
    physics: ScrollPhysics(),
    childAspectRatio: 0.85,
    scrollDirection: Axis.vertical,
    children: List.generate(15, (index) {
        return GestureDetector(
            onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => CategoryRoute()), );
            },
            child: Container(
                margin: EdgeInsets.all(15.0),
                child: Stack(
                    children: < Widget > [
                        Container(
                            margin: EdgeInsets.only(top: 50),
                            alignment: Alignment.center,
                            padding: EdgeInsets.only(top: 35),
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(30),
                                color: Colors.white,
                                boxShadow: [
                                    BoxShadow(color: Colors.black.withOpacity(0.05), offset: Offset(0, 3), blurRadius: 7),
                                ],
                            ),
                            child: Container(
                                padding: EdgeInsets.symmetric(horizontal: 10),
                                child: Text(
                                    categoryName[index % categoryName.length],
                                    textAlign: TextAlign.center,
                                    overflow: TextOverflow.clip,
                                    style: TextStyle(
                                        color: const Color(0xFF71768D),
                                            fontSize: 18,
                                            fontFamily: 'Montserrat',
                                            fontWeight: FontWeight.w600,
                                    ),
                                ),
                            )
                        ),
                        Positioned(
                            top: 0,
                            left: 0.0,
                            right: 0.0,
                            child: MaterialButton(
                                onPressed: null,
                                textColor: Colors.white,
                                disabledColor: colorList[index % colorList.length],
                                child: SvgPicture.asset(
                                    iconList[index % iconList.length],
                                    width: 40,
                                    height: 40,
                                ),
                                padding: EdgeInsets.all(30),
                                shape: CircleBorder(),
                            )
                        ),
                        Positioned(
                            top: 0,
                            left: 0.0,
                            right: 0.0,
                            child: MaterialButton(
                                onPressed: null,
                                textColor: Colors.white,
                                disabledColor: Colors.white.withOpacity(0.1),
                                child: SvgPicture.asset(
                                    iconList[index % iconList.length],
                                    width: 40,
                                    height: 40,
                                ),
                                padding: EdgeInsets.all(30),
                                shape: CircleBorder(),
                            )
                        )
                    ]
                )
            )
        );
    })
)

var colorList=[Color.fromRGBO（0,87,255,0.26），Color.fromRGBO（255,173,49,0.26），Color.fromRGBO（46,209,180,0.26），Color.fromRGBO（0,198,255,0.26）]；
GridView.count(
交叉轴计数：2，
收缩膜：对，
物理：物理（），
儿童比例：0.85，
滚动方向：轴垂直，
子项：列表。生成（15，（索引）{
返回手势检测器(
onTap:（）{
push（context，MaterialPageRoute（builder:（context）=>CategoryRoute（），）；
},
子：容器(
边距：所有边缘集（15.0），
子：堆栈(
子项：[
容器(
页边距：仅限边缘集（顶部：50），
对齐：对齐.center，
填充：仅限边缘组（顶部：35），
装饰：盒子装饰(
边界半径：边界半径。圆形（30），
颜色：颜色，白色，
boxShadow：[
BoxShadow（颜色：彩色。黑色。不透明度为0.05），偏移量：偏移量（0,3），模糊半径：7），
],
),
子：容器(
填充：边缘组。对称（水平：10），
子：文本(
categoryName[索引%categoryName.length]，
textAlign:textAlign.center，
溢出：TextOverflow.clip，
样式：TextStyle(
颜色：常量颜色（0xFF71768D），
尺码：18，
fontFamily：“蒙特塞拉特”，
fontWeight:fontWeight.w600，
),
),
)
),
定位(
排名：0，
左：0.0，
右：0.0，
子：材质按钮(
onPressed:null，
textColor:Colors.white，
disabledColor:colorList[索引%colorList.length]，
子项：SvgPicture.asset(
iconList[索引%iconList.length]，
宽度：40，
身高：40，
),
填充：所有（30），
形状：CircleBorder（），
)
),
定位(
排名：0，
左：0.0，
右：0.0，
子：材质按钮(
onPressed:null，
textColor:Colors.white，
禁用颜色：颜色。白色。不透明度（0.1），
子项：SvgPicture.asset(
iconList[索引%iconList.length]，
宽度：40，
身高：40，
),
填充：所有（30），
形状：CircleBorder（），
)
)
]
)
)
);
})
)

我给出了如下颜色列表[index%colorList.length]，它设置了4种颜色并从一开始就运行数组，但现在我需要像css一样显示颜色，就像每个第n个子元素一样。是否可以在我的站点上实现相同的逻辑？ 屏幕上的可视示例：

如果（索引%8==0 | |索引%8==2）但工作不正确，则尝试这样做