Una card composita con immagine, testo e azioni
Il pattern più diffuso è la card "verticale": immagine in alto, testo al centro, pulsanti in basso. Si costruisce con una Column dentro la Card.
Punti da ricordare:
- l'immagine deve stare come primo figlio della
Column, senza Padding, per arrivare a filo dei bordi;
AspectRatio (o SizedBox(height: ...)) evita che l'immagine cambi altezza durante il caricamento;BoxFit.cover riempie lo spazio senza deformare la foto;- per allineare i bottoni a destra usa
Align oppure Row(mainAxisAlignment: MainAxisAlignment.end).
Qui usiamo un'immagine di rete: ricorda che su Android serve il permesso INTERNET (già presente di default nei progetti Flutter).
class ArticoloCard extends StatelessWidget {
const ArticoloCard({super.key});
@override
Widget build(BuildContext context) {
return Card(
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AspectRatio(
aspectRatio: 16 / 9,
child: Image.network(
'https://picsum.photos/800/450',
fit: BoxFit.cover,
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return const Center(child: CircularProgressIndicator());
},
),
),
Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Weekend in montagna',
style: Theme.of(context).textTheme.titleLarge,
),
const SizedBox(height: 8),
Text(
'Tre itinerari facili da percorrere in giornata, '
'con partenza a meno di un\'ora dalla città.',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(onPressed: () {}, child: const Text('Condividi')),
const SizedBox(width: 8),
FilledButton(onPressed: () {}, child: const Text('Leggi')),
],
),
),
const SizedBox(height: 8),
],
),
);
}
}
Risultato atteso
Una scheda con immagine a filo dei bordi arrotondati, titolo, descrizione e due pulsanti allineati a destra.
