Flutter Tutorial - Progress Indicator - Deep Dive

Create a linear and circular progress indicator while downloading a file from the web in Flutter.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
- Source Code: github.com/JohannesMilke/prog...
- Buy My Courses: johannesmilke.teachable.com/p...
- Follow Twitter: intent/follow?ori...
-- JOIN THE CREW --
bit.ly/JohannesMilke
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Me :-)
- Twitter: intent/follow?ori...
- Linkedin: / johannesmilke
- Github: github.com/JohannesMilke
PLAYLISTS
- All Flutter Videos: • Flutter Tutorial - Flu...
- Widgets - Flutter: • Flutter Tutorial - Flu...
- Plugins - Flutter: • Flutter Tutorial - Flu...
- Animations - Flutter: • Flutter Tutorial - Tra...
- Designs - Flutter: • Flutter Tutorial - Flu...
- Firebase - Flutter: • Flutter Tutorial - Pag...
If you find this video useful, LIKE & SHARE this video to help other people who also learn Flutter :)
bit.ly/JohannesMilke
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)

[@HeyFlutter]

This might help you :)
Source Code: github.com/JohannesMilke/progress_indicator_example

[@programingtales7514]

Always the best ❤ thank you verymuch...

[@TrikNgonlen]

oooh, man! I love you contents...

[@kibromhs7566]

Can we add borders to the LinearProgressIndicator

[@user-ks5rv8wz4w]

thank you very much

[@pedromaratones9852]

Love this video, it should have more view. I was searching for this and all pther tutorials used the CustomPaint to reach this result. But this way is much more clean and easy

[@hieulee84]

get some error with ColorTween
// animation =
// controller.drive(ColorTween(begin: Colors.yellow, end: Colors.red));
Now have to change to this:
late Animation animation;
and when initilze state:
animation =
ColorTween(begin: Colors.yellow, end: Colors.blue).animate(controller);

[@hectorprx]

Thanks

[@anujrathore2517]

I am working on to-do list app and I want to fill the progress bar when any user complete one task and percentages will be acc. To number of task user created on that app
Is it possible in flutter (I am complete newbie)
Any help will be appreciated
I searched a lot but all I can find is how to create progress bar for download button so it will be really helpful

[@HeyFlutter]

Yes it is possible! Watch also my Flutter videos on creating a ToDo App!
1) Todo App Tutorial: ua-cam.com/video/kN9Yfd4fu04/v-deo.html
2) Todo App Tutorial: ua-cam.com/video/cltCpXY60Sk/v-deo.html
3) Todo App + Firebase Tutorial: ua-cam.com/video/EV2DyrKOqrY/v-deo.html

[@exploring_thailand]

It would be useful to see a demo of this in which the Progress Indicator automatically appears as a modal while the file is downloading, and disappears once the download is complete.

[@HeyFlutter]

Thank You Exploring Thailand! Follow this link: medium.com/flutter-community/how-to-show-download-progress-in-a-flutter-app-8810e294acbd
I hope you will get your answer 🙂

[@rahulmp7109]

Can I use this for upload progress

[@rahulmp7109]

@@HeyFlutteriam using http with put request ,and I want to send a vido as binary to gcp I followed your tutorial and I got result but upload progress not working

[@rahulmp7109]

@@HeyFlutter here is code
Future uploadVideo(File file, String url) async {
int totalLength = 0;
double progress = 0;
List bytes = [];
final request = http.Request('PUT', Uri.parse(url));
request.bodyBytes = file.readAsBytesSync();
request.headers['content-type'] = 'video/mp4';
request.headers['accept'] = '*/*';
request.headers['content-length'] = file.lengthSync().toString();
int byteCount = 0;
try {
final http.StreamedResponse streamedResponse = await request.send();
totalLength = streamedResponse.contentLength ?? 0;
streamedResponse.stream.listen(
(value) {
bytes.addAll(value);
final downloadedLength = bytes.length;
progress = downloadedLength / totalLength;
log('progress = $progress');
},
onDone: () async {
log('upload completed');
},
onError: (error) {
log(error.toString());
throw HttpFailure(message: 'Could not complete upload');
},
cancelOnError: true,
);
//ignore: prefer_final_locals
int statusCode = streamedResponse.statusCode;
log(statusCode.toString());
if (statusCode ~/ 100 != 2) {
throw HttpFailure(message: 'Error while uploading');
}
} on SocketException {
throw HttpFailure(message: 'No internet connection');
} on http.ClientException catch (e) {
log(e.message);
throw HttpFailure(message: e.message);
}
}
please help on this

[@amjadahmed3822]

I DON'T FROM FILE I WANT FROM JSON

[@himesh_89]

Thanks