Getting null value outside the function in flutter

Question

I am getting a null value for the 'count' when I am accessing it through the Text widget. But when I print the value of count in the function, it shows the correct value. Please help me to access the value outside of the function so that I can print it.

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:pict_mis/Subjects.dart';

class MyFlexiableAppBar extends StatelessWidget {
  final Subjects subject;
  MyFlexiableAppBar({Key? key, required this.subject}) : super(key: key);

  final user = FirebaseAuth.instance.currentUser;
  Map<String, dynamic>? fetchDoc;
  var db = FirebaseFirestore.instance;
  var count;
  fetchDocs() async {
    DocumentSnapshot classData = await FirebaseFirestore.instance
        .collection('class')
        .doc(subject.batch)
        .get();
    if (classData.exists) {
      fetchDoc = classData.data() as Map<String, dynamic>?;
    }
    count = fetchDoc?['totalStudents'];
    print(count);
  }

  @override
  Widget build(BuildContext context) {
    fetchDocs();
    return Container(
      child: Padding(
        padding: const EdgeInsets.only(top: 120.0, left: 12.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(subject.subject,
                style: const TextStyle(
                    color: Colors.white,
                    fontFamily: 'Poppins',
                    fontWeight: FontWeight.w800,
                    fontSize: 30.0)),
            const Padding(padding: EdgeInsets.only(top: 20.0)),
            Row(
              children: <Widget>[
                Text(subject.batch,
                    style: const TextStyle(
                        color: Colors.white,
                        fontFamily: 'Poppins',
                        fontSize: 28.0)),
                const Padding(padding: EdgeInsets.only(left: 50.0)),
                Text('$count',
                    style: const TextStyle(
                        color: Colors.white,
                        fontFamily: 'Poppins',
                        fontSize: 25.0)),
                const Icon(
                  Icons.people,
                  color: Colors.white,
                  size: 30.0,
                ),
              ],
            ),
            const Padding(padding: EdgeInsets.only(top: 25.0)),
            const Text('Total Lectures : 1',
                style: TextStyle(
                    color: Colors.white, fontFamily: 'Poppins', fontSize: 20.0))
          ],
        ),
      ),
    );
  }
}

Image of output console

App image

Answer 1

Your fetchDocs() completes after the widget has been build. Thats's why it's null at the time.

Wrap your code in a FutureBuilder, because fetchDocs() returns a Future.

Something along these lines should work:

@override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: fetchDocs(),
        builder: (context, docs) {
          return Container() // <-- your code here
        });
  }

Ideally your fetchDocs() would return the fetchedDocs rather than having a variable in the state.

Similar to this:

 Future<Map<String, dynamic>?> fetchDocs() async {
    var fetched = <String, dynamic>{};
    DocumentSnapshot classData = await FirebaseFirestore.instance
        .collection('class')
        .doc(subject.batch)
        .get();
    if (classData.exists) {
      fetched = classData.data() as Map<String, dynamic>;
    }
    count = fetched['totalStudents'] ?? 0;
    return fetched;
  }