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

Here's my goal

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,
        ),
      ),
    ),
  ],
),

CodePudding user response：

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