Exemplo de lista suspensa Flutter
No Flutter, o widget Dropdown é usado para fornecer uma lista de opções ao usuário. Este widget é comumente usado em formulários onde o usuário é solicitado a selecionar uma opção em uma lista de opções. O widget suspenso é fácil de usar e fornece uma maneira elegante e intuitiva para os usuários selecionarem uma opção.
Criando um widget suspenso
Criar um widget suspenso no Flutter é simples. Para criar um widget suspenso, você precisa especificar as opções que serão exibidas na lista. Aqui está um exemplo de como criar um widget suspenso:
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(),
);
Neste exemplo, o widget DropdownButton é criado e o parâmetro value é definido como dropdownValue. O parâmetro items é uma lista de strings que serão exibidas na lista suspensa. O parâmetro onChanged é definido como uma função que será chamada quando o usuário selecionar uma opção da lista.
Personalizando o widget suspenso
O widget suspenso pode ser personalizado para se adequar ao estilo e design do seu aplicativo. Aqui estão alguns exemplos de como personalizar o widget Dropdown:
Alterando o ícone do botão suspenso
Para alterar o ícone exibido no botão suspenso, você pode usar o parâmetro ícone. Aqui está um exemplo:
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;
});
},
);
Neste exemplo, o parâmetro icon é definido para o widget Icon com o ícone Icons.arrow_forward.
Alterando a cor do botão suspenso
Para alterar a cor do botão suspenso, você pode usar o parâmetro estilo. Aqui está um exemplo:
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;
});
},
);
Neste exemplo, o parâmetro style é definido como um objeto TextStyle com o color definido como Colors.red.
Mais exemplos
Este é um exemplo suspenso flutuante. Através dos Dropdowns podemos selecionar um ou mais itens. Os menus suspensos normalmente ocupam um espaço menor do que outros tipos de widgets que exibem listas de dados como gridview e listview.
Este exemplo não requer nenhuma dependência.
(a). main.dart
Este é o único arquivo que você precisa criar neste projeto.
Comece adicionando importações:
import 'package:flutter/material.dart';
Esse material.dart nos dá acesso a vários componentes de design de materiais flutuantes para usar, incluindo o menu suspenso.
Crie o MyAppState, estendendo a classe de estado. O MyApp é um StatefulWidget personalizado para o qual o estado está sendo criado.
class MyAppState extends State<MyApp> {
Dentro desta classe defina a lista de itens que serão renderizados no dropdown:
List _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
Em seguida, adicione mais dois campos de instância, incluindo uma lista de itens de menu suspenso e uma string para conter o item selecionado:
List<DropdownMenuItem<String>> _dropDownMenuItems;
String _selectedFruit;
Em seguida, sobrescreva a classe initState():
void initState() {
_dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
_selectedFruit = _dropDownMenuItems[0].value;
super.initState();
}
Aqui está o método para criar e obter os itens do menu suspenso:
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;
}
Aqui está o método para alterar os itens suspensos:
void changedDropDownItem(String selectedFruit) {
setState(() {
_selectedFruit = selectedFruit;
});
}
Finalmente substitua o método 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,
)
],
)),
),
),
);
}
Aqui está o código completo para 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,
)
],
)),
),
),
);
}
}
Demonstração
Aqui está a demonstração
A Licença para o código acima é Apache Versão 2.0.
Conclusão
O widget Dropdown é um widget importante no Flutter usado para fornecer uma lista de opções ao usuário. Este widget é fácil de usar e pode ser personalizado para se adequar ao estilo e design do seu aplicativo. Usando os exemplos fornecidos, você pode criar um widget suspenso que atenda aos requisitos do seu aplicativo.