Flatter-Dropdown-Beispiel
In Flutter wird das Dropdown-Widget verwendet, um dem Benutzer eine Liste mit Optionen bereitzustellen. Dieses Widget wird häufig in Formularen verwendet, in denen der Benutzer eine Option aus einer Auswahlliste auswählen muss. Das Dropdown-Widget ist einfach zu verwenden und bietet Benutzern eine elegante und intuitive Möglichkeit, eine Option auszuwählen.
Erstellen eines Dropdown-Widgets
Das Erstellen eines Dropdown-Widgets in Flutter ist einfach. Um ein Dropdown-Widget zu erstellen, müssen Sie die Optionen angeben, die in der Liste angezeigt werden. Hier ist ein Beispiel für die Erstellung eines Dropdown-Widgets:
String dropdownValue = 'One';
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
In diesem Beispiel wird das Widget „DropdownButton“ erstellt und der Parameter „value“ auf „dropdownValue“ gesetzt. Der Parameter „items“ ist eine Liste von Zeichenfolgen, die in der Dropdown-Liste angezeigt werden. Der Parameter „onChanged“ ist auf eine Funktion festgelegt, die aufgerufen wird, wenn der Benutzer eine Option aus der Liste auswählt.
Anpassen des Dropdown-Widgets
Das Dropdown-Widget kann an den Stil und das Design Ihrer App angepasst werden. Hier sind einige Beispiele für die Anpassung des Dropdown-Widgets:
Ändern des Dropdown-Schaltflächensymbols
Um das Symbol zu ändern, das auf der Dropdown-Schaltfläche angezeigt wird, können Sie den Parameter „icon“ verwenden. Hier ist ein Beispiel:
DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_forward),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
In diesem Beispiel wird der Parameter „icon“ auf das Widget „Icon“ mit dem Symbol „Icons.arrow_forward“ gesetzt.
Ändern der Farbe der Dropdown-Schaltfläche
Um die Farbe der Dropdown-Schaltfläche zu ändern, können Sie den Parameter „style“ verwenden. Hier ist ein Beispiel:
DropdownButton<String>(
value: dropdownValue,
style: TextStyle(color: Colors.red),
items: <String>['One', 'Two', 'Three', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
In diesem Beispiel wird der Parameter „style“ auf ein „TextStyle“-Objekt gesetzt, wobei „color“ auf „Colors.red“ gesetzt ist.
Mehr Beispiele
Dies ist ein Beispiel für ein Flatter-Dropdown. Über Dropdowns können wir ein oder mehrere Elemente auswählen. Dropdowns nehmen normalerweise weniger Platz ein als andere Arten von Widgets, die Datenlisten wie Rasteransicht und Listenansicht anzeigen.
Für dieses Beispiel ist keine Abhängigkeit erforderlich.
(A). main.dart
Dies ist die einzige Datei, die Sie in diesem Projekt erstellen müssen.
Beginnen Sie mit dem Hinzufügen von Importen:
import 'package:flutter/material.dart';
Dieses „material.dart“ gibt uns Zugriff auf mehrere Flattermaterial-Designkomponenten, die wir verwenden können, einschließlich Dropdown.
Erstellen Sie MyAppState und erweitern Sie die Statusklasse. „MyApp“ ist ein benutzerdefiniertes StatefulWidget, für das der Status erstellt wird.
class MyAppState extends State<MyApp> {
Definieren Sie innerhalb dieser Klasse die Liste der Elemente, die im Dropdown-Menü gerendert werden:
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
Fügen Sie dann zwei weitere Instanzfelder hinzu, einschließlich einer Liste von Dropdown-Menüelementen und einer Zeichenfolge für das ausgewählte Element:
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
Überschreiben Sie dann die Klasse „initState()“:
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
Hier ist die Methode zum Erstellen und Abrufen der Dropdown-Menüelemente:
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
Hier ist die Methode zum Ändern der Dropdown-Elemente:
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Überschreiben Sie abschließend die Methode „build()“:
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
Hier ist der vollständige Code für „main.dart“:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
State<StatefulWidget> createState() {
return new MyAppState();
}
}
class MyAppState extends State<MyApp> {
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(List fruits) {
List<DropdownMenuItem<String>> items = new List();
for (String fruit in fruits) {
items.add(new DropdownMenuItem(value: fruit, child: new Text(fruit)));
}
return items;
}
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
appBar: new AppBar(
title: new Text("DropDown Button Example"),
),
body: new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Please choose a fruit: "),
new DropdownButton(
value: _selectedFruit,
items: _dropDownMenuItems,
onChanged: changedDropDownItem,
)
],
)),
),
),
);
}
}
Demo
Hier ist die Demo
Die Lizenz für den oben genannten Code ist Apache Version 2.0.
Abschluss
Das Dropdown-Widget ist ein wichtiges Widget in Flutter, das verwendet wird, um dem Benutzer eine Liste von Optionen bereitzustellen. Dieses Widget ist einfach zu verwenden und kann an den Stil und das Design Ihrer App angepasst werden. Mithilfe der bereitgestellten Beispiele können Sie ein Dropdown-Widget erstellen, das den Anforderungen Ihrer App entspricht.