La tua app Flutter è pronta per iPhone Duo?

L’iPhone Duo, il primo iPhone pieghevole di Apple, è stato messo in vendita lo scorso 23 ottobre. Con il suo arrivo sorgono molte domande per chi sviluppa applicazioni: cosa comporterà a livello di sviluppo? Saremo obbligati ad adattare le nostre app a questo nuovo formato pieghevole? E, se sì, quali difficoltà comporterà? Cosa succede se non le adattiamo? Come appariranno quando il dispositivo è piegato e quando è aperto? Quali risorse offre Flutter per adattare l’interfaccia?

In questo articolo cercherò di rispondere rapidamente a tutte queste domande, così saprai cosa ti aspetta se distribuisci applicazioni per iOS. Alla fine ti mostrerò anche un modo molto semplice per adattare l’interfaccia della tua app con poco sforzo, in modo che si veda bene sul nuovo iPhone Duo.

L’iPhone Duo cambia il modo in cui viene visualizzata la tua app

Per capire bene cosa succede quando eseguiamo un’app su iPhone Duo, ho preparato questa semplicissima app di esempio. Mostra un elenco di note e, toccandone una, passiamo a una schermata in cui possiamo visualizzarne il contenuto:

Ora vediamo cosa succede se eseguo la stessa app su un iPhone Duo. Per prima cosa ti mostrerò come appare compilata con l’SDK iOS 27.1, ma senza aver apportato altre modifiche all’interfaccia:

Come puoi vedere, l’app viene ridimensionata per occupare tutto lo spazio disponibile. Quando il dispositivo è piegato non è un grosso problema, perché le dimensioni e le proporzioni dello schermo esterno sono relativamente simili a quelle di un iPhone tradizionale. Tuttavia, non appena l’utente lo apre, un’interfaccia progettata per una finestra stretta da smartphone si distribuisce su tutta la larghezza dello schermo interno. Funziona, ma non offre l’esperienza migliore.

Adattare Flutter all’iPhone Duo

Fortunatamente Flutter mette a disposizione tantissimi widget e risorse per adattare l’interfaccia non solo all’iPhone Duo, ma a qualsiasi dimensione della finestra. In realtà, credo che la mentalità giusta non sia «adatterò la mia app Flutter all’iPhone Duo», ma piuttosto «adatterò la mia app Flutter a nuove dimensioni». L’idea è astrarci dal dispositivo fisico e costruire un’interfaccia responsive che reagisca dinamicamente allo spazio disponibile.

Per esempio, con pochissime modifiche potremmo realizzare un adattamento come questo:

Come puoi vedere, quando il Duo è piegato mantengo la disposizione precedente. Quando lo apro, sfrutto la larghezza aggiuntiva dello schermo interno per mostrare l’elenco delle note a sinistra e il dettaglio della nota selezionata a destra.

Questo effetto si può ottenere facilmente utilizzando LayoutBuilder, un widget che ci fornisce i vincoli di dimensione che riceve dal widget genitore. Quando questi vincoli cambiano, per esempio quando cambia l’orientamento del dispositivo o quando pieghiamo o apriamo l’iPhone Duo, Flutter esegue di nuovo il suo builder, permettendoci di scegliere l’interfaccia più adatta allo spazio disponibile:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

Oltre a LayoutBuilder, in questo esempio utilizzo SafeArea per mantenere il contenuto fuori dalle zone occupate dall’interfaccia di sistema, dalla fotocamera e dagli angoli arrotondati. Flutter offre molte altre risorse per creare interfacce adattive: MediaQuery.sizeOf() permette di conoscere le dimensioni attuali della finestra dell’app; Expanded e Flexible distribuiscono lo spazio all’interno di righe e colonne; e ConstrainedBox permette di impostare limiti minimi o massimi per evitare che il contenuto si allarghi troppo. E questi sono solo alcuni esempi: Flutter offre molte altre risorse per adattare un’interfaccia allo spazio disponibile.

Devo adattare la mia app all’iPhone Duo? Ne vale la pena?

Prima di stabilire se vale la pena adattare la tua app all’iPhone Duo o quale livello di sofisticazione dovresti applicare, vediamo innanzitutto il requisito annunciato da Apple che devi tenere presente:

Questi requisiti non ti obbligano esplicitamente a creare un’interfaccia specifica per iPhone Duo. Tuttavia, il fatto che Apple richieda screenshot dedicati al dispositivo sembra indicare che si aspetti che controlliamo come si comportano le nostre app e che correggiamo, come minimo, i problemi di adattamento più evidenti.

Quindi, quanto sforzo vale la pena dedicare a questo adattamento? La risposta dipenderà molto dal tipo di app e da ciò che si aspettano i suoi utenti. Nel mio caso, le mie app vengono utilizzate soprattutto su smartphone e i tablet rappresentano una parte minuscola dei miei utenti. È ragionevole pensare che non avrò molti utenti con un iPhone Duo, quindi probabilmente realizzerò l’adattamento minimo necessario affinché le mie app funzionino correttamente e per rispettare il nuovo requisito degli screenshot specifici per il dispositivo.

Detto questo, non valuterei lo sforzo solo in base al numero di utenti che avranno un iPhone Duo. Se la tua app dispone già di un’interfaccia flessibile, ottenere un risultato ragionevole può richiedere pochissime modifiche. In caso contrario, adattare l’app al Duo può aiutarti a individuare problemi che compariranno anche sui tablet, nelle finestre ridimensionabili o su futuri formati. In questo senso, il lavoro può avere un valore che va oltre questo dispositivo.

Conclusione

L’iPhone Duo è il nuovo giocattolo di Apple e ci dà un motivo in più per verificare come si comportano le nostre app quando hanno molto più spazio a disposizione. Come ho già detto, ti consiglio di non affrontare la questione come «sto adattando la mia app all’iPhone Duo», ma come «sto adattando la mia app a diverse dimensioni della finestra». In questo modo, il lavoro non andrà a beneficio solo di questo dispositivo, ma anche dei tablet e di altri formati attuali o futuri.

Alla prossima!