如何在Flutter中根据总数据和已用数据显示线性进度指示器

Question

我必须在 Flutter 中显示基于总数据和已使用数据的线性进度指示器。

我有一个名为 ActivePlansModel 的类，如下所示。

ActivePlansModel currentPlan = ActivePlansModel();

class ActivePlansModel {
  String? planName;
  String? planType;
  String? validity;
  String? totalQuota;
  String? usedQuota;
  String? startDate;
  String? endDate;
  String? planStage;
  String? volQuotaUnit;

  static ActivePlansModel? fromHashMap(dynamic map) {
    if (map == null) return null;
    ActivePlansModel result = new ActivePlansModel();
    result.planName = map["planName"];
    result.planType = map["plangroup"];
    result.validity = map["validity"].toString();
    result.totalQuota = map["volTotalQuota"].toString();
    result.usedQuota = map["volUsedQuota"].toString();
    result.startDate = map["startDate"];
    result.endDate = map["expiryDate"];
    result.planStage = map["planstage"];
    result.volQuotaUnit = map["volQuotaUnit"];

    return result;
  }

  static List<ActivePlansModel> fromArrayOfHashMap(dynamic jsonArray) {
    List<ActivePlansModel> list = [];
    if (jsonArray != null) {
      for (var jsonObject in jsonArray) {
        list.add(fromHashMap(jsonObject)!);
      }
    }
    return list;
  }
}

这里的类有usedData和totalData，所以我必须根据总数据和已用数据显示线性进度指示器。

就像下图一样。

那么如何创建进度条呢？

请帮助我，谢谢。

Answer 1

您可以使用LinearProgressIndicator显示进度条。设置value来更新进度指示器 - 这是一个双精度，因此您可以应用类似的方法usedData/totalData来获取消耗数据的百分比。有很多示例可以帮助您入门。

double _consumedData = usedData / totalData;

...

LinearProgressIndicator(
  value: _consumedData,
)