I have created an app in Flutter to use for my company's inventory. One of the widgets in the app is a DropdownButton that is populated with elements from Firebase Cloud Firestore. All the menu items are loading properly, but when I select an item I get a red screen.

I am fairly new to Flutter so I mostly copied the code from a tutorial, so I find it odd that it does not work.

class _ReviewChangesScreenState extends State<ReviewChangesScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  DocumentSnapshot job;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text('Review Changes'),
        ),
        body: Column(children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Form(
                key: _formKey,
                child: StreamBuilder(
                  stream: Firestore.instance.collection('jobs').snapshots(),
                  builder: (BuildContext context,
                      AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (!snapshot.hasData) return new Text('Loading...');
                    return new DropdownButton(
                      value: job,
                      onChanged: (val) {
                        setState(() {
                          job = val;
                        });
                      },
                      items: snapshot.data.documents
                          .map<DropdownMenuItem<DocumentSnapshot>>(
                              (DocumentSnapshot document) {
                        return new DropdownMenuItem<DocumentSnapshot>(
                          child: Text(document.data['jobCode']),
                          value: document,
                        );
                      }).toList(),
                    );
                  },
                )),
          ),
        ]));
  }
}

This is the error I receive when I try to select an item in the menu.

I/flutter ( 7320): The following assertion was thrown building StreamBuilder<QuerySnapshot>(dirty, state:
I/flutter ( 7320): _StreamBuilderBaseState<QuerySnapshot, AsyncSnapshot<QuerySnapshot>>#22b54):
I/flutter ( 7320): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 609 pos 15: 'items == null ||
I/flutter ( 7320): items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) => item.value ==
I/flutter ( 7320): value).length == 1': is not true.

Flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17763.529],
    locale en-CA)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.3)
[√] Connected device (1 available)

I'm really stumped on what the issue is.


Solution 1: Daniel V.

The error tells you that your items or value parameters of the Dropdown constructor doesn't satisfy the requirements of the Dropdown. Take a look at the code:

https://github.com/flutter/flutter/blob/v1.5.4-hotfix.2/packages/flutter/lib/src/material/dropdown.dart#L609

assert(items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1)

In human translation:

  • items must not be null
  • items must contain at least 1 element
  • value must not be null
  • items must contain a element that has a value of value

Your input data, violate one of these conditions.