Flutter - Make a widget wait for a function response to build

Question

I am building an app to manage pdf files using firestore in flutter with an integrated pdf viewer. When I print the pdfData length the result shows 3 as expected but the pdfviewer doesn't show the first document of the index, it is in fact empty and not showing anything.

Here is my code

List<Map<String, dynamic>> pdfData = [];

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

  @override
  State<ScanPage> createState() => _ScanPageState();
}

class _ScanPageState extends State<ScanPage> {
  final FirebaseFirestore _firebaseFirestore = FirebaseFirestore.instance;

   List<String> _pictures = [];
   late PDFViewController pdfViewController;

   Future<String?>uploadPdf (String fileName, File file) async {
    final reference = FirebaseStorage.instance.ref().child("pdfs/$fileName.pdf");
    final uploadTask = reference.putFile(file);

    await uploadTask.whenComplete(() {});

    final downloadLink = await reference.getDownloadURL(); 

    return downloadLink;
   }

   void pickFile() async {
    final pickedFile = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['pdf'],
    );

    if (pickedFile != null) {
      String fileName = pickedFile.files[0].name;
      File file = File(pickedFile.files[0].path!);
      uploadPdf(fileName, file);
      final downloadLink = await uploadPdf(fileName, file);
      await _firebaseFirestore.collection("pdfs").add({
        "name": fileName,
        "url": downloadLink
      });
    }
   }


Future<void> getAllPdfs() async{

    QuerySnapshot querySnapshot = await _firebaseFirestore.collection('pdfs').get();;

    final pdfData = querySnapshot.docs.map((doc) => doc.data()).toList();
    setState(() {
      
    });
    print(pdfData.length);
}


   @override
   void initState() {
    super.initState();
    getAllPdfs();
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('manage pdf', 
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w700,
         ),),
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.lightGreen,
        elevation: 0.0,
      ),
     body: SafeArea(
        child: Center(
          child: Column(
            children: [
              Container(
                height: 150,
                width: 150,
                child: Lottie.network('https://lottie.host/1585d364-56fa-4c4f-a672-d2c903764dd0/0lSK2OYu46.json'),
              ),
              const SizedBox(height: 5),
              const Text('Your pdf', 
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold
              ),
              ),
              
              const SizedBox(height: 15),

             Container(
                  height: 400,
                  width: 300,
                  child: Swiper(
                    itemHeight: 350,
                    itemWidth: 250,
                    itemBuilder: (BuildContext context, int index) {
                      return SfPdfViewer.network(
                      pdfData[index]["url"],
                    );
                    },
                    itemCount: pdfData.length,
                    pagination: SwiperPagination(),
                    control: SwiperControl(),
                    loop: false,
                  ),
                ),
            ]
          )
        )
     )
    );
  }
}

I tried to call the function on press with a button but it still didn't work.

Thank you in advance

Answer 1

you have the local pdfData variable in the getAllPdfs() method, why are you declaring the pdfData variable in the method, what you have to do is remove the final of the pdfData variable that is inside the method so that it takes the pdfData variable what did you declare globally