如何使用颤振在列表视图中的每个项目上显示进度条答案

【问题标题】：How do i display progress bar on each item in the listview using flutter如何使用颤振在列表视图中的每个项目上显示进度条
【发布时间】：2021-08-19 02:01:21
【问题描述】：

我有一个 json 数据，它显示在包含项目名称、分数和目标分数的列表视图中。我想显示一个指示得分的进度条，下面的目标点是我的代码和图像以帮助理解。这是我的 json 数据

以下是我的代码： `

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,
              );
            }
          }),
    );
  }
}`

遇到这个错误

我想根据分数有这样的数据显示：这就是我想要显示的方式

不知道哪里做错了，请帮忙

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

由于您收到的错误表明您似乎没有将字符串解析为 num 并且正在尝试划分字符串。

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

或者更好地在你的模型中进行解析，参见here。

另外，您在 initState 中调用 getAllProducts 但没有缓存结果，您在 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,
              );
            }
          }),
    );
  }
}`

【讨论】：