Guia completo para o widget Card no Flutter: criando cartões bonitos com recursos avançados
O widget Card no framework Flutter permite criar superfícies com sombras e cantos arredondados, ideais para exibir informações em artigos, listas e outras seções da interface do usuário. Este widget possui diversas propriedades que permitem personalizar a aparência do cartão de acordo com suas preferências.
O widget Card aceita um widget filho que serve como conteúdo do cartão. O exemplo a seguir demonstra como inserir texto dentro de um cartão:
Card(
child: Text('This is a card'),
)
2. Definindo a cor:
Usando a propriedade `color`, você pode alterar a cor de fundo do cartão. Neste exemplo, ele exibe um cartão colorido:
Card(
color: Colors.blue,
child: Text('Colored Card'),
)
3. Aumento da altitude
Essa elevationpropriedade controla a altura da sombra da carta. Valores maiores para essa propriedade criam uma sombra mais alta. Aqui está uma carta com a altura aumentada:
Card(
elevation: 8,
child: Text('Elevated Card'),
)
4. Forma
Utilizando essa shapepropriedade, você pode alterar o formato dos cantos do cartão. Por exemplo, você pode arredondar os cantos:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Text('Rounded Corners Card'),
)
5. Margem
Você pode definir a margem do cartão usando a marginpropriedade:
Card(
margin: EdgeInsets.all(16.0),
child: Text('Margin Card'),
)
6. Controle de borda em primeiro plano
Utilizando essa borderOnForegroundpropriedade, você pode controlar se a borda do cartão é colocada em primeiro plano ou não:
Card(
borderOnForeground: false,
child: Text('Border Not on Foreground Card'),
)
7. Comportamento de corte
Essa clipBehaviorpropriedade determina como o conteúdo dentro do cartão é recortado. Os valores possíveis incluem Clip.none`true`, Clip.hardEdge`false` e Clip.antiAlias`false`.
Card(
clipBehavior: Clip.antiAlias,
child: Text('Anti-aliased Clip Card'),
)
8. Contêiner Semântico
Se esta propriedade for verdadeira true, o cartão é definido como um contêiner semântico; caso contrário, a semântica dos filhos é mesclada com o contêiner semântico envolvente mais próximo que seja verdadeiro true.
Card(
semanticContainer: true,
child: Text('Semantic Container Card'),
)
9. Cor da Sombra
Você pode definir a cor da sombra usando a shadowColorpropriedade:
Card(
shadowColor: Colors.red,
child: Text('Shadow Color Card'),
)
10. Raio da Borda
Utilizando essa borderRadiuspropriedade, você pode definir o raio dos cantos do cartão:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
child: Text('Custom Border Radius Card'),
)
Ao utilizar os diversos recursos do Cardwidget no Flutter, você pode criar cartões com diferentes aparências que estejam em conformidade com os padrões do Material Design. Essas funcionalidades permitem criar interfaces de usuário visualmente mais atraentes, fáceis de entender e intuitivas.
0
20
20