How do i display progress bar on each item in the listview using flutter

Question

i have a json data which am displaying in the listview that contains item name, scores and target scores. i want to show a progress bar indicating scored points and the target points below is my code and images to help understand. This is my json data

Below is My code: `

import 'dart:convert';
import 'package:network/network.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class FavouriteTab extends StatefulWidget {
  @override
  _FavouriteTabState createState() => _FavouriteTabState();
}

class _FavouriteTabState extends State<FavouriteTab> {
  List products = List();

  Future getAllProducts() async {
    var response = await http.get(NetworkUrl.getProducts());
    if (response.statusCode == 200) {
      setState(() {
        products = json.decode(response.body);
      });
      return products;
    }
  }

  @override
  void initState() {
    super.initState();
    getAllProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Target Scores"),
      ),
      body: FutureBuilder(
          future: getAllProducts(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              if (products.contains("empty")) {
                return Center(child: Text("NO DATA"));
              } else {
                return ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (context, index) {
                      var notis = products;
                      var scoredAmt = notis[index]['scored_amt'];
                      var targetAmt = notis[index]['target_score'];
                      var _percentages = (scoredAmt / targetAmt);
                      return Card(
                        child: Container(
                          child: Column(
                            children: [
                              Text(notis[index]['item_name']),
                              Text(
                                notis[index]['target_score'],
                                style: TextStyle(color: Colors.indigo),
                              ),
                              SizedBox(height: 5),
                              Row(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text("Scored Amount :" +
                                        notis[index]['scored_amt']),
                                  ),
                                  Spacer(),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text("Target Amount :" +
                                        notis[index]['target_score']),
                                  ),
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: SizedBox(
                                    width: 300,
                                    height: 30,
                                    child: LinearProgressIndicator(
                                        value: _percentages)),
                              ),
                            ],
                          ),
                        ),
                      );
                    });
              }
            } else {
              return LinearProgressIndicator(
                backgroundColor: Colors.purpleAccent,
              );
            }
          }),
    );
  }
}`

Am getting this error

i want to have data display like this according to the scores: This is how i want to display

I don't know what am doing wrong kindly help

Answer 1

As the error you are getting denotes it seems that you are not parsing the strings as num's and are trying to divide Strings.

var _percentages = (num.tryParse(scoredAmt) / num.tryParse(targetAmt))

Or even better do that parsing in your model see here.

Also you are calling the getAllProducts in initState but are not caching the result and you call it again in the futureBuilder,

import 'dart:convert';
import 'package:Habapay/network/network.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class FavouriteTab extends StatefulWidget {
  @override
  _FavouriteTabState createState() => _FavouriteTabState();
}

class _FavouriteTabState extends State<FavouriteTab> {
  List products = List();
  Future allProducts;
  Future getAllProducts() async {
    var response = await http.get(NetworkUrl.getProducts());
    if (response.statusCode == 200) {
      setState(() {
        products = json.decode(response.body);
      });
      return products;
    }
  }

  @override
  void initState() {
    super.initState();
    allProducts=  getAllProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Target Scores"),
      ),
      body: FutureBuilder(
          future: allProducts,/// Now the future gets called only once
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              if (products.contains("empty")) {
                return Center(child: Text("NO DATA"));
              } else {
                return ListView.builder(
                    itemCount: products.length,
                    itemBuilder: (context, index) {
                      var notis = products;
                      var scoredAmt = notis[index]['scored_amt'];
                      var targetAmt = notis[index]['target_score'];
                      var _percentages = (scoredAmt / targetAmt);
                      return Card(
                        child: Container(
                          child: Column(
                            children: [
                              Text(notis[index]['item_name']),
                              Text(
                                notis[index]['target_score'],
                                style: TextStyle(color: Colors.indigo),
                              ),
                              SizedBox(height: 5),
                              Row(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text("Scored Amount :" +
                                        notis[index]['scored_amt']),
                                  ),
                                  Spacer(),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text("Target Amount :" +
                                        notis[index]['target_score']),
                                  ),
                                ],
                              ),
                              Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: SizedBox(
                                    width: 300,
                                    height: 30,
                                    child: LinearProgressIndicator(
                                        value: _percentages)),
                              ),
                            ],
                          ),
                        ),
                      );
                    });
              }
            } else {
              return LinearProgressIndicator(
                backgroundColor: Colors.purpleAccent,
              );
            }
          }),
    );
  }
}`