扑动问题：如何在卡片上填充颜色？

Question

我想在我的卡片图像上方和文本下方填充红色作为屏幕截图中的显示，但问题是颜色不是我在屏幕截图中提到的 cerculer。

这是我的卡代码。

ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemCount: mpListData.length,
    itemBuilder: (context, index) {
      return isMPLoading
          ? SingleChildScrollView(
              child: Column(
                children: [
                  CardSkeleton(),
                  CardSkeleton(),
                  CardSkeleton(),
                ],
              ),
            )
          : Padding(
              padding: const EdgeInsets.only(
                left: 12,
                right: 12,
                bottom: 15,
              ),
              child: SizedBox(
                height:
                    mpListData[index]['name'] == "Starter" ? 160 : 167,
                width: MediaQuery.of(context).size.width,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Stack(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            image: DecorationImage(
                              image: mpListData[index]['name'] ==
                                      "Starter"
                                  ? AssetImage(
                                      "assets/light_green_card.png")
                                  : AssetImage("assets/white_card.png"),
                              fit: BoxFit.fill,
                            ),
                          ),
                          height: 142,
                          width: MediaQuery.of(context).size.width,
                          child: Container(
                            color: Colors.red.withOpacity(0.25),
                            child: Container(
                              margin: const EdgeInsets.only(top: 10),
                              padding: EdgeInsets.only(
                                  right: 15, left: 15, top: 8),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        top: 20.0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "${mpListData[index]['name']!.length <= 10 ? mpListData[index]['name'] : mpListData[index]['name']!.substring(0, 10) + ".."} Package",
                                          style: TextStyle(
                                              fontSize: tSize18,
                                              fontWeight:
                                                  FontWeight.w500),
                                        ),
                                        SizedBox(
                                          height: 6,
                                        ),
                                        Text(
                                          "Best package for price",
                                          style: TextStyle(
                                            fontSize: tSize14,
                                          ),
                                        ),
                                        SizedBox(
                                          height: 13,
                                        ),
                                        Text(
                                          mpListData[index]['name'] ==
                                                  "Starter"
                                              ? "FREE"
                                              : "$99 USD",
                                          style: TextStyle(
                                              fontSize: tSize27,
                                              fontWeight:
                                                  FontWeight.w500),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(bottom: 8),
                                    child: Image.asset(
                                      mpListData[index]['name'] ==
                                              "Starter"
                                          ? 'assets/onaa.png'
                                          : mpListData[index]['name'] ==
                                                  "Explorer"
                                              ? 'assets/white_ex.png'
                                              : 'assets/white_champ.png',
                                      height: 114,
                                      width: 114,
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                        ),
                        mpListData[index]['name'] == "Starter"
                            ? Container()
                            : Positioned(
                                top: 0,
                                right: 15,
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Color(0xff158998),
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(8)),
                                  ),
                                  width: 130,
                                  height: 22,
                                  child: Center(
                                    child: Text(
                                      'Upcoming Plans',
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: tSize14,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                      ],
                    ),
                    Positioned(
                      width: 18,
                      bottom: 0,
                      child: Center(
                        child: Container(
                          height: 15,
                          width: 15,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(50),
                          ),
                          child: Theme(
                            data: ThemeData(
                              //here change to your color
                              unselectedWidgetColor: Color(0xff3a99a4),
                            ),
                            child: Radio(
                              activeColor: Colors.green,
                              overlayColor:
                                  MaterialStateProperty.all(Colors.red),
                              value: index,
                              groupValue: 0,
                              onChanged: (int? value) {
                                // setState(() {
                                //   isSelect = value!;
                                // });
                              },
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
    }),

Answer 1

如@Dima Rostopira 评论的那样，用 ClipRRect 包裹并提供 borderRadius。

itemBuilder: (context, index) {
  return ClipRRect(
    borderRadius: ,
      child: isMPLoading? 

如果您只喜欢购物车，请用 ClipRRect 包装卡片小部件。