I know that backgroundColor changes the line color, and that progressColor also changes part of the line color. What changes the area color?

Here's what I have

Here's my goal

Stack(
  children: <Widget>[
    Obx(
      () {
        if (settingsController
            .user.value.kicks.isNotEmpty) {
          var totalKicks = settingsController
              .user.value.kicks.length;
          var goalsArea = settingsController
              .user.value.kicks[2].kickArea;
          return CircularPercentIndicator(
            radius: 20.0,
            lineWidth: 2.0,
            percent: goalsArea / totalKicks,
            backgroundColor: Color.fromARGB(
                255, 255, 150, 23),
            progressColor: Color.fromARGB(
                255, 255, 150, 23),
            center: Text(
              ((goalsArea / totalKicks) * 100)
                      .toInt()
                      .toString()  
                  "%",
              style: TextStyle(
                color: Color.fromARGB(
                    255, 255, 150, 23),
              ),
            ),
          );
        } else {
          return Text(
            "0",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: Color.fromARGB(
                  255, 255, 150, 23),
            ),
          );
        }
      },
    ),
    Padding(
      padding: EdgeInsets.only(top: 33),
      child: Text(
        "Area 2",
        textAlign: TextAlign.center,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.white,
          backgroundColor:
              Color.fromARGB(255, 255, 150, 23),
        ),
      ),
    )
  ],
),

CodePudding user response：

There is no predefined property to do that, but you can do some workaround like this:

ClipRRect(
      borderRadius: BorderRadius.circular(20),
      child:
        Container(
          child:
            CircularPercentIndicator(
              fillColor: Color.fromARGB(255, 206, 175, 138),
              backgroundWidth: 0,
              radius: 20.0,
              lineWidth: 1.0,
              backgroundColor: Color.fromARGB(
                  255, 255, 150, 23),
        )
    )