how to show progress indicator when executing await operations - flutter

ShaktiGoyal
September 19, 2023
207 views
0 votes
2 Answers

I’m trying to show progress indicator when executing await operations (operations or functions that takes time to fulfil), When I say progress indicator, I don’t refer it to traditional circular progress indicator in flutter that keeps rolling on without showing any percentage

basically I’m referring to percent indicator

Tags: dart flutter

Answers

Try this:

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? data;
  double value = 0.0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
      (Duration timeStamp) async {
        const int time = 10;
        final Stream<int> timer = Stream<int>.periodic(
          const Duration(seconds: 1),
          (int i) {
            return time - 1;
          },
        );
        double inital = 0.0;
        timer.listen(
          (int event) {
            value = inital = inital + 0.1;
            setState(() {});
          },
        );
      },
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: data == null
              ? LinearProgressIndicator(value: value)
              : Text(data ?? ""),
        ),
      ),
    );
  }
}

The below code is working and showing the progress with percentage.
You can also run this here 

https://zapp.run/edit/flutter-z79y06bl79z0? 
split=50&lazy=false&entry=lib/main.dart&file=lib/main.dart

copy the above link and you can run the code through this link

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
bool compressing = false;
bool compressed = false;
double progress = 0.0;

Future<void> compressImages() async{
// If you have 5 images to compress;
for(int i = 1;i<=5;i++){
  // this is the compressing time
  await Future.delayed(Duration(seconds: 2));
  setState(() {
    //according to your number of images you can increase the value or percentage here
          progress += 0.2;
        });
   }
   }

@override
 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: compressed 
    ? Text("images compressed 🙂")
    : compressing 
    ? Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // here value can be 0.0 -> 1.0 
        CircularProgressIndicator(
          value: progress,
        ),
        Text("Precentage : ${progress*100}")
      ],
    )
    :Text("Want to Compress images"),
  ),
  floatingActionButton: ElevatedButton(
    onPressed: () async{
      setState(() {
                  compressing = true;
                });
      await compressImages();
      setState(() {
             compressed = true;     
                });
    },
    child: Text("Start Compress"),
  ),
);
}
}

It looks like this
[![Image how it looks][1]][1]

Please signup or login to give your own answer.

Click here to cancel reply.

how to show progress indicator when executing await operations – flutter

Answers