Flutter Firebase not loading data for the first time, but at the next tries it loads them many times

Question

final databaseReference = Firestore.instance.collection("classrooms");
bool hany = false;
var names = new Map<String, dynamic>();
List nevek = [];
List IDS = [];

Future<void> getclasses() async {
  QuerySnapshot snapshot = await databaseReference.getDocuments();

  snapshot.documents.forEach((f) {
    IDS.add(f.documentID);
    x = (f.data.length);
    names.addAll(f.data);
    for (int i = 0; i < names.values.toList().length / x; i++) {
      nevek.add(names.values.toList()[i + 1]);
    }
  });
}

class ScrollableClassroom extends StatefulWidget {
  @override
  _ScrollableClassroomState createState() => _ScrollableClassroomState();
}

class _ScrollableClassroomState extends State<ScrollableClassroom> {
  @override
  void initState() {
    super.initState();
    IDS = [];
    names.clear();
    getclasses();
  }

  Widget build(BuildContext context) {
    print(nevek);
    print(IDS);

    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Osztályok"),
          leading: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: IconButton(
                  icon: Icon(Icons.exit_to_app, color: Colors.black38),
                  onPressed: () {
                    authService.signOut();
                    authService.loggedIn = false;
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => GoogleSignUp()));
                  })),
          actions: <Widget>[
            Padding(
                padding: const EdgeInsets.only(right: 5.0),
                child: Row(
                  children: <Widget>[
                    IconButton(
                        icon: Icon(Icons.add_circle_outline,
                            color: Colors.black38),
                        onPressed: null),
                    IconButton(
                        icon: Icon(Icons.search, color: Colors.black38),
                        onPressed: null),
                  ],
                )),
          ],
        ),
        body: ListView.builder(
          itemCount: nevek.length,
          itemBuilder: (context, index) {
            return Card(
              child: ListTile(
                onTap: () {
                  id = IDS[index];
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => InClassRoom()));
                },
                title: Text(nevek[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

In the Listview, for the first time it shows nothing, but after a hot reload it works fine. However, if I do a second hot reload it shows everything, but twice. Another case is when I press the back button on the left side of the appbar, it takes you to the login screen. If you come back for the first time from the login screen it is fine, but if you do this once more it shows everything twice again. And after that three times, etc.

Answer 1

Try this code:

class ScrollableClassroom extends StatefulWidget {
  @override
  _ScrollableClassroomState createState() => _ScrollableClassroomState();
}

class _ScrollableClassroomState extends State<ScrollableClassroom> {

//moved from the Widget class
final databaseReference = Firestore.instance.collection("classrooms");
bool hany = false;
var names = new Map<String, dynamic>();
List nevek = [];
List IDS = [];

Future<void> getclasses() async {
  QuerySnapshot snapshot = await databaseReference.getDocuments();

  snapshot.documents.forEach((f) {
    IDS.add(f.documentID);
    x = (f.data.length);
    names.addAll(f.data);
    for (int i = 0; i < names.values.toList().length / x; i++) {
      nevek.add(names.values.toList()[i + 1]);
    }
  });
setState((){}); // <- this line tells the StetefulWidget that it's state has been changed and it needs to rebuild
}
...(the rest of the state class)

Answer 2

First of all your missing a setState after the docukents have been mapped

Keep your state variables in your state class