108 – CARD Widget em FLUTTER – Flutter Curso Completo

Playlist: Curso Grátis de FLUTTER e DART Completo

Cartão – CARD em FLUTTER

Um Card, da biblioteca Material, contém informações de informações relacionadas e pode ser composto de praticamente qualquer widget, mas é frequentemente usado com o ListTile. O cartão tem um único filho, mas seu filho pode ser uma coluna, linha, lista, grade ou outro widget que suporte vários filhos. Por padrão, um cartão reduz seu tamanho para 0 por 0 pixels. Você pode usar o SizedBox para restringir o tamanho de um cartão.

Em Flutter, um cartão apresenta cantos ligeiramente arredondados e uma sombra, dando-lhe um efeito 3D. Alterar a propriedade de elevação de um cartão permite controlar o efeito de sombra. Definir a elevação para 24, por exemplo, eleva visualmente o cartão da superfície e faz com que a sombra se torne mais dispersa. Para obter uma lista de valores de elevação suportados, consulte Elevação nas diretrizes de material. A especificação de um valor não suportado desativa totalmente o sombreamento.

Resumo (cartão)
Implementa um cartão de material
Usado para apresentar nuggets de informações relacionadas
Aceita um único filho, mas esse filho pode ser um widget de linha, coluna ou outro que contém uma lista de filhos
Exibido com cantos arredondados e uma sombra
O conteúdo de um cartão não pode rolar
Da biblioteca de materiais
Exemplos (cartão)
Cartão contendo 3 ListTiles

Um Cartão contendo 3 ListTiles e dimensionado por um SizedBox. Um Divisor separa o primeiro e o segundo ListTiles.

Fonte do aplicativo: card_and_stack

Cartão contendo uma imagem, texto e botões

Um cartão contendo uma imagem e texto.

Código de dardos: cards_demo.dart da galeria Flutter

content_copy
Widget _buildCard () =MAIOR SizedBox (
    altura: 210,
    criança: Card (
      criança: Coluna (
        crianças: [
          ListTile (
            título: Texto (‘1625 Main Street’,
                style: TextStyle (fontWeight: FontWeight.w500)),
            subtítulo: Texto (‘My City, CA 99984’),
            levando: Ícone (
              Icons.restaurant_menu,
              cor: Colors.blue [500],
            )
          )
          Divisor(),
          ListTile (
            título: Texto (‘(408) 555-1212’,
                style: TextStyle (fontWeight: FontWeight.w500)),
            levando: Ícone (
              Icons.contact_phone,
              cor: Colors.blue [500],
            )
          )
          ListTile (
            title: Text (‘[email protected] ‘),
            levando: Ícone (
              Icons.contact_mail,
              cor: Colors.blue [500],
            )
          )
        ]
      )
    )
  );