为 Wrap 小部件内的每个芯片颤动不同的颜色答案

【问题标题】：Flutter Different Color for each Chip inside a Wrap Widget为 Wrap 小部件内的每个芯片颤动不同的颜色
【发布时间】：2022-10-18 14:13:47
【问题描述】：

我在一个包装小部件中有 4 个筹码，筹码的数量基于答案长度，所以 4 个筹码，因为那是答案的长度，所以我需要而不是创建筹码并为每个筹码提供背景颜色，我想在不创建颜色的情况下给出颜色，现在我已经创建了芯片，它根据长度显示，芯片列表是垂直的，所以对于第一个芯片，颜色将是颜色（0xFFEF6E98），对于第 2 色 (0xFFFFB139)、第 3 色 (0xFF0A869B) 和第 4 色 (0xFF50CFFD)。

这是芯片的代码

child: Chip(
                                backgroundColor: Colors.blue, // hardcoded color
                                label: Container(
                                  width: 80.w,
                                  height: 11.3.h,
                                  child: Align(
                                    alignment: Alignment.topCenter,
                                    child: Text(
                                      answersText,
                                      style: GoogleFonts.fredokaOne(
                                        textStyle: TextStyle(
                                            fontSize: 20.0.sp,
                                            color: Colors.white),
                                      ),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                ),
                              )

【问题讨论】：

标签： flutter dart flutter-layout flutter-dependencies

【解决方案1】：

Wrap(
                                direction: Axis.horizontal,
                                children: List.generate(widget.targetSet.length, (index) => Container(
                                  height: 50,
                                  width: ((MediaQuery.of(context).size.width-100)/4),
                                  decoration: BoxDecoration(
                                    color: darken(Color(0xFFE9F6F8),(widget.targetSet.length <= 5 ? index*0.1 : index*0.05)),
                                    border:   Border.all(width: 1,color: Color(0xFF00AABC)),
                                  ),
                                )
                                )
                            ),

在创建 Wrap 时使用上述代码。

Color darken(Color color, [double amount = .1]) {

断言（金额 >= 0 && 金额 <= 1）；

最终 hsl = HSLColor.fromColor(color); 最终 hslDark = hsl.withLightness((hsl.lightness - 数量).clamp(0.0, 1.0));

返回 hslDark.toColor(); }

【讨论】：