App Flutter của bạn đã sẵn sàng cho iPhone Duo chưa?

iPhone Duo, chiếc iPhone gập đầu tiên của Apple, đã được bán ra vào ngày 23 tháng 10 vừa qua. Sự xuất hiện của nó đặt ra nhiều câu hỏi cho những người phát triển ứng dụng: nó sẽ tác động thế nào tới việc phát triển? Chúng ta có bắt buộc phải điều chỉnh app cho kiểu thiết bị gập mới này không? Nếu có, việc đó sẽ gặp những khó khăn gì? Nếu không điều chỉnh thì chuyện gì sẽ xảy ra? App sẽ hiển thị ra sao khi thiết bị được gập và mở? Flutter cung cấp những công cụ nào để điều chỉnh giao diện?

Trong bài viết này, tôi sẽ cố gắng trả lời nhanh tất cả những câu hỏi đó để bạn hiểu rõ điều gì sắp tới nếu đang phân phối ứng dụng cho iOS. Cuối bài, tôi cũng sẽ chỉ cho bạn một cách rất đơn giản để điều chỉnh giao diện app với ít công sức, giúp nó hiển thị đẹp trên iPhone Duo mới.

iPhone Duo thay đổi cách app của bạn hiển thị

Để hiểu rõ điều gì xảy ra khi chạy một app trên iPhone Duo, tôi đã chuẩn bị một app mẫu cực kỳ đơn giản. App chỉ hiển thị danh sách ghi chú và khi nhấn vào một ghi chú, ta sẽ chuyển sang màn hình xem nội dung của nó:

Bây giờ hãy xem điều gì xảy ra khi tôi chạy chính app đó trên iPhone Duo. Trước tiên, tôi sẽ cho bạn thấy nó trông thế nào khi được build bằng iOS 27.1 SDK nhưng chưa thực hiện bất kỳ điều chỉnh nào khác cho giao diện:

Như bạn thấy, app thay đổi kích thước để lấp đầy toàn bộ không gian có sẵn. Khi thiết bị được gập, đây không phải vấn đề lớn vì kích thước và tỷ lệ khung hình của màn hình ngoài tương đối giống một chiếc iPhone thông thường. Tuy nhiên, ngay khi người dùng mở thiết bị, giao diện được thiết kế cho một cửa sổ smartphone hẹp sẽ trải rộng trên toàn bộ chiều ngang của màn hình trong. App vẫn hoạt động, nhưng không mang lại trải nghiệm tốt nhất.

Điều chỉnh Flutter cho iPhone Duo

May mắn là Flutter cung cấp rất nhiều widget và công cụ để điều chỉnh giao diện, không chỉ cho iPhone Duo mà cho mọi kích thước cửa sổ. Thực ra, tôi nghĩ cách nhìn đúng không phải là “tôi sẽ điều chỉnh app Flutter cho iPhone Duo”, mà là “tôi sẽ điều chỉnh app Flutter cho các kích thước mới”. Ý tưởng là không phụ thuộc vào thiết bị vật lý và xây dựng một giao diện responsive phản ứng linh hoạt theo không gian có sẵn.

Ví dụ, chỉ với rất ít thay đổi, ta có thể tạo ra một kiểu điều chỉnh như thế này:

Như bạn thấy, khi Duo được gập, tôi giữ nguyên bố cục trước đó. Khi mở thiết bị, tôi tận dụng chiều rộng bổ sung của màn hình trong để hiển thị danh sách ghi chú bên trái và chi tiết ghi chú được chọn bên phải.

Hiệu ứng này có thể được tạo dễ dàng bằng LayoutBuilder, một widget cung cấp cho ta các ràng buộc kích thước mà nó nhận từ widget cha. Khi các ràng buộc đó thay đổi, chẳng hạn khi hướng thiết bị thay đổi hoặc khi iPhone Duo được gập hay mở, Flutter sẽ chạy lại builder. Nhờ vậy, ta có thể chọn giao diện phù hợp với không gian có sẵn:

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

Ngoài LayoutBuilder, trong ví dụ này tôi dùng SafeArea để giữ nội dung nằm ngoài những vùng bị giao diện hệ thống, camera và các góc bo tròn chiếm dụng. Flutter còn cung cấp nhiều công cụ khác để tạo giao diện thích ứng: MediaQuery.sizeOf() cho phép kiểm tra kích thước hiện tại của cửa sổ app; Expanded và Flexible phân chia không gian trong hàng và cột; còn ConstrainedBox cho phép đặt giới hạn tối thiểu hoặc tối đa để nội dung không bị kéo giãn quá mức. Đây chỉ là một vài ví dụ. Flutter còn có nhiều công cụ khác để điều chỉnh giao diện theo không gian có sẵn.

Tôi có bắt buộc phải điều chỉnh app cho iPhone Duo không? Có đáng không?

Trước khi xem việc điều chỉnh app cho iPhone Duo có đáng hay không, hoặc nên đầu tư tới mức nào, hãy xem yêu cầu mà Apple đã công bố và bạn cần lưu ý:

Những yêu cầu này không bắt buộc bạn phải tạo một giao diện riêng cho iPhone Duo. Tuy nhiên, việc Apple yêu cầu ảnh chụp màn hình dành riêng cho thiết bị dường như cho thấy họ kỳ vọng ta kiểm tra cách app hoạt động trên đó và ít nhất sửa những vấn đề thích ứng rõ ràng nhất.

Vậy nên dành bao nhiêu công sức cho việc điều chỉnh này? Câu trả lời phụ thuộc nhiều vào loại app và kỳ vọng của người dùng. Trong trường hợp của tôi, các app chủ yếu được dùng trên smartphone và tablet chỉ chiếm một phần rất nhỏ trong số người dùng. Có thể hợp lý khi cho rằng tôi cũng sẽ không có nhiều người dùng iPhone Duo. Vì vậy, tôi có lẽ chỉ thực hiện những điều chỉnh tối thiểu cần thiết để app hoạt động tốt trên Duo và đáp ứng yêu cầu mới về ảnh chụp màn hình riêng cho thiết bị.

Dù vậy, tôi sẽ không đánh giá công sức chỉ dựa trên số người dùng có iPhone Duo. Nếu app đã có giao diện linh hoạt, một kết quả hợp lý có thể chỉ cần rất ít thay đổi. Nếu chưa, việc điều chỉnh app cho Duo có thể giúp bạn phát hiện những vấn đề cũng sẽ xuất hiện trên tablet, trong cửa sổ có thể thay đổi kích thước hoặc trên các kiểu thiết bị tương lai. Theo nghĩa đó, công việc này có thể mang lại giá trị vượt ra ngoài thiết bị này.

Kết luận

iPhone Duo là món đồ chơi mới của Apple và cho chúng ta thêm một lý do để xem lại cách app hoạt động khi có nhiều không gian hơn đáng kể. Như đã nói, tôi khuyên bạn không nên tiếp cận theo hướng “tôi đang điều chỉnh app cho iPhone Duo”, mà là “tôi đang điều chỉnh app cho nhiều kích thước cửa sổ khác nhau”. Bằng cách đó, công việc này không chỉ có lợi cho thiết bị này mà còn cho tablet và những kiểu thiết bị hiện tại hoặc tương lai khác.

Hẹn gặp lại lần sau!