Stai sviluppando un'app Flutter e ti ritrovi a dover scegliere tra il look Material di Google e quello Cupertino di Apple. Il cliente vuole un’esperienza nativa su entrambe le piattaforme, ma il tuo brand ha una sua identità — non vuoi che sembri un clone di sistema. Il punto è: Flutter ti dà entrambi i toolkit, ma usarli bene richiede strategia, non solo copia-incolla di widget. Noi, di Meteora Web, lavoriamo con Flutter da anni e abbiamo visto sviluppatori perdersi tra componenti che sembravano fuori posto su una piattaforma o l’altra. In questa guida ti mostriamo come combinare Material Design, Cupertino e widget personalizzati per ottenere un’UI che sembra nativa, ma è inequivocabilmente tua.
Perché scegliere Material Design o Cupertino per la UI Flutter?
La domanda non è “quale è meglio”, ma “quale funziona per il tuo utente finale”. Su Android, l’utente si aspetta ombre, elevazione, ripple effect, bottoni rialzati. Su iOS, preferisce superfici piatte, blur, animazioni fluide e navigation bar trasparenti. Flutter ti dà Material (google_fonts, ThemeData) e Cupertino (CupertinoPageRoute, CupertinoNavigationBar). La scelta sbagliata? Usare solo Material su iOS — l’utente lo percepisce come “strano”, anche se non sa spiegare perché. Noi partiamo sempre dalla piattaforma target. Se l’app è solo per Android, tutto Material. Se è ibrida, usiamo un approccio adattivo: rileviamo la piattaforma a runtime e carichiamo il widget appropriato.
Sponsored Protocol
Come rilevare la piattaforma in Flutter
Usa Theme.of(context).platform o defaultTargetPlatform. Esempio base:
import 'dart:io' show Platform;
Widget build(BuildContext context) {
if (Platform.isIOS) {
return CupertinoNavigationBar(
middle: Text('Profilo'),
);
} else {
return AppBar(
title: Text('Profilo'),
);
}
}Attenzione: Platform non funziona in web; per app web usa Theme.of(context).platform. Noi lo usiamo con un fallback Material come default.
Come combinare Material e Cupertino in una sola app Flutter?
Non puoi mischiare widget Material e Cupertino nella stessa schermata senza coerenza visiva. Scegli un “tema dominante” e usa l’altro solo per componenti specifici (es. CupertinoSliverNavigationBar su iOS, AppBar su Android). Noi creiamo un AdaptiveWidget:
class AdaptiveWidget extends StatelessWidget {
final Widget Function(BuildContext) materialBuilder;
final Widget Function(BuildContext) cupertinoBuilder;
const AdaptiveWidget({Key? key, required this.materialBuilder, required this.cupertinoBuilder}) : super(key: key);
@override
Widget build(BuildContext context) {
switch (Theme.of(context).platform) {
case TargetPlatform.iOS:
return cupertinoBuilder(context);
default:
return materialBuilder(context);
}
}
}Poi lo usi così:
Sponsored Protocol
AdaptiveWidget(
materialBuilder: (ctx) => MaterialButton(onPressed: (){}, child: Text('Salva')),
cupertinoBuilder: (ctx) => CupertinoButton.filled(onPressed: (){}, child: Text('Salva')),
)Errore comune: dimenticare di gestire le differenze di padding e dimensioni. I bottoni Cupertino sono più alti e hanno più padding orizzontale. Testa sempre su dispositivo reale.
Come creare widget Flutter personalizzati che rispettano la piattaforma?
I widget personalizzati sono il cuore di un’app che non assomiglia a “l’ennesima app Flutter”. La chiave è estendere StatelessWidget o StatefulWidget, ma usando il Tema ereditato per adattare colori, spazi e stili. Noi costruiamo i nostri widget partendo da un CustomTheme che definisce palette, font, elevazioni. Poi nel widget usiamo Theme.of(context) per prelevare i valori corretti.
Esempio: Card personalizzata adattiva
class AdaptiveCard extends StatelessWidget {
final Widget child;
const AdaptiveCard({Key? key, required this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
final platform = Theme.of(context).platform;
if (platform == TargetPlatform.iOS) {
return Container(
decoration: BoxDecoration(
color: CupertinoTheme.of(context).scaffoldBackgroundColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: CupertinoColors.separator, width: 0.5),
),
padding: EdgeInsets.all(16),
child: child,
);
} else {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Padding(padding: EdgeInsets.all(16), child: child),
);
}
}
}Nota: su iOS usiamo bordi sottili e nessuna ombra (Cupertino è piatto), su Android usiamo ombra e angoli più piccoli. Piccole differenze che fanno la differenza percepita dall'utente.
Sponsored Protocol
Quali sono gli errori più comuni quando si personalizzano widget Flutter?
Ecco tre errori che vediamo spesso nei progetti che ci arrivano da altri sviluppatori:
- Ignorare il tema globale — Hardcodare colori e dimensioni invece di usare
Theme.of(context). Quando il cliente chiede un restyling, devi cambiare centinaia di widget. - Non testare su schermi piccoli — Un LayoutBuilder con MediaQuery è obbligatorio. Su iPhone SE un bottone con padding 24 può diventare inutilizzabile.
- Mischiare stili di navigazione — Usare
CupertinoNavigationBarconMaterialPageRoutecrea transizioni strane. Su iOS usaCupertinoPageRoute, su AndroidMaterialPageRoute.
Noi risolviamo con un wrapper di routing adattivo:
class AdaptiveRoute {
static Route<T> fadeThroughPlatform<T>(Widget page) {
if (Theme.of(navigatorKey.currentContext!).platform == TargetPlatform.iOS) {
return CupertinoPageRoute(builder: (_) => page);
}
return MaterialPageRoute(builder: (_) => page);
}
}Come integrare widget personalizzati con Material Design e Cupertino senza rompere l'accessibilità?
L'accessibilità (a11y) è spesso dimenticata. Semantic widget è il tuo amico. Quando crei un widget custom, avvolgilo in Semantics per dare etichette e ruoli. Esempio per un bottone custom:
Sponsored Protocol
Semantics(
label: 'Aggiungi al carrello',
button: true,
onTap: () { /* azione */ },
child: GestureDetector(
onTap: () { /* azione */ },
child: Container(
decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(8)),
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
child: Text('Aggiungi', style: TextStyle(color: Colors.white)),
),
),
)Inoltre, assicurati che il contrasto dei colori soddisfi le linee guida WCAG. Noi usiamo ColorFiltered o pacchetti come contrast per verificare.
Strumenti per velocizzare lo sviluppo di UI Flutter personalizzate
Non reinventare la ruota. Usa pacchetti stabili e ben mantenuti:
- flutter_screenutil — Adatta dimensioni a schermi diversi. Indispensabile per widget custom.
- provider o riverpod — Per gestire lo stato del tema e delle preferenze utente (es. dark mode).
- google_fonts — Font personalizzati senza asset manuali.
- cupertino_icons — Icone native iOS per quando usi Cupertino.
Noi abbiamo un template interno che include già un tema adattivo, routing platform-aware e widget custom base. Puoi partire da qui per risparmiare settimane.
Sponsored Protocol
Cosa fare adesso
Abbiamo visto come combinare Material Design, Cupertino e widget personalizzati in Flutter senza sacrificare coerenza o identità di brand. Ora tocca a te:
- Analizza la tua app attuale — Se già usi Flutter, controlla quante volte hai hardcodato colori o padding. Sostituiscili con reference al tema.
- Implementa un AdaptiveWidget per i componenti principali (bottoni, card, barre di navigazione). Testa su iOS e Android.
- Costruisci un widget personalizzato per un elemento che usi spesso (es. un campo di input con validazione). Avvolgilo in
Semantics. - Leggi la documentazione ufficiale di Flutter su Material widgets e Cupertino widgets.
- Scopri la nostra pillar su Flutter se vuoi un’infarinatura completa su sviluppo mobile con un unico codice: App Mobile con Flutter — La Pillar Definitiva.
Ricorda: un’UI non è bella perché è piena di animazioni, ma perché ogni pixel comunica qualcosa. Noi, di Meteora Web, curiamo ogni dettaglio perché sappiamo che il fatturato del cliente passa da lì.
