Struttura di base di un’app Flutter

Obiettivo

Capire e sperimentare la struttura fondamentale di una app Flutter utilizzando i widget MaterialApp, Scaffold, AppBar, NavigationBar, FloatingActionButton e Drawer.

1. MaterialApp

Descrizione

MaterialApp è il widget principale che configura l’intera app in stile Material Design. Offre gestione del tema, routing, localizzazione, transizioni, e molto altro. È la base per creare app moderne e coerenti con le linee guida di Google.

Gestione del tema

MaterialApp permette di definire:

• un theme (chiaro)
• un darkTheme (scuro)
• un themeMode (per scegliere quale usare)

Puoi anche usare ColorScheme.fromSeed per generare automaticamente una palette Material 3 da un solo colore base.

Esempio classico (Material 2):

MaterialApp(
  title: 'La mia prima app',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: MyHomePage(),
  debugShowCheckedModeBanner: false,
)

Esempio moderno (Material 3 con seed):

MaterialApp(
  title: 'App con tema generato',
  theme: ThemeData.from(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
    useMaterial3: true,
  ),
  darkTheme: ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.teal,
      brightness: Brightness.dark,
    ),
    useMaterial3: true,
  ),
  themeMode: ThemeMode.system,
  home: MyHomePage(),
)

Attributi utili

• title: Titolo visibile nel task switcher.
• theme: Tema principale dell’app (colori, stili).
• darkTheme: Tema per modalità scura.
• themeMode: Selettore tra chiaro, scuro o automatico.
• home: Widget di partenza dell’app.
• routes: Mappa delle rotte nominate.
• initialRoute: Rotta iniziale.
• debugShowCheckedModeBanner: Mostra o nasconde il banner DEBUG.

Alternative a MaterialApp

Anche se MaterialApp è lo standard per creare applicazioni Flutter in stile Material Design, non è l’unica opzione disponibile. Flutter offre altre strutture base per casi d’uso diversi:

1. CupertinoApp

Usata per creare app in stile iOS, con supporto a widget Cupertino.

CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      middle: Text('Titolo iOS'),
    ),
    child: Center(child: Text('Contenuto')),
  ),
)

2. WidgetsApp

È la base comune tra MaterialApp e CupertinoApp. Non fornisce widget grafici predefiniti, ma gestisce routing, localizzazione e navigazione.

WidgetsApp(
  color: Colors.white,
  builder: (context, child) => MyCustomApp(child: child),
  home: MyHomePage(),
)

3. App minimal senza struttura predefinita

Per esperimenti, librerie o ambienti altamente personalizzati:

void main() {
  runApp(
    Directionality(
      textDirection: TextDirection.ltr,
      child: Center(child: Text('App base senza MaterialApp')),
    ),
  );
}

App multipiattaforma: approccio consigliato

Per creare un’app Flutter multipiattaforma (Android e iOS) coerente con il sistema operativo, ci sono due approcci principali:

Approccio MaterialApp + widget adattivi

• Usa MaterialApp con useMaterial3: true
• Usa widget adattivi come Switch.adaptive, Scrollbar.adaptive, ecc.
• Personalizza il layout o stile usando Platform.isIOS dove serve

Esempio:

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
    useMaterial3: true,
  ),
  home: Platform.isIOS ? CupertinoStyledPage() : MaterialStyledPage(),
)

Confronto rapido degli approcci

Quando usare un’alternativa

• Vuoi replicare lo stile nativo iOS → usa CupertinoApp
• Vuoi una base pulita e neutra per widget personalizzati → usa WidgetsApp
• Stai creando un widget standalone o una libreria → usa solo ciò che serve, senza Material

Attributi utili

• title: Titolo visibile nel task switcher.
• theme: Tema principale dell’app (colori, stili).
• home: Widget di partenza dell’app.
• routes: Mappa delle rotte nominate.
• initialRoute: Rotta iniziale.
• debugShowCheckedModeBanner: Mostra o nasconde il banner DEBUG.

MaterialApp(
  title: 'La mia prima app',
  theme: ThemeData(primarySwatch: Colors.blue),
  home: MyHomePage(),
  debugShowCheckedModeBanner: false,
)

2. Scaffold

Descrizione

Scaffold è uno dei widget più importanti in Flutter perché fornisce la struttura visiva e logica di una schermata. Viene usato come contenitore principale di ogni “pagina” o vista dell’app. Integra automaticamente molti altri widget chiave del Material Design, come:

• AppBar: la barra superiore
• Drawer: il menu laterale
• FloatingActionButton: pulsante d’azione principale
• BottomNavigationBar: barra di navigazione in basso
• SnackBar, BottomSheet, FAB, ecc.

Scaffold si adatta bene al contesto (es. mostra correttamente il Drawer o il FAB) e gestisce automaticamente spazi come lo SafeArea, il rientro sotto tastiere o notch.

Attributi utili

• appBar: Una AppBar da visualizzare in alto.
• body: Contenuto principale della schermata.
• drawer: Menu laterale a scomparsa.
• bottomNavigationBar: Barra inferiore di navigazione, supporta BottomNavigationBar e NavigationBar.
• floatingActionButton: Pulsante d’azione fluttuante.
• backgroundColor: Colore dello sfondo.

Esempio

Scaffold(
  appBar: AppBar(title: Text('Home')),
  body: Center(child: Text('Contenuto principale')),
  bottomNavigationBar: NavigationBar(
    selectedIndex: 0,
    onDestinationSelected: (index) => print('Selezionato: \$index'),
    destinations: [
      NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
      NavigationDestination(icon: Icon(Icons.settings), label: 'Impostazioni'),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

3. AppBar

Descrizione

AppBar è una barra nella parte superiore dello schermo che può contenere un titolo, pulsanti di azione, icone e menu.

Attributi utili

• title: Un widget, tipicamente Text, che rappresenta il titolo.
• leading: Icona o widget visualizzato a sinistra (es. hamburger menu).
• actions: Lista di widget (tipicamente IconButton) visualizzati a destra.
• backgroundColor: Colore dello sfondo.
• elevation: Ombra sotto l’app bar.
• centerTitle: Per centrare il title true/false.

Esempio

AppBar(
  title: Text('Titolo'),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {})
  ],
)

4. BottomNavigationBar (NavigationBar)

Descrizione

BottomNavigationBar consente la navigazione tra diverse schermate principali di un’app. Si trova in basso e visualizza icone e testi.

Attributi utili

• items: Lista di elementi (BottomNavigationBarItem).
• currentIndex: Indice attualmente selezionato.
• onTap: Funzione callback al tap su un item.
• type: Tipo di visualizzazione (fixed o shifting).
• selectedItemColor: Colore dell’elemento selezionato.

Esempio

BottomNavigationBar(
  currentIndex: 0,
  onTap: (index) => print('Hai premuto la voce $index'),
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Impostazioni'),
  ],
)

5. FloatingActionButton

Descrizione

Un bottone rotondo che “fluttua” sopra il layout. Usato spesso per azioni principali (es. aggiungere, scrivere, creare).

Attributi utili

• onPressed: Funzione da eseguire al tap.
• child: Contenuto interno (di solito Icon).
• backgroundColor: Colore di sfondo.
• tooltip: Testo mostrato come tooltip.
• heroTag: Per transizioni animate.

Esempio

FloatingActionButton(
  onPressed: () => print('Premuto'),
  child: Icon(Icons.add),
  tooltip: 'Aggiungi',
)

6. Drawer

Descrizione

Drawer è un menu laterale che appare scorrendo o toccando l’icona del menu. Utile per la navigazione secondaria o opzioni generali.

Attributi utili

• child: Contenuto del Drawer (tipicamente ListView).
• elevation: Altezza dell’ombra.
• backgroundColor: Colore dello sfondo.
• width: Larghezza del menu.

Esempio

Drawer(
  child: ListView(// o a Column
    children: [
      DrawerHeader(child: Text('Menu')),
      ListTile(title: Text('Home'), onTap: () {}),
      ListTile(title: Text('Profilo'), onTap: () {}),
    ],
  ),
)