1

Sou novo no Flutter e criei um DropdownButton no qual funciona perfeitamente. Porém preciso que o mesmo quando aberto, não preencha a tela inteira como mostra a imagem 1 e 2. Preciso que o DropdownButton abra da localização atual dele para baixo (mostrado na imagem 3), para que se o usuário se arrependa de ter aberto o DropdownButton consiga recolher o Dropdown e não seja obrigado a selecionar uma opção para que o DropdownButton seja recolhido ou utilizar da opção voltar do próprio aparelho. Isso é possível ou precisarei usar outro Widget?

Segue meu código abaixo:

DropdownButton<String>(
          isExpanded: true,
          value: expansionValue,
          icon: Icon(Icons.arrow_downward),
          iconSize: 28,
          elevation: 16,
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
          onChanged: (String newValue) {
            setState(() {
              expansionValue = newValue;
            });
          },
          items: <String>['Box-1', 'Box-2', 'Box-3', 'Box-4','Box-5', 'Box-6',
            'Box-7', 'Box-8', "Box-9", "Box-10", "Box-11", "Box-12", "Box-13",
            "Box-14", "Box-15", "Box-16", "Box-17"]
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600)),
            );
          }).toList(),
        ),

Imagem 1

inserir a descrição da imagem aqui

Imagem 2

inserir a descrição da imagem aqui

Imagem 3 (como preciso que fique)

inserir a descrição da imagem aqui

1
  • Esse é um problema que o Flutter ainda não resolveu... Como pode ver nessa issue. Caso queira aplicar um "workaround" (Famosa Gambiarra) pode tentar o que está sugerido nesta resposta Commented 27/11/2020 às 17:15

1 Resposta 1

0
  • Resposta curta:

Oficialmente não tem como atingir o resultado desejado. Tem umas soluções (gambiarras) na internet que adaptam o código original para o seu objetivo.

  • Resposta longa:

Pesquisando pelas propriedades da classe DropDownButton nenhuma aparenta representar o comportamento que você deseja.

Existe a propriedade itemHeight, que junto com talvez a isDense possa ajudar, dependendo da situação, embora esteja longe de ser genérico e ideal (Requer que não existam muitos itens e que o tamanho de cada um seja calculado estaticamente). No seu caso-exemplo já não serviria.

Olhando aqui na rede, achei essa resposta, em inglês, que retrata exatamente sua situação. A solução apresentada pelo usuário foi criar um DropDownButton Customizado, que é idêntico ao oficial do Flutter, porém com uma propriedade height que caso ela esteja definida, envolve o dialog de seleção de itens em uma SizedBox com altura máxima definida. O próprio autor da resposta que mencionei acima forneceu um Gist com essa alteração que você pode importar em seu projeto e usar adicionando um prefixo (alias ou apelido) de importação. Nesse exemplo, o prefixo é custom:

 import 'custom_dropdown.dart' as custom;
[...] 
custom.DropdownButtonFormField(
    height: //Sua Altura aqui
),
[...]

custom.DropdownMenuItem(
                child: Text("Sample Tex"),
                value: "any_value",
              ),

Essa solução também não é ideal. Cada novidade que a equipe do Flutter adicionar na classe de DropDownButton não será refletida na sua versão customizada. Essa resposta teve sua última revisão em Setembro de 2019 justamente com atualização deste código, por conta disto.

Uma issue no repositório oficial está aberta sobre esse problema, e existe um comentário de ontem (26/11/2020) ainda pedindo solução. Ou seja, está confirmado que não existe uma maneira oficial de fazer isso, e não se sabe quando vai ser adicionada essa funcionalidade ao framework, porém é algo que já se está ciente e requisitado.

Nesta issue, um usuário fez uma nova versão do código customizado acima, porém adicionando uma nova funcionalidade de offset para o topo da página. Isto é, a lista dos itens terá uma distância mínima do topo da página. Justamente para o usuário ter o espaço de clicar fora. Essa foi atualizada no último dia 3 de junho e você pode obter a versão dele deste repositório, aqui. Coloquei como curiosidade, o link da linha da modificação do offset. O seu uso é semelhante ao código original que coloquei acima, porém com a propriedade offsetAmount definida.

Para o seu caso, uma combinação dessas duas propriedades deve resolver. Colocar uma distância mínima para o topo da tela e/ou uma altura máxima para a lista de itens. Porém essa solução deve ser atualizada com cada modificação do Flutter e um dia no futuro (Quem sabe?) a equipe incorpore essa solução à biblioteca oficial.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .