task-progress-indicator.md

TaskProgressIndicator

TaskProgressIndicator shows LinearProgressIndicator under MaterialApp, and a custom iOS-styled alternative under CupertinoApp while the file is being uploaded/downloaded, reflecting the amount of bytes transferred.

Usage

FirebaseStorage storage = FirebaseStorage.instance;
Reference ref = storage.ref('my_file');

UploadTask task = ref.putFile(myFile);

TaskProgressIndicator(task: task);

You can see how to use TaskProgressIndicator together with UploadButton here.

TaskProgressIndicator also works for download tasks:

FirebaseStorage storage = FirebaseStorage.instance;
Reference ref = storage.ref('my_file');

DownloadTask task = ref.writeToFile(myFile);

TaskProgressIndicator(task: task);

Building custom progress indicators

Firebase UI storage provides an abstract class that simplifies building custom progress indicators. You can extend TaskProgressWidget and override buildProgressIndicator to build your own progress indicator:

class MyProgressIndicator extends TaskProgressWidget {
  final Task task;

  const MyProgressIndicator({super.key, required this.task});

  @override
  Widget buildProgressIndicator(BuildContext context, double progress) {
    return Text('Progress: ${progress.toStringAsFixed(2)}');
  }
}

---

See API reference for more details.