Home > Enterprise >  How to code progress bar to set completion status in online course app in flutter
How to code progress bar to set completion status in online course app in flutter

Time:03-05

I'm developing an online course app in flutter, and I need to code a progress bar depend on students completion of course, how do I do that in flutter?

CodePudding user response:

This is a very broad question. Concretely, you can use a LinearProgressIndicator to show the progress. Store the progress inside the State of the overarching widget, and update it after a part is completed, which should update the progress bar accordingly.

https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html

You can then imagine something like this:

// In a stateful widget
double progress = 0.0;

Widget build(BuildContext context) {
  return Column(children: [
    LinearProgressIndicator(progress: progress),
    Expanded(
      child: MyCourseView(onMadeProgress: (newProgress) {
        // Using setState ensures this widget rebuilds
        setState(() => progress = newProgress);
      }),
    ),
  ]);
}
  • Related