How to display a snackbar AFTER a function finishes executing?-CodePudding

I have an ElevatedButton. When pressed, it calls a function to download certain files from Firebase Storage.

ElevatedButton

ElevatedButton(
 onPressed: () {
  await downloadProductsList();  // function to download files from firebase
  
  final snackbar = SnackBar(content: Text('Download complete!'), duration: Duration(seconds: 2));
  
  setState() {
   ScaffoldMessenger.of(context).showSnackBar(snackbar);
  }})

downloadProductsList Function

  downloadProductsList() async {
    final storageRef = FirebaseStorage.instance.ref();
    final customers = ['A', 'B', 'C', 'D', 'E', 'F'];
    final baseDir = await getApplicationDocumentsDirectory();
    String path = "${baseDir.path}/assets";

    for (int i = 0; i < customers.length; i  ) {
      final filePath = "$path/${customers[i]}.csv";
      final file = await File(filePath).create(recursive: true);

      final fileRef = storageRef.child("assets/${customers[i]}.csv");
      fileRef
          .writeToFile(file)
          .whenComplete(() => print('downloaded ${customers[i]}.csv'));
    }
  }

The issue I'm facing is that the SnackBar displays as soon as the button is pressed. Not after the downloads have been completed.

What should I do to fix this?

CodePudding user response：

Make the function downloadProductsList async and write await with this here it will wait for the function to complete and then the SnackBar will be shown.