Flutter not loading data on first click

Question

i want to show my data in DropdownButton. Im sending data with growableList.

growableList is not fill first time but in second time its working.

How can i fix this. Thanks!

Its not important under 3 dots

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:workoutlogger/pages/app_styles.dart';

class LineChartEx extends StatefulWidget {
  const LineChartEx({Key? key}) : super(key: key);

  @override
  State<LineChartEx> createState() => LineChartExState();
}

final growableList = <String>[];
String dropdownValue = 'OHP';
TextEditingController firstdate = TextEditingController();
TextEditingController endingdate = TextEditingController();

class LineChartExState extends State<LineChartEx> {

  @override
  Widget build(BuildContext context) {

    if (growableList.isEmpty) {
      Stream<QuerySnapshot> stream =
          FirebaseFirestore.instance.collection("Hareketler").snapshots();
      stream.forEach((QuerySnapshot element) {
        for (int count = 0; count < element.docs.length; count++) {
          print(element.docs[count]["HareketIsim"].toString());
          growableList.add(element.docs[count]["HareketIsim"].toString());
        }
      });
    }

    print(growableList);
    return Column(children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(10.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 4),
                child: Theme(
                  data: Theme.of(context).copyWith(
                    canvasColor: Color.fromARGB(255, 35, 31, 61),
                  ),
                  child: DropdownButton<String>(
                    value: dropdownValue,
                    icon: const Icon(
                      Icons.arrow_downward,
                      color: Colors.white,
                      size: 17,
                    ),
                    elevation: 16,
                    style: const TextStyle(
                        color: Color.fromARGB(255, 255, 255, 255)),
                    onChanged: (String? newValue) {
                      setState(() {
                        dropdownValue = newValue!;
                      });
                    },
                    items: growableList
                        .map<DropdownMenuItem<String>>((String value) {
                      return DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      );
                    }).toList(),
                  ),
                ),
              ),
            ),
...
...
...
...

Hi, i want to show my data in DropdownButton. Im sending data with growableList.

growableList is not fill first time but in second time its working.

How can i fix this. Thanks!

Its not important under 3 dots

Answer 1

If you're getting the data with by calling snapshots(), use a StreamBuilder to handle the asynchronous nature of the stream that it returns.

See for an example, the second code snippet in the FlutterFire documentation on listening for realtime changes:

class UserInformation extends StatefulWidget {
  @override
    _UserInformationState createState() => _UserInformationState();
}

class _UserInformationState extends State<UserInformation> {
  final Stream<QuerySnapshot> _usersStream = FirebaseFirestore.instance.collection('users').snapshots();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _usersStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }

        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
          Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
            return ListTile(
              title: Text(data['full_name']),
              subtitle: Text(data['company']),
            );
          }).toList(),
        );
      },
    );
  }
}