title: How to update the Circular Percentage Indicator once we click each Checkbox List
body: <p>I want to do the checklist section which have circular percentage indicator. The percentage should updated once the list of checklist(checkbox) is clicked. Each Checkbox should hold 25% because have 4 checklist and the overall percentage is 100. Please help me how to update the percentage.</p>
  <p><a href="https://i.stack.imgur.com/9IsDl.png" rel="nofollow noreferrer">This is the interface</a></p>
  <pre><code>class ReportForm extends StatefulWidget {
    final int itemIndex;
    final Project project;
    const ReportForm({this.itemIndex, this.project});
  
    @override
    State&lt;ReportForm&gt; createState() =&gt; _ReportFormState();
  }
  
  class _ReportFormState extends State&lt;ReportForm&gt; {
    FirebaseFirestore _firebaseFirestore = FirebaseFirestore.instance;
    UserModel loggedInUser = UserModel();
    double progress = 0.0;
    currentProgressColor() {
      if (progress &gt;= 0.6 &amp;&amp; progress &lt; 0.8) {
        return Colors.red;
      }
      if(progress &gt;= 0.8){
        return Colors.green;
      }
      else{
        return Colors.orange;
      }
    }
  
    final checklist = [
      CheckBoxState(title: 'Attendance'),
      CheckBoxState(title: 'Equipment Used'),
      CheckBoxState(title: 'Work Performed'),
      CheckBoxState(title: 'Remarks'),
    ];
    @override
    Widget build(BuildContext context) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Container(
            height: 650,
            width: 370,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(13),
              boxShadow: [
                BoxShadow(
                  offset: Offset(0, 1),
                  blurRadius: 17,
                  spreadRadius: -23,
                  color: kShadowColor,
                ),
              ],
            ),
            child: Column(
              children: &lt;Widget&gt;[
                SizedBox(
                  height:40,
                ),
                CircularPercentIndicator(
                  radius: 200.0,
                  circularStrokeCap: CircularStrokeCap.round,
                  lineWidth: 25.0,
                  progressColor: currentProgressColor(),
                  percent: progress,
                  animation: true,
                  animationDuration: 1500,
                  center: new Text(&quot;${this.progress * 100}%&quot;, style: TextStyle(
                    fontSize: 30,
                  ),),
                  footer: new Text(&quot;Daily Report Completion&quot;,
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.green,
                  ),),),
                SizedBox(
                  height:20,
                ),
                StreamBuilder&lt;QuerySnapshot&gt;(
                    stream: _firebaseFirestore.collection(&quot;Attendance&quot;).snapshots(),
                    builder: (context, snapshot) {
                    return GestureDetector(
                      onTap: () {
                        Navigator.push(context, MaterialPageRoute(
                          builder: (context) =&gt; Attendance(
                          ),
                        ));
                      },
                      child: Card(
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(13.0)
                        ),
                        elevation: 10,
                        margin: EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
                        child: Container(
                          color: Colors.white,
                          width: 350,
                          height:60,
                          child: Padding(
                            padding: const EdgeInsets.all(2.0),
                            child: buildSingleCheckbox(CheckBoxState(title: 'Attendance')),
                          ),
                        ),
                      ),
                    );
                  }
                ),
                SizedBox(
                  height:18,
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(
                      builder: (context) =&gt; DetailsForm(project: widget.project, itemIndex: widget.itemIndex),
                    ));
                  },
                  child: Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(13.0)
                    ),
                    elevation: 10,
                    margin: EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
                    child: Container(
                      color: Colors.white,
                      width: 350,
                      height: 60,
                      child: Padding(
                        padding: const EdgeInsets.all(2.0),
                        child: buildSingleCheckbox(CheckBoxState(title: 'Equipment Used')),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height:18,
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(
                      builder: (context) =&gt; HomeScreen(),
                    ));
                  },
                  child: Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(13.0)
                    ),
                    elevation: 10,
                    margin: EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
                    child: Container(
                      color: Colors.white,
                      width: 350,
                      height: 60,
                      child: Padding(
                        padding: const EdgeInsets.all(2.0),
                        child: buildSingleCheckbox(CheckBoxState(title: 'Work Performed')),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height:18,
                ),
                GestureDetector(
                  onTap: () {
                    Navigator.push(context, MaterialPageRoute(
                      builder: (context) =&gt; Remarks(),
                    ));
                  },
                  child: Card(
                    clipBehavior: Clip.antiAlias,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(13.0)
                    ),
                    elevation: 10,
                    margin: EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
                    child: Container(
                      color: Colors.white,
                      width: 350,
                      height: 60,
                      child: Padding(
                        padding: const EdgeInsets.all(2.0),
                        child: buildSingleCheckbox(CheckBoxState(title: 'Remarks')),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
  
    Widget buildSingleCheckbox(CheckBoxState checkbox) =&gt; StatefulBuilder(
      builder: (context, _setState) =&gt; CheckboxListTile(
        activeColor: Colors.green,
        value: checkbox.value,
        title: Text(checkbox.title),
        onChanged: (value) =&gt;
          _setState(() =&gt; checkbox.value = value),
      ),
    );
  }
  
  class CheckBoxState{
    final String title;
    bool value;
  
    CheckBoxState({
    @required this.title,
    this.value = false,});
  }
  </code></pre>