CODEWITHSUNDEEP
flutterdartgoogle-cloud-firestore
Fedy Belaid
Fedy Belaid

Reputation: 165

Flutter DropdownButton not showing items

i'm trying to get a list of elements from the cloud firestore and then pass them into DropdownButtonFormField items, the thing is that i'm able to print them in the console but they are not being shown in the DropdownButtonFormField.

Here is my code:

List<String> companies = [];

  Future getCompanies() async {
    await FirebaseFirestore.instance
        .collection('users_web')
        .get()
        .then((value) {
      value.docs.forEach((element) {
        companies.add(element['nom']);
        print(companies.toList());
      });
    });
  }

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

The DropdownButtonFormField:

DropdownButtonFormField<String>(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
  hint: Text('Sélectionner votre société'),
  items: companies.map(buildMenuItem).toList(),
  onChanged: (value) {
    setState(() {
      company = value!;
    });
  },
  validator: (value) {
    if (!isChecked) {
      if (value == null) {
        return 'Ce champ ne doit pas être vide';
      }
    }
  },
  value: company,
  isExpanded: true,
  iconSize: 26,
  icon: Padding(
    padding: const EdgeInsets.only(right: 8.0),
    child: Icon(
      Icons.arrow_drop_down,
      color: Colors.black,
    ),
  ),
),

I'd be grateful for any help, thanks in advance!

Upvotes: 1

Views: 106

Answers (2)

Ivo
Ivo

Reputation: 23179

The problem is that your data is fetched async. Your screen is build before the getCompanies is finished. The best way would be to use a FutureBuilder but calling a setState after the data is loaded might be good enough for your case

  Future getCompanies() async {
    await FirebaseFirestore.instance
        .collection('users_web')
        .get()
        .then((value) {
      value.docs.forEach((element) {
        companies.add(element['nom']);
        print(companies.toList());
      });
    });
    setState((){});
  }

Upvotes: 3

lou_codes
lou_codes

Reputation: 141

companies is a List of Strings so you can put it as is in the items: field

BEFORE:
 items: companies.map(buildMenuItem).toList(), 
AFTER:
 items: companies,

Upvotes: -1

Related Questions