Ton app Flutter est-elle prête pour l'iPhone Duo ?

L’iPhone Duo, le premier iPhone pliable d’Apple, a été mis en vente le 23 octobre dernier. Il soulève de nombreuses questions pour celles et ceux d’entre nous qui développent des applications : quelles seront les conséquences sur le développement ? Serons-nous obligés d’adapter nos apps à ce nouveau format pliable ? Et si oui, quelles difficultés cela implique-t-il ? Que se passe-t-il si nous ne les adaptons pas ? À quoi ressembleront-elles lorsque l’appareil sera plié ou déplié ? Quelles ressources Flutter propose-t-il pour adapter l’interface ?

Dans cet article, je vais essayer de répondre rapidement à toutes ces questions afin que tu saches clairement ce qui t’attend si tu distribues des applications pour iOS. À la fin, je te montrerai également une manière très simple d’adapter l’interface de ton app avec peu d’efforts afin qu’elle s’affiche correctement sur le nouvel iPhone Duo.

L’iPhone Duo change la façon dont ton app s’affiche

Pour bien comprendre ce qui se passe lorsque nous exécutons une app sur l’iPhone Duo, j’ai préparé cette app d’exemple extrêmement simple. Elle affiche une liste de notes et, lorsque nous appuyons sur l’une d’elles, nous accédons à un écran où nous pouvons consulter son contenu :

Voyons maintenant ce qui se passe si j’exécute cette même app sur un iPhone Duo. Je vais d’abord te montrer à quoi elle ressemble lorsqu’elle est compilée avec le SDK iOS 27.1, sans avoir apporté le moindre autre ajustement à l’interface :

Comme tu peux le voir, l’app se redimensionne pour occuper tout l’espace disponible. Lorsque l’appareil est plié, cela ne pose pas de problème majeur, car les dimensions et le format de l’écran extérieur sont relativement similaires à ceux d’un iPhone classique. Cependant, dès que l’utilisateur le déplie, une interface conçue pour une fenêtre de smartphone étroite s’étale sur toute la largeur de l’écran intérieur. Elle fonctionne, mais n’offre pas la meilleure expérience.

Adapter Flutter à l’iPhone Duo

Heureusement pour nous, Flutter propose un grand nombre de widgets et de ressources pour adapter l’interface, non seulement à l’iPhone Duo, mais aussi à n’importe quelle taille de fenêtre. En fait, je pense que le bon état d’esprit n’est pas « je vais adapter mon app Flutter à l’iPhone Duo », mais plutôt « je vais adapter mon app Flutter à de nouvelles tailles ». L’idée est de nous abstraire de l’appareil physique et de créer une interface responsive qui réagit dynamiquement à l’espace dont elle dispose.

Par exemple, avec très peu d’ajustements, nous pourrions réaliser une adaptation comme celle-ci :

Comme tu peux le voir, lorsque le Duo est plié, je conserve la disposition précédente. Une fois déplié, je profite de la largeur supplémentaire de l’écran intérieur pour afficher la liste des notes à gauche et le détail de la note sélectionnée à droite.

Cet effet peut être obtenu facilement en utilisant LayoutBuilder, un widget qui nous fournit les contraintes de taille qu’il reçoit de son widget parent. Lorsque ces contraintes changent, par exemple lorsque l’orientation de l’appareil change ou lorsque l’iPhone Duo est plié ou déplié, Flutter exécute à nouveau son builder, ce qui nous permet de choisir l’interface appropriée en fonction de l’espace disponible :

@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);
        },
      ),
    ),
  );
}

En plus de LayoutBuilder, j’utilise SafeArea dans cet exemple pour maintenir le contenu en dehors des zones occupées par l’interface système, la caméra et les coins arrondis. Flutter propose de nombreuses autres ressources pour créer des interfaces adaptatives : MediaQuery.sizeOf() permet de connaître la taille actuelle de la fenêtre de l’app ; Expanded et Flexible répartissent l’espace dans les lignes et les colonnes ; et ConstrainedBox permet de définir des limites minimales ou maximales pour éviter que le contenu ne s’étire trop. Et ce ne sont que quelques exemples : Flutter propose bien d’autres ressources pour adapter une interface à l’espace disponible.

Suis-je obligé d’adapter mon app à l’iPhone Duo ? Est-ce que cela en vaut la peine ?

Avant de déterminer s’il vaut la peine d’adapter ton app à l’iPhone Duo ou quel niveau de sophistication tu devrais appliquer, examinons d’abord l’exigence annoncée par Apple que tu dois garder à l’esprit :

Ces exigences ne t’obligent pas explicitement à créer une interface spécifique à l’iPhone Duo. Cependant, le fait d’exiger des captures propres à l’appareil semble indiquer qu’Apple attend de nous que nous vérifiions comment nos apps se comportent dessus et que nous corrigions, au minimum, les problèmes d’adaptation les plus évidents.

Alors, combien d’efforts vaut-il la peine de consacrer à cette adaptation ? La réponse dépendra beaucoup du type d’app et des attentes de ses utilisateurs. Dans mon cas, mes apps sont principalement utilisées sur des smartphones et les tablettes ne représentent qu’une part infime de mes utilisateurs. Il est raisonnable de penser que je n’aurai pas non plus beaucoup d’utilisateurs avec un iPhone Duo. Je réaliserai donc probablement l’adaptation minimale nécessaire pour que mes apps fonctionnent correctement dessus et pour respecter la nouvelle exigence de captures spécifiques à l’appareil.

Malgré tout, je ne mesurerais pas l’effort uniquement en fonction du nombre d’utilisateurs qui posséderont un iPhone Duo. Si ton app dispose déjà d’une interface flexible, obtenir un résultat satisfaisant peut ne nécessiter que très peu de changements. Si ce n’est pas le cas, adapter l’app au Duo peut t’aider à détecter des problèmes qui apparaîtront également sur les tablettes, dans les fenêtres redimensionnables ou sur de futurs formats. En ce sens, ce travail peut avoir une valeur qui dépasse cet appareil.

Conclusion

L’iPhone Duo est le nouveau jouet d’Apple et nous donne une raison supplémentaire de vérifier comment nos apps se comportent lorsqu’elles disposent de beaucoup plus d’espace. Comme je l’ai déjà indiqué, je te recommande de ne pas aborder cela comme « j’adapte mon app à l’iPhone Duo », mais comme « j’adapte mon app à différentes tailles de fenêtre ». De cette façon, le travail ne profitera pas seulement à cet appareil, mais aussi aux tablettes et à d’autres formats actuels ou futurs.

À la prochaine !