แอป Flutter ของคุณพร้อมสำหรับ iPhone Duo หรือยัง?

iPhone Duo ซึ่งเป็น iPhone แบบพับได้รุ่นแรกของ Apple เริ่มวางจำหน่ายเมื่อวันที่ 23 ตุลาคมที่ผ่านมา การมาถึงของมันทำให้คนพัฒนาแอปอย่างเรามีคำถามมากมาย เช่น จะส่งผลต่อการพัฒนาอย่างไร เราจะต้องปรับแอปให้เข้ากับรูปแบบพับได้นี้หรือไม่ ถ้าต้องปรับ จะมีความยากอะไรบ้าง ถ้าไม่ปรับจะเกิดอะไรขึ้น แอปจะดูเป็นอย่างไรเมื่ออุปกรณ์พับและกางออก และ Flutter มีเครื่องมืออะไรให้ใช้ปรับอินเทอร์เฟซบ้าง

ในบทความนี้ผมจะพยายามตอบคำถามทั้งหมดอย่างรวดเร็ว เพื่อให้คุณเข้าใจว่าสิ่งใดกำลังจะเกิดขึ้นถ้าคุณเผยแพร่แอปสำหรับ iOS และในตอนท้ายผมจะแสดงวิธีง่าย ๆ ที่ใช้แรงไม่มากในการปรับอินเทอร์เฟซของแอปให้ดูดีบน iPhone Duo รุ่นใหม่ด้วย

iPhone Duo เปลี่ยนวิธีแสดงผลแอปของคุณ

เพื่อให้เข้าใจชัดเจนว่าเกิดอะไรขึ้นเมื่อเราเรียกใช้แอปบน iPhone Duo ผมจึงเตรียมแอปตัวอย่างที่เรียบง่ายมาก แอปนี้แสดงรายการโน้ต และเมื่อแตะโน้ตใดโน้ตหนึ่ง เราจะไปยังหน้าจอที่ดูเนื้อหาของโน้ตนั้นได้

ทีนี้มาดูกันว่าจะเกิดอะไรขึ้นเมื่อผมเรียกใช้แอปเดียวกันบน iPhone Duo ก่อนอื่นผมจะแสดงให้ดูว่าแอปเป็นอย่างไรเมื่อ build ด้วย iOS 27.1 SDK แต่ยังไม่ได้ปรับอินเทอร์เฟซส่วนอื่นเลย

อย่างที่เห็น แอปจะปรับขนาดให้เต็มพื้นที่ทั้งหมดที่มีอยู่ เมื่ออุปกรณ์พับอยู่ เรื่องนี้ไม่ใช่ปัญหาใหญ่ เพราะขนาดและอัตราส่วนของหน้าจอด้านนอกค่อนข้างใกล้เคียงกับ iPhone ทั่วไป แต่ทันทีที่ผู้ใช้กางอุปกรณ์ อินเทอร์เฟซที่ออกแบบมาสำหรับหน้าต่างสมาร์ตโฟนแคบ ๆ จะขยายเต็มความกว้างของหน้าจอด้านใน แอปยังทำงานได้ แต่ไม่ได้มอบประสบการณ์ที่ดีที่สุด

การปรับ Flutter ให้เข้ากับ iPhone Duo

โชคดีที่ Flutter มีวิดเจ็ตและเครื่องมือจำนวนมากสำหรับปรับอินเทอร์เฟซ ไม่ใช่แค่ให้เข้ากับ iPhone Duo แต่รวมถึงหน้าต่างทุกขนาดด้วย ที่จริงแล้วผมคิดว่าแนวคิดที่ถูกต้องไม่ใช่ “ฉันจะปรับแอป Flutter ให้เข้ากับ iPhone Duo” แต่เป็น “ฉันจะปรับแอป Flutter ให้เข้ากับขนาดใหม่ ๆ” แนวคิดคือไม่ยึดติดกับอุปกรณ์จริง และสร้างอินเทอร์เฟซแบบ responsive ที่ตอบสนองต่อพื้นที่ที่มีอยู่แบบไดนามิก

ตัวอย่างเช่น เราสามารถปรับให้เป็นแบบนี้ได้ด้วยการเปลี่ยนแปลงเพียงเล็กน้อย

อย่างที่เห็น เมื่อ Duo พับอยู่ ผมยังใช้เลย์เอาต์เดิม แต่เมื่อกางออก ผมใช้ความกว้างเพิ่มเติมของหน้าจอด้านในเพื่อแสดงรายการโน้ตทางซ้าย และรายละเอียดของโน้ตที่เลือกทางขวา

เราสร้างผลลัพธ์นี้ได้ง่าย ๆ ด้วย LayoutBuilder ซึ่งเป็นวิดเจ็ตที่ให้ข้อจำกัดด้านขนาดที่ได้รับจากวิดเจ็ตแม่ เมื่อข้อจำกัดเหล่านี้เปลี่ยน เช่น เมื่อเปลี่ยนแนวอุปกรณ์ หรือเมื่อพับและกาง iPhone Duo ทาง Flutter จะเรียก builder อีกครั้ง ทำให้เราเลือกอินเทอร์เฟซที่เหมาะสมตามพื้นที่ที่มีอยู่ได้

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

นอกจาก LayoutBuilder แล้ว ในตัวอย่างนี้ผมใช้ SafeArea เพื่อให้เนื้อหาอยู่นอกพื้นที่ที่อินเทอร์เฟซของระบบ กล้อง และมุมโค้งกินพื้นที่อยู่ Flutter ยังมีเครื่องมืออีกมากสำหรับสร้างอินเทอร์เฟซที่ปรับตัวได้ MediaQuery.sizeOf() ใช้ตรวจสอบขนาดปัจจุบันของหน้าต่างแอป Expanded และ Flexible ใช้แบ่งพื้นที่ภายในแถวและคอลัมน์ ส่วน ConstrainedBox ใช้กำหนดขอบเขตขั้นต่ำหรือสูงสุดเพื่อป้องกันไม่ให้เนื้อหายืดกว้างเกินไป ทั้งหมดนี้เป็นเพียงตัวอย่างบางส่วน Flutter ยังมีเครื่องมืออีกมากสำหรับปรับอินเทอร์เฟซให้เข้ากับพื้นที่ที่มีอยู่

ต้องปรับแอปให้เข้ากับ iPhone Duo หรือไม่? คุ้มค่าหรือเปล่า?

ก่อนจะพิจารณาว่าการปรับแอปให้เข้ากับ iPhone Duo คุ้มค่าหรือไม่ หรือควรปรับอย่างละเอียดแค่ไหน มาดูข้อกำหนดที่ Apple ประกาศและคุณควรรู้ไว้ก่อน

ข้อกำหนดเหล่านี้ไม่ได้บังคับอย่างชัดเจนว่าคุณต้องสร้างอินเทอร์เฟซเฉพาะสำหรับ iPhone Duo อย่างไรก็ตาม การที่ Apple กำหนดให้ส่งภาพหน้าจอเฉพาะของอุปกรณ์ดูเหมือนจะบอกว่า Apple คาดหวังให้เราตรวจสอบว่าแอปทำงานอย่างไรบนอุปกรณ์ และแก้ไขปัญหาการปรับตัวที่เห็นได้ชัดที่สุดเป็นอย่างน้อย

แล้วควรทุ่มเทแรงแค่ไหนกับการปรับครั้งนี้? คำตอบขึ้นอยู่กับประเภทของแอปและสิ่งที่ผู้ใช้คาดหวังเป็นอย่างมาก สำหรับผม แอปส่วนใหญ่ถูกใช้งานบนสมาร์ตโฟน และผู้ใช้แท็บเล็ตมีสัดส่วนน้อยมาก จึงสมเหตุสมผลที่จะคิดว่าผมคงไม่มีผู้ใช้ iPhone Duo มากนักเช่นกัน ดังนั้นผมน่าจะปรับเท่าที่จำเป็นเพื่อให้แอปทำงานได้ดีบน Duo และเป็นไปตามข้อกำหนดใหม่เรื่องภาพหน้าจอเฉพาะของอุปกรณ์

ถึงอย่างนั้น ผมจะไม่ประเมินความพยายามจากจำนวนผู้ใช้ที่จะมี iPhone Duo เพียงอย่างเดียว ถ้าแอปของคุณมีอินเทอร์เฟซที่ยืดหยุ่นอยู่แล้ว การได้ผลลัพธ์ที่เหมาะสมอาจต้องเปลี่ยนแปลงเพียงเล็กน้อย แต่ถ้ายังไม่มี การปรับแอปให้เข้ากับ Duo อาจช่วยให้คุณพบปัญหาที่จะเกิดบนแท็บเล็ต หน้าต่างที่ปรับขนาดได้ หรือรูปแบบอุปกรณ์ในอนาคตด้วย ในแง่นี้ งานดังกล่าวอาจมีคุณค่ามากกว่าแค่อุปกรณ์เครื่องนี้

บทสรุป

iPhone Duo คือของเล่นชิ้นใหม่ของ Apple และเป็นอีกเหตุผลให้เรากลับมาตรวจสอบว่าแอปทำงานอย่างไรเมื่อมีพื้นที่มากขึ้นมาก อย่างที่บอกไป ผมแนะนำว่าอย่ามองว่า “ฉันกำลังปรับแอปให้เข้ากับ iPhone Duo” แต่ให้มองว่า “ฉันกำลังปรับแอปให้เข้ากับหน้าต่างหลายขนาด” วิธีนี้ทำให้งานที่ทำมีประโยชน์ไม่ใช่แค่กับอุปกรณ์นี้ แต่ยังรวมถึงแท็บเล็ตและรูปแบบอุปกรณ์อื่น ๆ ทั้งในปัจจุบันและอนาคต

แล้วพบกันใหม่!