Assemblare la schermata completa ed evitare gli errori tipici
Uniamo tutti i pezzi in un'unica schermata scrollabile. Usiamo SingleChildScrollView per evitare il famigerato overflow giallo/nero quando la tastiera o uno schermo piccolo riducono lo spazio.
Checklist degli errori più comuni
Unable to load asset: assets/images/prodotto.png → il file non è dichiarato nel pubspec, il percorso ha un refuso, oppure l'indentazione YAML è sbagliata.- Ho aggiunto l'asset ma non si vede → l'hot reload non ricostruisce il bundle: ferma l'app e rilanciala con
flutter run (full restart).
- Il font non cambia → il valore di
fontFamily nel codice deve coincidere esattamente con family nel pubspec (maiuscole comprese).
RenderFlex overflowed by N pixels → un Column troppo alto: avvolgilo in SingleChildScrollView o usa Expanded/Flexible per i figli elastici.- Immagine deformata → stai forzando
width e height senza fit: aggiungi BoxFit.cover o BoxFit.contain.
- App pesantissima → PNG da 4000px per un'anteprima da 100px. Ridimensiona e comprimi le immagini prima di includerle.
class ProdottoPage extends StatelessWidget {
const ProdottoPage({super.key});
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return Scaffold(
appBar: AppBar(title: const Text('Scheda prodotto')),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image.asset(
'assets/images/prodotto.png',
width: double.infinity,
height: 220,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
height: 220,
color: Colors.grey.shade200,
alignment: Alignment.center,
child: const Icon(Icons.broken_image_outlined, size: 48),
),
),
),
const SizedBox(height: 16),
Text('Zaino da trekking 30L', style: textTheme.headlineSmall),
const SizedBox(height: 4),
Text(
'89,90 €',
style: textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 12),
Row(
children: [
...List.generate(
5,
(i) => Icon(
i < 4 ? Icons.star_rounded : Icons.star_border_rounded,
size: 22,
color: Colors.amber.shade700,
),
),
const SizedBox(width: 8),
Text('4.0 (128)', style: textTheme.bodySmall),
],
),
const SizedBox(height: 16),
Text(
'Leggero, impermeabile e con schienale traspirante. '
'Perfetto per escursioni in giornata.',
style: textTheme.bodyMedium?.copyWith(height: 1.5),
),
const SizedBox(height: 24),
Text('Galleria', style: textTheme.titleMedium),
const SizedBox(height: 8),
ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(
'https://picsum.photos/600/400',
width: double.infinity,
height: 180,
fit: BoxFit.cover,
loadingBuilder: (context, child, progress) =>
progress == null
? child
: const SizedBox(
height: 180,
child: Center(child: CircularProgressIndicator()),
),
errorBuilder: (_, __, ___) => const SizedBox(
height: 180,
child: Center(child: Text('Immagine non disponibile')),
),
),
),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
child: FilledButton.icon(
onPressed: () {},
icon: const Icon(Icons.shopping_cart_outlined),
label: const Text('Aggiungi al carrello'),
),
),
],
),
),
);
}
}
Risultato atteso
Una schermata prodotto scrollabile con immagine locale, prezzo, stelle, descrizione con font Poppins, immagine remota e pulsante d'acquisto, senza errori di overflow.
