Flutter: DropdownButton verwenden und Eigenschaften

DropdownButton ist ein Auswahl-Widget, das unter Android als Spinner bekannt ist und beim Antippen eine Liste anzeigt. Es eignet sich ideal, um mehrere Optionen anzubieten, von denen genau eine gewählt wird.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Grundlegende Verwendung

Mit dem DropdownButton wählt man einen Eintrag aus einer Liste:

String? selectedValue;

DropdownButton<String>(
  value: selectedValue,
  hint: Text('Make a selection'),
  items: ['Option 1', 'Option 2', 'Option 3'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
)

Wichtige Eigenschaften

Eigenschaft	Beschreibung
value	Der ausgewählte Wert
hint	Widget, das ohne Auswahl angezeigt wird
items	Liste der DropdownMenuItem
onChanged	Funktion, die bei einer Änderung aufgerufen wird
isExpanded	Passt die Breite an das übergeordnete Widget an
underline	Widget für die Unterstreichung
icon	Symbol des Aufklapp-Pfeils
dropdownColor	Hintergrundfarbe der aufgeklappten Liste

DropdownButtonFormField

Innerhalb von Formularen sollte DropdownButtonFormField bevorzugt werden. Es unterstützt die Validierung.

DropdownButtonFormField<String>(
  value: selectedValue,
  decoration: InputDecoration(
    labelText: 'Category',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.category),
  ),
  items: categories.map((String category) {
    return DropdownMenuItem<String>(
      value: category,
      child: Text(category),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please select a category';
    }
    return null;
  },
)

Angepasste DropdownMenuItem

Sie können jeden Eintrag individuell gestalten:

DropdownMenuItem<String>(
  value: 'premium',
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 8),
    child: Row(
      children: [
        Icon(Icons.star, color: Colors.amber),
        SizedBox(width: 10),
        Text('Premium Membership'),
        Spacer(),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text('Recommended', style: TextStyle(color: Colors.white, fontSize: 10)),
        ),
      ],
    ),
  ),
)

Zusammenfassung

• DropdownButton: Flutter-Gegenstück zum Android-Spinner
• DropdownMenuItem: Steht für einen Listeneintrag
• DropdownButtonFormField: Für die Validierung in Formularen
• isExpanded: Steuert die Breite
• onChanged: Erfasst Änderungen der Auswahl

DropdownButton gehört zu den meistgenutzten Widgets, um von Nutzern eine einzelne Auswahl einzuholen.