CircularPercentIndicator with dynamic Value

If I understand your problem well, then, the problem is

You are not able to show the correct percentage on the CircularPercentIndicator, but you are able to show the text for that Widget

If that is the case, after reading the documentation, and looking at your code, I believe the thing which you're doing wrong is to write the percentage as exact 0.7 and pass it to percent which takes care of your color of the progress, and not the value coming from API.

In order to make it dynamic, use your data.percentage only, which is I believe shows the data in your text as well.

To pass the data into the percent as double, you can use the data as double.parse(any_value)

I am assuming that, the data.percentage update is being taken care of by your method only

Code

                    Padding(
                      padding: const EdgeInsets.only(top: 25),
                      child: CircularPercentIndicator(
                        radius: 55.0,
                        lineWidth: 8.0,
                        animation: true,
                        percent: double.parse(data.percentage) / 100, // here we're using the percentage to be in sync with the color of the text
                        center: new Text(
                           data.percentage + "%",,
                          style: new TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 11.0),
                        ),
                        circularStrokeCap: CircularStrokeCap.round,
                        progressColor: Colors.green[700],
                      )
                    )

To know more about type casting the string data to double, read bout String to Double dart.

Check out this answer :

import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double value;
  @override
  void initState() {
    super.initState();
    // you just have to divide by 100
    value = 12.7 / 100;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.only(top: 25),
      child: CircularPercentIndicator(
        radius: 55.0,
        lineWidth: 8.0,
        animation: true,
        percent: value,
        center: new Text(
          '12.7',
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 11.0),
        ),
        circularStrokeCap: CircularStrokeCap.round,
        progressColor: Colors.green[700],
      ),
    ));
  }
}

Let me know if it works.

Using animation gives you more controll

class MyCircularIndicator extends StatefulWidget {
  @override
  _MyCircularIndicatorState createState() => _MyCircularIndicatorState();
}

class _MyCircularIndicatorState extends State<MyCircularIndicator> with TickerProviderStateMixin {
  AnimationController controller;
  double myAnimationValue = 0;// 0 to 100
  Color beginColor,endColor;
  
  @override
  void initState() {
    super.initState();
    //initiate animation controller
    controller = AnimationController(vsync: this);
  }
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Text((myAnimationValue).toInt().toString()),
        CircularProgressIndicator(
          valueColor: Tween<Color>(begin:beginColor,end:endColor).animate(controller),
        )
      ],
    );
  }
}

somewhere in your widget, call set state when the value changes, adjust coloring according to your requirement

setState(() {
 myAnimationValue = //set your value within 1-100;
 controller.value = myAnimationValue/100;
})