Os suspensos permitem que os usuários selecionem um único valor de uma lista de valores disponíveis e são um widget comum em qualquer aplicativo moderno.
Por exemplo, se você tiver um formulário com a seleção do país, existem dois widgets que você pode usar para mostrar os detalhes do país. Um é o botão de opção, que permite selecionar um único valor. A outra opção é uma lista suspensa.
Neste cenário, uma lista suspensa será o melhor widget porque você pode adicionar uma grande lista de países e, quando o usuário seleciona um determinado país, ele mostra apenas aquele país selecionado. Portanto, isso proporcionará uma melhor experiência de usuário ao usuário final.
Neste artigo, abordaremos esses tópicos e daremos uma ideia melhor sobre como criar e personalizar um menu suspenso no Flutter.
Criando um menu suspenso Identificando alterações de valor do menu suspenso Desativando o menu suspenso Estilizando o menu suspenso A diferença entre DropdownButtonFormField e DropdownButton
Criando uma lista suspensa
Existem basicamente dois tipos de widgets que você precisa para criar uma lista suspensa no Flutter.
DropdownButton DropdownMenuItem
O widget DropdownButton contém várias propriedades necessárias que nós precisa tornar o menu suspenso funcional. A principal propriedade necessária é a propriedade do item. A propriedade do item aceita uma lista de widgets DropdownMenuItem, que precisam mostrar as opções possíveis que podem ser selecionadas.
Neste exemplo, vamos criar uma lista suspensa que contém uma lista de nomes de países. Vou criar um método separado que retornará uma lista de widgets DropdownMenuItem que contêm nomes de países:
List
A seguir, crie um widget DropdownButton junto com uma propriedade de itens e defina o método que acabamos de criar para alimentar os valores no menu suspenso. Certifique-se de criá-lo como um widget com estado porque nós precisa alterar o estado do menu suspenso no estágio posterior.
Execute o aplicativo e você verá um widget suspenso, mas não poderá fazer nenhuma interação com ele.
Agora, vamos definir um inicialmente valor selecionado para a lista suspensa. A propriedade value do widget DropdownButton pode ser usada para definir o item atualmente selecionado, e podemos definir”USA”como o primeiro item selecionado:
class _DropdownItemState extends State
Agora você pode ver que”EUA”é exibido como um valor selecionado. Mesmo assim, você não pode fazer nenhuma interação com o menu suspenso. Isso porque ainda não implementamos como o menu suspenso deve se comportar ao alterar o valor. A próxima seção explicará como lidar com essas alterações de valor.
Identificando alterações de valores suspensos
O retorno de chamada onChange pode ser usado para identificar as alterações de valor. Ele retornará o valor selecionado e você pode alterar o estado da lista suspensa definindo o novo valor para a lista suspensa como abaixo:
DropdownButton (valor: selectedValue, onChanged: (String? NewValue) {setState (() { selectedValue=newValue !;});}, items: dropdownItems)
Agora você pode ver que o menu suspenso está funcionando conforme o esperado e pode selecionar um novo valor nele.
Desativando o menu suspenso
Definir onChange como nulo desativará o item suspenso. Se você definiu uma propriedade de valor, ela mostra esse valor como selecionado, mesmo que a lista suspensa esteja desabilitada:
DropdownButton (valor: selectedValue, style: TextStyle (color: Colors.red, fontSize: 30), onChanged: null, items: dropdownItems)
Se você quiser mostrar um texto de espaço reservado quando a lista suspensa estiver desabilitada, use a propriedade disabledHint. Ao usar esta propriedade, certifique-se de que a propriedade value não esteja definida:
DropdownButton (disabledHint: Text (“Não é possível selecionar”), style: TextStyle (color: Colors.red, fontSize: 30), onChanged: null , valor: null. items: dropdownItems)
Estilizando o menu suspenso
Aplicando ícones
Os ícones podem ser aplicados a um menu suspenso definindo a propriedade do ícone de the DropdownButton:
Widget build (BuildContext context) {return DropdownButton (value: selectedValue, icon: Icon (Icons.flag), onChanged: (String? newValue) {setState (() {selectedValue=newValue !;}) ;}, itens: dropdownItems); }
Alterar as cores dos itens suspensos
A propriedade dropdownColor permitirá que você defina uma cor de fundo para os itens suspensos. Isso mudará apenas a cor de fundo do item suspenso, não a cor do botão de seleção:
DropdownButton (valor: selectedValue, dropdownColor: Colors.green, onChanged: (String? NewValue) {setState (() {selectedValue=newValue !; });}, items: dropdownItems)
Alterar a cor e o tamanho do texto
A propriedade style permitirá que você altere o estilo relacionado ao texto, incluindo cor e tamanho. Você pode usar o widget TextStyle para definir o estilo relacionado ao texto para itens suspensos:
DropdownButton (valor: selectedValue, style: TextStyle (color: Colors.red, fontSize: 30), onChanged: (String? NewValue) { setState (() {selectedValue=newValue !;});}, items: dropdownItems)
A diferença entre DropdownButtonFormField e DropdownButton
DropdownButtonFormField fornece mais funcionalidades do que o widget DropdownButton normal.
Primeiro, se você precisar personalizar a aparência do menu suspenso, pode definir uma decoração personalizada definindo a propriedade de decoração do widget DropdownButtonFormField:
DropdownButtonFormField (decoration: InputDecoration (enabledBorder: OutlineInputBorder (borderSide: BorderSi de (color: Colors.blue, width: 2), borderRadius: BorderRadius.circular (20),), border: OutlineInputBorder (borderSide: BorderSide (color: Colors.blue, width: 2), borderRadius: BorderRadius.circular (20 ),), preenchido: verdadeiro, fillColor: Colors.blueAccent,), dropdownColor: Colors.blueAccent, valor: selectedValue, onChanged: (String? newValue) {setState (() {selectedValue=newValue !;}); }, items: dropdownItems)
Neste exemplo, se você deseja definir uma cor de fundo, você deve primeiro definir a propriedade preenchida de InputDecoration e definir uma cor para fillColor. Caso contrário, não mostrará o resultado adequado.
Outro recurso útil em DropdownButtonFormField é o suporte de validação embutido.
Para fazer isso funcionar, você deve usar este widget dentro de um Widget de formulário. Neste exemplo, ele verificará se o menu suspenso tem um valor e, se não tiver, mostrará a mensagem especificada no menu suspenso.
Essa validação será acionada quando o botão chamar a validação como _dropdownFormKey.currentState!.validate ():
class _DropdownItemState estende o estado
Conclusão
O widget suspenso pode ser usado em seu Flutter app para mostrar e selecionar um único valor de um grande conjunto de opções.
Se estiver usando um único menu suspenso, que não requer validação, você pode usar DropdownButton.
Se você for obrigado a aplicar a validação e se o menu suspenso vier no widget Form, é melhor usar DropdownButtonFormField porque tem mais personalização junto com suporte de validação embutido.
