Evitare l'overflow con SingleChildScrollView
Prova a ruotare il dispositivo in orizzontale o ad aprire l'app su uno schermo piccolo: comparirà il classico nastro giallo e nero con il messaggio A RenderFlex overflowed by X pixels.
La soluzione è rendere la pagina scorrevole con SingleChildScrollView, che permette al suo unico figlio di essere più alto dello schermo.
Attenzione però: dentro uno scroll non puoi usare Spacer o Expanded, perché l'altezza disponibile diventa illimitata. La tecnica standard per avere "scroll quando serve, bottoni in fondo quando c'è spazio" è combinare LayoutBuilder, ConstrainedBox e IntrinsicHeight.
In alternativa, se vuoi la massima semplicità, sostituisci lo Spacer con un SizedBox(height: 32) e avvolgi tutto in SingleChildScrollView. Qui vediamo la versione completa e robusta.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 32),
const CircleAvatar(
radius: 48,
child: Icon(Icons.person, size: 48),
),
const SizedBox(height: 16),
const Text(
'Giulia Rossi',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
const Text(
'Flutter developer a Milano',
textAlign: TextAlign.center,
),
const SizedBox(height: 24),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
_Statistica(valore: '128', etichetta: 'Progetti'),
SizedBox(width: 32),
_Statistica(valore: '2.4k', etichetta: 'Follower'),
],
),
const SizedBox(height: 24),
const TextField(
decoration: InputDecoration(
labelText: 'Bio',
border: OutlineInputBorder(),
),
),
const Spacer(),
FilledButton(
onPressed: () {},
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: Text('Modifica profilo'),
),
),
const SizedBox(height: 16),
OutlinedButton(
onPressed: () {},
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: Text('Condividi'),
),
),
const SizedBox(height: 24),
],
),
),
),
);
},
),
),
);
}
Risultato atteso
Su schermi grandi i bottoni restano in basso grazie allo Spacer; su schermi piccoli o quando si apre la tastiera la pagina diventa scorrevole e il nastro di overflow sparisce.
