Czy twoja aplikacja Flutter jest gotowa na iPhone Duo?

iPhone Duo, pierwszy składany iPhone Apple, trafił do sprzedaży 23 października. Wraz z nim pojawia się wiele pytań dla twórców aplikacji: co będzie oznaczał dla procesu tworzenia? Czy będziemy musieli dostosować nasze aplikacje do tego nowego składanego formatu? Jeśli tak, z jakimi trudnościami się to wiąże? Co się stanie, jeśli ich nie dostosujemy? Jak będą wyglądały po złożeniu i rozłożeniu urządzenia? Jakie narzędzia oferuje Flutter do dostosowania interfejsu?

W tym artykule postaram się szybko odpowiedzieć na wszystkie te pytania, żebyś wiedział, co cię czeka, jeśli dystrybuujesz aplikacje na iOS. Na końcu pokażę ci również bardzo prosty sposób na dostosowanie interfejsu aplikacji przy niewielkim nakładzie pracy, aby dobrze wyglądała na nowym iPhonie Duo.

iPhone Duo zmienia sposób wyświetlania twojej aplikacji

Żeby dobrze zrozumieć, co dzieje się po uruchomieniu aplikacji na iPhonie Duo, przygotowałem bardzo prostą aplikację demonstracyjną. Wyświetla listę notatek, a po dotknięciu jednej z nich przechodzimy do ekranu z jej treścią:

Zobaczmy teraz, co się stanie, gdy uruchomię tę samą aplikację na iPhonie Duo. Najpierw pokażę ci, jak wygląda po skompilowaniu z iOS 27.1 SDK, ale bez żadnych innych zmian w interfejsie:

Jak widzisz, aplikacja zmienia rozmiar, aby wypełnić całą dostępną przestrzeń. Gdy urządzenie jest złożone, nie stanowi to dużego problemu, ponieważ wymiary i proporcje zewnętrznego ekranu są stosunkowo podobne do zwykłego iPhone’a. Jednak gdy tylko użytkownik je rozłoży, interfejs zaprojektowany dla wąskiego okna smartfona rozciąga się na całą szerokość wewnętrznego ekranu. Działa, ale nie zapewnia najlepszych wrażeń.

Dostosowanie Fluttera do iPhone’a Duo

Na szczęście Flutter oferuje wiele widżetów i narzędzi do dostosowania interfejsu nie tylko do iPhone’a Duo, lecz także do dowolnego rozmiaru okna. Uważam, że właściwe podejście nie brzmi „dostosuję aplikację Flutter do iPhone’a Duo”, lecz raczej „dostosuję aplikację Flutter do nowych rozmiarów”. Chodzi o oderwanie się od fizycznego urządzenia i zbudowanie responsywnego interfejsu, który dynamicznie reaguje na dostępną przestrzeń.

Na przykład po wprowadzeniu bardzo niewielu zmian moglibyśmy uzyskać takie dostosowanie:

Jak widzisz, gdy Duo jest złożony, zachowuję poprzedni układ. Po rozłożeniu wykorzystuję dodatkową szerokość wewnętrznego ekranu, aby wyświetlić listę notatek po lewej i szczegóły wybranej notatki po prawej.

Ten efekt można łatwo osiągnąć za pomocą LayoutBuilder, widżetu, który udostępnia ograniczenia rozmiaru otrzymane od widżetu nadrzędnego. Gdy te ograniczenia się zmieniają, na przykład przy zmianie orientacji urządzenia albo podczas składania lub rozkładania iPhone’a Duo, Flutter ponownie wykonuje jego builder. Dzięki temu możemy wybrać odpowiedni interfejs w zależności od dostępnej przestrzeni:

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

Oprócz LayoutBuilder używam w tym przykładzie SafeArea, aby treść nie trafiała do obszarów zajętych przez interfejs systemowy, aparat i zaokrąglone narożniki. Flutter oferuje wiele innych narzędzi do tworzenia adaptacyjnych interfejsów: MediaQuery.sizeOf() pozwala sprawdzić bieżący rozmiar okna aplikacji; Expanded i Flexible rozdzielają przestrzeń w wierszach i kolumnach; a ConstrainedBox pozwala ustawić minimalne lub maksymalne ograniczenia, aby treść nie rozciągała się nadmiernie. To tylko kilka przykładów. Flutter oferuje znacznie więcej narzędzi do dostosowania interfejsu do dostępnej przestrzeni.

Czy muszę dostosować aplikację do iPhone’a Duo? Czy warto?

Zanim zastanowimy się, czy warto dostosować twoją aplikację do iPhone’a Duo i jak zaawansowana powinna być taka adaptacja, przyjrzyjmy się najpierw wymaganiu ogłoszonemu przez Apple, o którym musisz pamiętać:

Te wymagania nie zmuszają cię wprost do tworzenia interfejsu specjalnie dla iPhone’a Duo. Jednak wymóg dostarczenia zrzutów ekranu dla tego urządzenia wydaje się wskazywać, że Apple oczekuje od nas sprawdzenia, jak działają na nim nasze aplikacje, i poprawienia przynajmniej najbardziej oczywistych problemów z adaptacją.

Ile wysiłku warto więc poświęcić tej adaptacji? Odpowiedź w dużej mierze zależy od rodzaju aplikacji i oczekiwań jej użytkowników. W moim przypadku aplikacje są używane głównie na smartfonach, a tablety stanowią znikomy odsetek moich użytkowników. Rozsądnie jest założyć, że użytkowników z iPhone’em Duo również nie będzie wielu. Dlatego prawdopodobnie wykonam tylko minimalne zmiany potrzebne, aby moje aplikacje działały na nim prawidłowo i spełniały nowe wymaganie dotyczące zrzutów ekranu dla tego urządzenia.

Mimo to nie oceniałbym wysiłku wyłącznie na podstawie liczby użytkowników iPhone’a Duo. Jeśli twoja aplikacja ma już elastyczny interfejs, uzyskanie rozsądnego rezultatu może wymagać bardzo niewielu zmian. Jeśli nie, dostosowanie aplikacji do Duo może pomóc wykryć problemy, które pojawią się również na tabletach, w oknach o zmiennym rozmiarze lub na urządzeniach o przyszłych formatach. W tym sensie ta praca może przynieść wartość wykraczającą poza jedno urządzenie.

Podsumowanie

iPhone Duo to nowa zabawka Apple i kolejny powód, aby sprawdzić, jak nasze aplikacje zachowują się, gdy mają do dyspozycji znacznie więcej miejsca. Jak już wspomniałem, polecam myśleć nie „dostosowuję aplikację do iPhone’a Duo”, lecz „dostosowuję aplikację do różnych rozmiarów okna”. Dzięki temu praca przyniesie korzyści nie tylko temu urządzeniu, ale także tabletom oraz innym obecnym i przyszłym formatom.

Do następnego razu!