How do I alter the background color so that it fits inside the CircularPercentIndicator?

Viewed 39

I'm trying to alter it so that the area within the Circle gets colored, but not the entire square as shown below. I used fillColor to change the background,

Here's what I have

enter image description here

Here's my goal

enter image description here

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    Obx(
      () {
        if (settingsController
            .user.value.kicks.isNotEmpty) {
          var totalKicks = settingsController
              .user.value.kicks.length;
          var goalsArea = settingsController
              .user.value.kicks[1].kickArea;
          return CircularPercentIndicator(
            radius: 20.0,
            lineWidth: 2.0,
            percent: goalsArea / totalKicks,
            backgroundColor:
                Color.fromARGB(255, 0, 0, 0),
            progressColor:
                Color.fromARGB(255, 0, 0, 0),
            center: Text(
              ((goalsArea / totalKicks) * 100)
                      .toInt()
                      .toString() +
                  "%",
              style: TextStyle(
                color: Color.fromARGB(
                    255, 0, 0, 0),
              ),
            ),
          );
        } else {
          return CircularPercentIndicator(
            fillColor: Color.fromARGB(
                255, 206, 175, 138),
            radius: 20.0,
            lineWidth: 2.0,
            percent: 0,
            backgroundColor:
                Color.fromARGB(255, 0, 0, 0),
            progressColor:
                Color.fromARGB(255, 0, 0, 0),
            center: Text(
              "0%",
              style: TextStyle(
                color: Color.fromARGB(
                    255, 0, 0, 0),
              ),
            ),
          );
        }
      },
    ),
    Padding(
      padding: EdgeInsets.only(top: 40),
      child: Text(
        "Left 5m Channel",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 7,
          color: Colors.grey[400],
          background: Paint()
            ..strokeWidth = 8.5
            ..color =
                Color.fromARGB(255, 0, 0, 0)
            ..style = PaintingStyle.stroke,
        ),
      ),
    ),
  ],
),
2 Answers

Just wrap your CircularPercentIndicator with a ClipRRect widget using the same radius.

Code Sample

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: CircularPercentIndicator(
    fillColor: const Color.fromARGB(255, 206, 175, 138),
    radius: 20.0,
    lineWidth: 2.0,
    percent: 0,
    backgroundColor: const Color.fromARGB(255, 0, 0, 0),
    progressColor: const Color.fromARGB(255, 0, 0, 0),
    center: const Text(
      "0%",
      style: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
    ),
  ),
)

Screenshot

pic

Just wrap your CircularPercentIndicator with a ClipOval widget.

             ClipOval(
                    child: CircularPercentIndicator(
                    fillColor: const Color.fromARGB(255, 206, 175, 138),
                    radius: 20.0,
                    lineWidth: 2.0,
                    percent: 0,
                    backgroundColor: const Color.fromARGB(255, 0, 0, 0),
                    progressColor: const Color.fromARGB(255, 0, 0, 0),
                    center: const Text(
                      "0%",
                      style: TextStyle(color: Color.fromARGB(255, 0, 0, 0)),
                    ),
                  ),
                )
Related