Mettere tutto insieme: una card di profilo riutilizzabile
Ora combiniamo quanto imparato in un widget riutilizzabile. Tre buone pratiche da seguire fin da subito:
- Estrai il widget in una classe separata (
ProfileCard) invece di annidare tutto nel build.
- Usa
const dove possibile: le decorazioni costanti vengono create una sola volta e migliorano le performance.
- Definisci le decorazioni ricorrenti in un unico punto (una classe
AppDecorations con costanti statiche), così mantieni lo stile coerente in tutta l'app.
Sostituisci l'intero HomePage con il codice seguente.
class AppDecorations {
const AppDecorations._();
static BoxDecoration card = BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFFE6E8EF)),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
offset: const Offset(0, 6),
blurRadius: 16,
),
],
);
static const BoxDecoration avatar = BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color(0xFF6A11CB), Color(0xFF2575FC)],
),
);
}
class ProfileCard extends StatelessWidget {
const ProfileCard({
super.key,
required this.nome,
required this.ruolo,
required this.iniziali,
});
final String nome;
final String ruolo;
final String iniziali;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: AppDecorations.card,
child: Row(
children: [
Container(
width: 56,
height: 56,
alignment: Alignment.center,
decoration: AppDecorations.avatar,
child: Text(
iniziali,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
nome,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 4),
Text(
ruolo,
style: TextStyle(color: Colors.grey.shade600),
),
],
),
),
const Icon(Icons.chevron_right),
],
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF2F4F8),
appBar: AppBar(title: const Text('BoxDecoration')),
body: ListView(
padding: const EdgeInsets.all(16),
children: const [
ProfileCard(
nome: 'Giulia Rossi',
ruolo: 'Flutter Developer',
iniziali: 'GR',
),
SizedBox(height: 12),
ProfileCard(
nome: 'Marco Bianchi',
ruolo: 'UI Designer',
iniziali: 'MB',
),
],
),
);
}
}
Risultato atteso
Vedi una lista di card bianche con bordo sottile e ombra morbida, ognuna con un avatar circolare a gradiente contenente le iniziali, nome, ruolo e una freccia a destra.
