1
resposta

Layout de

Gostaria de saber a possibilidade via Flutter para criação de layout neste formato e com estes tipos de funcionalidade de arrastar e habilitar opções do exemplo PAGO

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá! Tudo bem?

Analisando a imagem que você compartilhou, é possível sim criar um layout com essa aparência e funcionalidades de arrastar e habilitar opções usando Flutter.

Para o layout, você pode utilizar um ListView para a lista de jogadores, com ListTile para cada item. O design pode ser personalizado com Container, BoxDecoration e outros widgets de estilo para alcançar o visual desejado, como as cores e divisórias.

Para a funcionalidade de arrastar (drag and drop), você pode usar o widget ReorderableListView ou a biblioteca flutter_reorderable_list. Isso permitirá que os usuários reordenem os itens na lista, conforme mostrado na imagem.

Quanto aos botões de alternância (toggle), o Flutter oferece o widget Switch, que você pode personalizar para se parecer com os da imagem. Você pode controlar o estado do Switch com uma variável booleana e atualizá-la quando o usuário interagir com o componente.

Para a funcionalidade de chamar, você pode utilizar um FlatButton ou ElevatedButton com um ícone de telefone e implementar a ação desejada ao pressionar o botão.

Aqui está um exemplo básico de como você pode começar a estruturar o layout:

ListView.builder(
  itemCount: listaJogadores.length,
  itemBuilder: (context, index) {
    final jogador = listaJogadores[index];
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(jogador.fotoUrl),
      ),
      title: Text(jogador.nome),
      subtitle: Text(jogador.posicao),
      trailing: Switch(
        value: jogador.pago,
        onChanged: (bool value) {
          setState(() {
            jogador.pago = value;
          });
        },
      ),
      onTap: () {
        // Implemente a ação de chamar aqui
      },
    );
  },
);

Lembre-se de que você precisará gerenciar o estado dos switches e da lista para refletir as mudanças na interface do usuário. Isso pode ser feito com o uso de StatefulWidget e gerenciamento de estado adequado.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software