Is je Flutter-app klaar voor iPhone Duo?

De iPhone Duo, Apples eerste opvouwbare iPhone, ging op 23 oktober in de verkoop. Daarmee ontstaan veel vragen voor ons als appontwikkelaars: wat betekent dit voor de ontwikkeling? Moeten we onze apps verplicht aanpassen aan dit nieuwe opvouwbare formaat? En zo ja, welke moeilijkheden brengt dat met zich mee? Wat gebeurt er als we ze niet aanpassen? Hoe zien ze eruit wanneer het toestel is opgevouwen en wanneer het is opengevouwen? Welke hulpmiddelen biedt Flutter om de interface aan te passen?

In dit artikel probeer ik al deze vragen snel te beantwoorden, zodat je weet wat je te wachten staat als je apps voor iOS verspreidt. Aan het einde laat ik je bovendien een heel eenvoudige manier zien om de interface van je app met weinig moeite aan te passen, zodat die er goed uitziet op de nieuwe iPhone Duo.

De iPhone Duo verandert hoe je app wordt weergegeven

Om goed te begrijpen wat er gebeurt wanneer we een app op de iPhone Duo uitvoeren, heb ik deze uiterst eenvoudige voorbeeldapp gemaakt. Ze toont een lijst met notities en wanneer we op een notitie tikken, gaan we naar een scherm waar we de inhoud kunnen bekijken:

Laten we nu kijken wat er gebeurt als ik dezelfde app op een iPhone Duo uitvoer. Eerst laat ik zien hoe ze eruitziet wanneer ze is gebouwd met de iOS 27.1 SDK, zonder verdere aanpassingen aan de interface:

Zoals je ziet, wordt de app aangepast om alle beschikbare ruimte te vullen. Wanneer het toestel is opgevouwen, is dat geen groot probleem, omdat de afmetingen en beeldverhouding van het buitenste scherm relatief veel lijken op die van een gewone iPhone. Maar zodra de gebruiker het toestel openvouwt, verspreidt een interface die voor een smal smartphonevenster is ontworpen zich over de volledige breedte van het binnenste scherm. Het werkt, maar biedt niet de beste ervaring.

Flutter aanpassen aan de iPhone Duo

Gelukkig biedt Flutter een groot aantal widgets en hulpmiddelen om de interface niet alleen aan de iPhone Duo, maar aan elk vensterformaat aan te passen. Volgens mij is de juiste gedachte niet “ik pas mijn Flutter-app aan de iPhone Duo aan”, maar eerder “ik pas mijn Flutter-app aan nieuwe formaten aan”. Het idee is om los te komen van het fysieke toestel en een responsieve interface te bouwen die dynamisch reageert op de beschikbare ruimte.

Met heel weinig aanpassingen zouden we bijvoorbeeld zoiets kunnen maken:

Zoals je ziet, behoud ik de eerdere indeling wanneer de Duo is opgevouwen. Wanneer ik hem openvouw, gebruik ik de extra breedte van het binnenste scherm om de lijst met notities links en de details van de geselecteerde notitie rechts weer te geven.

Dit effect is eenvoudig te bereiken met LayoutBuilder, een widget die ons de groottebeperkingen geeft die hij van zijn bovenliggende widget ontvangt. Wanneer die beperkingen veranderen, bijvoorbeeld wanneer de oriëntatie van het toestel verandert of wanneer de iPhone Duo wordt opgevouwen of opengevouwen, voert Flutter zijn builder opnieuw uit. Zo kunnen we de juiste interface kiezen op basis van de beschikbare ruimte:

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

Naast LayoutBuilder gebruik ik in dit voorbeeld SafeArea om de inhoud weg te houden van gebieden die door de systeeminterface, de camera en afgeronde hoeken worden ingenomen. Flutter biedt nog veel meer hulpmiddelen om aanpasbare interfaces te maken: met MediaQuery.sizeOf() kun je de huidige grootte van het appvenster opvragen; Expanded en Flexible verdelen de ruimte binnen rijen en kolommen; en met ConstrainedBox kun je minimale of maximale grenzen instellen om te voorkomen dat inhoud te ver wordt uitgerekt. Dit zijn maar een paar voorbeelden. Flutter biedt nog veel meer hulpmiddelen om een interface aan de beschikbare ruimte aan te passen.

Moet ik mijn app aanpassen aan de iPhone Duo? Is het de moeite waard?

Voordat we bekijken of het de moeite waard is om je app aan de iPhone Duo aan te passen en hoe uitgebreid die aanpassing moet zijn, kijken we eerst naar de door Apple aangekondigde vereiste waarmee je rekening moet houden:

Deze vereisten verplichten je niet uitdrukkelijk om een specifieke interface voor de iPhone Duo te maken. Dat Apple eigen schermafbeeldingen voor het toestel vereist, lijkt er echter op te wijzen dat het verwacht dat we controleren hoe onze apps erop werken en op zijn minst de duidelijkste aanpassingsproblemen oplossen.

Hoeveel moeite is deze aanpassing dan waard? Het antwoord hangt sterk af van het type app en van wat de gebruikers ervan verwachten. Mijn apps worden voornamelijk op smartphones gebruikt en tablets vormen maar een heel klein deel van mijn gebruikers. Het is redelijk om aan te nemen dat ik ook niet veel gebruikers met een iPhone Duo zal hebben. Daarom zal ik waarschijnlijk alleen de minimale aanpassingen uitvoeren die nodig zijn om mijn apps er goed op te laten werken en aan de nieuwe vereiste voor toestelspecifieke schermafbeeldingen te voldoen.

Toch zou ik de inspanning niet uitsluitend afmeten aan het aantal gebruikers dat een iPhone Duo zal hebben. Als je app al een flexibele interface heeft, zijn misschien maar heel weinig wijzigingen nodig voor een redelijk resultaat. Zo niet, dan kan het aanpassen van de app aan de Duo je helpen problemen te ontdekken die ook op tablets, in vensters waarvan het formaat kan veranderen of op toekomstige vormfactoren zullen verschijnen. In die zin kan het werk waarde hebben die verder gaat dan dit toestel.

Conclusie

De iPhone Duo is Apples nieuwe speeltje en geeft ons nog een reden om te bekijken hoe onze apps zich gedragen wanneer ze veel meer ruimte tot hun beschikking hebben. Zoals ik al zei, raad ik je aan om dit niet te zien als “ik pas mijn app aan de iPhone Duo aan”, maar als “ik pas mijn app aan verschillende vensterformaten aan”. Zo komt het werk niet alleen dit toestel ten goede, maar ook tablets en andere huidige of toekomstige vormfactoren.

Tot de volgende keer!