有一个关于堆栈小部件布局的问题

Question

我想创建一个像这样的盒子。

我成功创建了卡片小部件，但清洁时间给我带来了问题。 这就是我所创造的。如果您能告诉我如何更改滑块的拇指颜色（如图所示），请也告诉我。

现在，这是我的代码。请看一下这个，您可以在自己的代码中尝试一下。 如果您确实想了解更多信息，请发表评论。

Container(
      width: Get.width * 0.61,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(21),
        image: const DecorationImage(
          image: AssetImage("assets/images/Rectangle 1432.png"),
          fit: BoxFit.cover,
        ),
      ),
      child: Stack(
        children: [
          Positioned(
            bottom: -7,
            left: 0,
            child: Image.asset(
              "assets/images/Vector 34.png",
              fit: BoxFit.fitWidth,
            ),
          ),
          Positioned(
            left: 7,
            bottom: 2,
            child: Image.asset(
              "assets/images/Vector 33.png",
              fit: BoxFit.fitWidth,
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Spaces.smallh,
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Spacer(),
                  Padding(
                    padding: const EdgeInsets.only(left: 10.0),
                    child: customTextWidget(
                      text: "TIER 1",
                      fontSize: 21,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Spacer(),
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Image.asset("assets/images/T1_design.png"),
                  ),
                  Spaces.extrasmallw,
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  customTextWidget(
                    text: '\$ ',
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                  ),
                  customTextWidget(
                    text: "300", // Format the amount as needed
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                  customTextWidget(
                    text: ' Due',
                    fontSize: 12,
                  ),
                  Spaces.smallew,
                  Spaces.smallew,
                ],
              ),
              GetBuilder<TierController>(builder: (controller) {
                return SizedBox(
                  height: 30,
                  width: double.infinity,
                  child: SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                        thumbShape: const RoundSliderThumbShape(
                          enabledThumbRadius: 10.0,
                        ),
                        thumbColor: ColorConstants.primaryColor),
                    child: Slider(
                      label:
                          '${tc._currentValue.toStringAsFixed(0)} sqft', // Display current sqft as a label
                      divisions: 9850,
                      activeColor: ColorConstants.primaryColor,
                      inactiveColor: const Color(0xFFEAEAEA),
                      value: controller._currentValue,
                      min: controller._minValue,
                      max: controller._maxValue,
                      onChanged: (value) {
                        controller.updatethis(value);
                      },
                    ),
                  ),
                );
              }),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 21.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    customTextWidget(
                      text: "150 Sq.ft",
                    ),
                    customTextWidget(
                      text: "10,000 Sq.ft",
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // Text("data", style: ,),

                    Row(
                      children: [
                        customTextWidget(text: "4.8", fontSize: 29),
                        customTextWidget(text: "Out of 5", fontSize: 9),
                      ],
                    ),

                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        // Align
                        Padding(
                          padding: const EdgeInsets.all(2),
                          child: customStarsRatingWidget(
                            context,
                            "Communication",
                            5.0,
                            1,
                          ),
                        ),

                        Padding(
                          padding: const EdgeInsets.all(2),
                          child: customStarsRatingWidget(
                            context,
                            "Performance",
                            4.0,
                            1,
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(2),
                          child: customStarsRatingWidget(
                              context, "Overall", 4.0, 1),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );

Answer 1

我已经审查了您的代码并对这两个问题提出了建议。请看一下下面的代码，它应该可以帮助您解决清洁时间部分的设计问题。

Container(
          height: 400,
          margin: EdgeInsets.only(
              left: MediaQuery.maybeOf(context)!.size.width * 0.05,
              right: MediaQuery.maybeOf(context)!.size.width * 0.05,
              bottom: MediaQuery.maybeOf(context)!.size.width * 0.03),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(
                  MediaQuery.maybeOf(context)!.size.width * 0.035)),
              border: Border.all(color: Colors.grey, width: 1)),
          child: Column(
            children: [
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.yellow,
                    borderRadius: BorderRadius.all(Radius.circular(
                        MediaQuery.maybeOf(context)!.size.width * 0.035)),
                  ),
                ),
              ),
              SizedBox(
                height: 16,
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: const [
                    Icon(Icons.watch_later_outlined),
                    SizedBox(
                      width: 16,
                    ),
                    Text("Cleaning time"),
                    Spacer(),
                    Text(
                      "1hr 22min",
                      style: TextStyle(
                          color: Colors.deepOrangeAccent,
                          fontWeight: FontWeight.w500),
                    ),
                  ],
                ),
              )
            ],
          ),
        )

输出

要解决滑块拇指颜色问题，请考虑使用 syncfusion_flutter_sliders 包，它提供了基于图标的拇指。

我希望这对你有帮助！