hesham shawky
hesham shawky

Reputation: 1151

Flutter DropdownButtonFormField not working with long lists

I have a form with multiple DropdownButtonFormField and all of them are working fine except one and it was kinda weird as was throwing an error not related to what I have discovered after a while, troubleshooting.

The error was: ( The error happens on selection items and setState )

items == null || value == null || items.where((DropdownMenuItem item) => item.value == value).length == 1': is not true.

The weird thing is, it's 100% sure the selected value is from the list, As how possible selecting value not in the list!!

Also, I have already the same exact DropdownButtonFormField working fine but just with different data! from the same API endpoint

So I start to see the difference here between this DropdownButtonFormField and the other one! and it was the length of my data!

The working dropdown was between 2 to 6 items and the one that doesn't work and throwing the above error on selection was over 50 items!

So I have edited my backend and reduce the array to 6 items and DropdownButtonFormField back to work fine!, but of course, that's not a solution I still need all my +50 items in the dropdown!!

Code to the DropdownButtonFormField widget:

FutureBuilder(
  future: form,
  builder: (BuildContext context,
      AsyncSnapshot<Forms.Form> snapshot) {
    if (!snapshot.hasData) {
      return Padding(
        padding: null,
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    } else {
      return DropdownButtonFormField(
        isExpanded: true,
        validator: (value) => value == null
            ? 'من فضلك اكمل الحقل المطلوب'
            : null,
        value: _selectedClass,
        hint: Text('الفرقة'),
        items:
            snapshot.data.classes.map((collageYear) {
          return DropdownMenuItem(
            value: collageYear.value,
            child: Text(collageYear.name),
          );
        }).toList(),
        onChanged: (val) {
          setState(() {
            _selectedClass = val;
          });
        },
      );
    }
  },
),

My flutter doctor -v:

[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.14.5 18F132, locale en-EG)
    • Flutter version 1.12.13+hotfix.8 at /Users/esham/Development/flutter
    • Framework revision 0b8abb4724 (3 weeks ago), 2020-02-11 11:44:36 -0800
    • Engine revision e1e6ced81d
    • Dart version 2.7.0


[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/esham/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /Users/esham/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/esham/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3.1, Build version 11C504
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] VS Code (version 1.42.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.8.1

[✓] Connected device (1 available)
    • Redmi Note 8 Pro • hev4t4bqo7hyvsnf • android-arm64 • Android 9 (API 28)

! Doctor found issues in 1 category.

Upvotes: 0

Views: 828

Answers (1)

GrahamD
GrahamD

Reputation: 3165

The assertion in dropdown.dart (that is triggering the error message) is the following:

assert(items == null || items.isEmpty || value == null ||
          items.where((DropdownMenuItem<T> item) {
            return item.value == value;
          }).length == 1,
            'There should be exactly one item with [DropdownButton]\'s value: '
            '$value. \n'
            'Either zero or 2 or more [DropdownMenuItem]s were detected '
            'with the same value',
          ),

As you see, it is telling you that either the selected item does not exist in the list (which I assume can only happen if you have edited the value in the field) or there are duplicate items in your list. I suggest putting a print statement in your code immediately after

items: snapshot.data.classes.map((collageYear) {

to see what is coming back in the snapshot and then compare that output with what you think you have.

PS. I have a dropdown with 250 items (albeit from a list of constant values) that works fine so it is not the length. It has to be a data problem.

Upvotes: 1

Related Questions