How to display Linear Progress Indicator based on Total data And Used data in Flutter

Question

I have to display a Linear Progress Indicator based on Total data And Used data in Flutter.

I have a Class named ActivePlansModel as below.

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;
  }
}

Here Class have usedData and totalData, So I have to display Linear Progress Indicator based on Total data And Used data.

Like the below Image.

So how can I create a Progress Bar?

Please help me, Thank You.

Answer 1

You can use LinearProgressIndicator to display a Progress Bar. Set the value to update the progress indicator - this is a double, so you can apply something like usedData/totalData to fetch the percentage of the consumed data. There's a lot of samples out there to help you get started.

double _consumedData = usedData / totalData;

...

LinearProgressIndicator(
  value: _consumedData,
)

Answer 2

Look this =>example:

   class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    )..addListener(() {
        setState(() {});
      });
    controller.repeat(reverse: true);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            const Text(
              'Linear progress indicator with a fixed color',
              style: TextStyle(fontSize: 20),
            ),
            LinearProgressIndicator(
              value: controller.value,
              semanticsLabel: 'Linear progress indicator',
            ),
          ],
        ),
      ),
    );
  }
}