क्या तुम्हारा Flutter ऐप iPhone Duo के लिए तैयार है?

Apple का पहला फोल्डेबल iPhone, iPhone Duo, 23 अक्टूबर को बिक्री के लिए उपलब्ध हुआ। इसके साथ ऐप डेवलपरों के लिए कई सवाल उठते हैं: डेवलपमेंट पर इसका क्या असर होगा? क्या हमें अपने ऐप इस नए फोल्डेबल फ़ॉर्मेट के हिसाब से ढालने ही पड़ेंगे? अगर हाँ, तो इसमें क्या मुश्किलें आएँगी? अगर हम उन्हें नहीं ढालते तो क्या होगा? डिवाइस के मुड़े और खुले होने पर वे कैसे दिखेंगे? इंटरफ़ेस को ढालने के लिए Flutter कौन-कौन से साधन देता है?

इस लेख में मैं इन सभी सवालों के जल्दी जवाब देने की कोशिश करूँगा, ताकि अगर तुम iOS के लिए ऐप वितरित करते हो तो तुम्हें साफ़ पता हो कि आगे क्या आने वाला है। आखिर में मैं तुम्हें बहुत कम मेहनत से अपने ऐप का इंटरफ़ेस ढालने का एक बेहद आसान तरीका भी दिखाऊँगा, ताकि वह नए iPhone Duo पर अच्छा दिखे।

iPhone Duo तुम्हारे ऐप के दिखने का तरीका बदल देता है

iPhone Duo पर ऐप चलाने से क्या होता है, इसे ठीक से समझने के लिए मैंने यह बेहद आसान उदाहरण ऐप तैयार किया है। यह सिर्फ़ नोट्स की सूची दिखाता है और किसी नोट पर टैप करने पर हम उस स्क्रीन पर जाते हैं जहाँ उसका पूरा कंटेंट देखा जा सकता है:

अब देखते हैं कि इसी ऐप को iPhone Duo पर चलाने से क्या होता है। पहले मैं तुम्हें दिखाऊँगा कि 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 चाहता है कि हम जाँचें कि हमारे ऐप उस पर कैसे चलते हैं और कम से कम सबसे साफ़ दिखने वाली अनुकूलन समस्याओं को ठीक करें।

तो इस अनुकूलन पर कितनी मेहनत करना ठीक है? जवाब ऐप के प्रकार और उसके यूज़र की अपेक्षाओं पर बहुत निर्भर करेगा। मेरे मामले में, मेरे ऐप मुख्य रूप से स्मार्टफ़ोन पर इस्तेमाल होते हैं और टैबलेट यूज़र की संख्या बहुत कम है। यह मानना उचित है कि मेरे पास iPhone Duo इस्तेमाल करने वाले यूज़र भी बहुत कम होंगे। इसलिए शायद मैं सिर्फ़ उतना न्यूनतम अनुकूलन करूँगा जितना ऐप को Duo पर सही चलाने और डिवाइस के लिए खास स्क्रीनशॉट की नई ज़रूरत पूरी करने के लिए आवश्यक है।

फिर भी, मैं मेहनत का आकलन सिर्फ़ इस आधार पर नहीं करूँगा कि कितने यूज़र के पास iPhone Duo होगा। अगर तुम्हारे ऐप में पहले से लचीला इंटरफ़ेस है, तो ठीक नतीजा पाने के लिए बहुत कम बदलावों की ज़रूरत हो सकती है। अगर ऐसा नहीं है, तो ऐप को Duo के हिसाब से ढालना उन समस्याओं को पहचानने में मदद कर सकता है जो टैबलेट, आकार बदलने वाली विंडो या भविष्य के दूसरे फ़ॉर्मेट में भी दिखाई देंगी। इस लिहाज़ से यह काम इस एक डिवाइस से कहीं आगे तक उपयोगी हो सकता है।

निष्कर्ष

iPhone Duo Apple का नया खिलौना है और हमें यह देखने की एक और वजह देता है कि बहुत ज़्यादा जगह मिलने पर हमारे ऐप कैसे व्यवहार करते हैं। जैसा कि मैंने पहले कहा, मेरी सलाह है कि इसे “मैं अपने ऐप को iPhone Duo के लिए ढाल रहा हूँ” की तरह नहीं, बल्कि “मैं अपने ऐप को अलग-अलग विंडो आकारों के लिए ढाल रहा हूँ” की तरह देखो। इस तरह काम का फायदा सिर्फ़ इस डिवाइस को नहीं, बल्कि टैबलेट और मौजूदा या भविष्य के दूसरे फ़ॉर्मेट को भी मिलेगा।

अगली बार मिलते हैं!