Flutter मोबाइल विकास · पाठ

Hero ट्रांज़िशन और साझा एलिमेंट गति

सुसज्जित स्क्रीन ट्रांज़िशन के लिए Hero विजेट और कस्टम फ़्लाइट शटल का समन्वय कीजिए।

पाठ 3, कुल 4 में से13 चरण

Hero ट्रांज़िशन और साझा एलिमेंट गति, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

साझा तत्व की गति का अर्थ

Hero संक्रमण किसी एक विजेट को इस तरह एनीमेट करता है कि मार्ग को आगे या पीछे ले जाने के दौरान वह एक स्क्रीन से दूसरी स्क्रीन तक उड़ता हुआ दिखाई दे। उपयोगकर्ता किसी तत्व को स्क्रीन बदलने पर खोता नहीं है; वही दृश्य वस्तु अपनी जगह बदलते हुए रूपांतरित होती है।

सूची में मौजूद किसी छोटे चित्र के पूर्ण-स्क्रीन विवरण चित्र में फैलने की कल्पना करें।
Flutter आरंभ और अंत के आयत की गणना करता है और उनके बीच विजेट को क्रमिक रूप से बदलता है।
इसी निरंतरता को डिज़ाइनर साझा तत्व की गति कहते हैं।

इस पाठ में आप Hero विजेट का समन्वय करेंगे और उस उड़ान शटल को अनुकूलित करेंगे जो बीच के फ़्रेमों में वास्तव में चित्रित होती है।

Hero विजेट का अनुबंध

Hero एनीमेशन बनाने के लिए स्रोत और गंतव्य विजेट को Hero विजेट में लपेटें और दोनों को एक ही टैग दें। Flutter मार्गों के बीच इनकी जोड़ी इसी टैग से बनाता है।

टैग हर स्क्रीन पर अद्वितीय, लेकिन दोनों स्क्रीन के बीच समान होने चाहिए।
यदि एक ही स्क्रीन पर दो Hero का टैग समान हो, तो नेविगेशन के समय Flutter एक अभिकथन त्रुटि देता है।

नीचे, सूची स्क्रीन पर किसी उत्पाद के छोटे चित्र के टैग के रूप में उत्पाद पहचानकर्ता का उपयोग किया गया है।

Hero(
  tag: 'product-${product.id}',
  child: Image.network(
    product.thumbnailUrl,
    width: 80,
    height: 80,
    fit: BoxFit.cover,
  ),
)

गंतव्य Hero का मिलान करना

विवरण स्क्रीन को अपने बड़े चित्र को Hero में लपेटना चाहिए और उसमें बिल्कुल वही टैग होना चाहिए। जब आप विवरण मार्ग को आगे बढ़ाते हैं, Flutter दोनों Hero को पहचानकर उड़ान अपने-आप शुरू कर देता है।

अंदर के विजेट का एक जैसा होना आवश्यक नहीं है — केवल टैग समान होना चाहिए।
यहाँ गंतव्य पूर्ण-चौड़ाई वाला चित्र है, जबकि स्रोत 80x80 का छोटा चित्र था।

Hero(
  tag: 'product-${product.id}',
  child: Image.network(
    product.imageUrl,
    width: double.infinity,
    height: 320,
    fit: BoxFit.cover,
  ),
)

टैग जोड़ी कैसे बनाते हैं

मार्ग संक्रमण के दौरान Flutter बाहर जाने वाले और अंदर आने वाले दोनों मार्गों में Hero को खोजता है, फिर टैग के आधार पर एक मानचित्र बनाता है। केवल दोनों मार्गों पर मौजूद टैग ही एनीमेट होते हैं; बिना जोड़ी वाला Hero अपने पृष्ठ के साथ साधारण रूप से धुंधला होकर गायब होता है।

टैग की तुलना समानता से होती है, इसलिए आप टैग के रूप में कोई भी वस्तु — स्ट्रिंग, पूर्णांक या एनम — उपयोग कर सकते हैं, बशर्ते == और hashCode सही ढंग से काम करें।

bool heroesMatch(Object tagA, Object tagB) {
  return tagA == tagB;
}

void main() {
  print(heroesMatch('product-7', 'product-7')); // true -> flies
  print(heroesMatch('product-7', 'product-9')); // false -> fades
  print(heroesMatch(42, 42));                    // true
}

डिफ़ॉल्ट उड़ान शटल

उड़ान के दौरान चित्रित होने वाले विजेट को उड़ान शटल कहते हैं। डिफ़ॉल्ट रूप से Flutter पूरी उड़ान के दौरान गंतव्य Hero के अंदर के विजेट का उपयोग करता है और आवश्यकता होने पर दोनों के बीच धीरे-धीरे बदलाव करता है।

जब दोनों अंदर के विजेट एक जैसे दिखते हैं, तब यह अच्छी तरह काम करता है। लेकिन जब स्रोत और गंतव्य के आकार बहुत अलग हों — जैसे चौकोर अवतार का गोल किनारों वाले बैनर में बदलना — तो डिफ़ॉल्ट परिणाम अचानक बदलाव जैसा लग सकता है। ऐसे समय आप अपना flightShuttleBuilder देते हैं।

उड़ान शटल को अनुकूलित करना

flightShuttleBuilder आपको उड़ान के बीच में वास्तव में क्या चित्रित होगा, इस पर पूरा नियंत्रण देता है। इसके हस्ताक्षर में एनीमेशन, दिशा (आगे या पीछे) और दोनों Hero संदर्भ मिलते हैं।

flightDirection, HeroFlightDirection.push या .pop होता है।
कोई भी विजेट लौटाएँ; उसे आपके लिए क्रमिक रूप से बदले गए आयत के भीतर रखा जाएगा।

यहाँ हम उड़ते समय सुंदरता बढ़ाने के लिए अंदर के विजेट को थोड़ा घुमाते हैं।

Hero(
  tag: 'product-${product.id}',
  flightShuttleBuilder: (
    BuildContext flightContext,
    Animation<double> animation,
    HeroFlightDirection direction,
    BuildContext fromContext,
    BuildContext toContext,
  ) {
    return RotationTransition(
      turns: Tween<double>(begin: 0, end: 0.05).animate(animation),
      child: toContext.widget,
    );
  },
  child: Image.network(product.imageUrl, fit: BoxFit.cover),
)

दो अंदरूनी विजेट के बीच धीरे-धीरे बदलाव

एक सामान्य शटल तरीका स्रोत के अंदर के विजेट से गंतव्य के अंदर के विजेट तक धीरे-धीरे बदलाव करना है, ताकि रूपांतरण सहज लगे। आप उसी उड़ान animation से FadeTransition चला सकते हैं।

आगे जाने पर, स्रोत को धीरे-धीरे अदृश्य और गंतव्य को धीरे-धीरे दृश्य करें।
पीछे जाने पर, flightDirection का उपयोग करके भूमिकाएँ उलट दें।

Widget buildShuttle(
  BuildContext flightContext,
  Animation<double> animation,
  HeroFlightDirection direction,
  BuildContext fromContext,
  BuildContext toContext,
) {
  final Widget fromHero = (fromContext.widget as Hero).child;
  final Widget toHero = (toContext.widget as Hero).child;
  final bool isPush = direction == HeroFlightDirection.push;
  return Stack(
    fit: StackFit.expand,
    children: [
      FadeTransition(
        opacity: Tween<double>(begin: isPush ? 1 : 0, end: isPush ? 0 : 1)
            .animate(animation),
        child: fromHero,
      ),
      FadeTransition(
        opacity: Tween<double>(begin: isPush ? 0 : 1, end: isPush ? 1 : 0)
            .animate(animation),
        child: toHero,
      ),
    ],
  );
}

उड़ान का मार्ग आकार देना

डिफ़ॉल्ट रूप से Hero सीधी रेखा में चलता है। आप createRectTween से उस मार्ग को मोड़ सकते हैं; यह नियंत्रित करता है कि सीमाबद्ध आयत को क्रमिक रूप से कैसे बदला जाए।

Material का MaterialRectArcTween एक घुमावदार और अधिक स्वाभाविक चाप देता है — यही वह गति है जिसकी Material Design साझा तत्व संक्रमणों के लिए अनुशंसा करता है।

import 'package:flutter/material.dart';

RectTween arcTween(Rect? begin, Rect? end) {
  return MaterialRectArcTween(begin: begin, end: end);
}

// Usage on the Hero:
// Hero(
//   tag: 'product-7',
//   createRectTween: arcTween,
//   child: ...,
// )

सूचियों में टैग टकराव से बचना

सबसे सामान्य Hero समस्या एक ही स्क्रीन पर दोहराया गया टैग है। ListView में हर Hero का टैग उसकी डेटा पंक्ति के लिए अद्वितीय होना चाहिए।

सभी मदों के लिए 'hero' जैसी स्थिर स्ट्रिंग का उपयोग कभी न करें।
टैग को मॉडल पहचानकर्ता जैसी स्थिर पहचान से बनाएँ।

यह सहायक सूची की पंक्तियाँ बनाते समय विशिष्टता सुनिश्चित करता है।

String heroTagFor(String screen, Object id) {
  return '$screen::$id';
}

void main() {
  final ids = [1, 2, 2, 3];
  final tags = <String>{};
  for (final id in ids) {
    final tag = heroTagFor('list', id);
    if (!tags.add(tag)) {
      print('Collision on $tag');
    } else {
      print('OK $tag');
    }
  }
}

Hero को Material में लपेटना

जब Hero के अंदर के विजेट में उन्नयन, गोल कोने या इंक प्रभाव हो — जैसे Card या Material सतह — तो उड़ान के दौरान कटे हुए या चौकोर कोने दिख सकते हैं, क्योंकि उड़ान के बीच का विजेट अपने मूल पूर्वजों से अलग हो जाता है।

शटल या उसके अंदर के विजेट को type: MaterialType.transparency वाले Material में लपेटें, ताकि उड़ान के बीच पाठ, छायाएँ और कटाव सही ढंग से चित्रित हों।

Hero(
  tag: 'card-${item.id}',
  flightShuttleBuilder: (ctx, anim, dir, from, to) {
    return Material(
      type: MaterialType.transparency,
      child: (to.widget as Hero).child,
    );
  },
  child: Material(
    type: MaterialType.transparency,
    child: ProductCard(item: item),
  ),
)

Hero और Rive का समन्वय

इस भाग में हम अधिक समृद्ध गति के लिए Hero संक्रमणों को Rive एनीमेशन के साथ जोड़ते हैं। एक अच्छा तरीका यह है कि Hero स्थिति और आकार संभाले, जबकि Rive की स्थिति मशीन आगमन पर एक छोटी एनीमेशन चलाए।

गंतव्य मार्ग का संक्रमण पूरा होने पर Rive का SMITrigger सक्रिय करें।
उड़ान पर animation.addStatusListener का उपयोग करके AnimationStatus.completed पर ट्रिगर सक्रिय करें।

Hero शटल को सरल रखें; अभिव्यंजक भाग Rive को संभालने दें, ताकि दोनों प्रणालियाँ उन्हीं फ़्रेमों पर नियंत्रण पाने की कोशिश न करें।

void fireOnArrival(Animation<double> animation, void Function() onArrived) {
  animation.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      onArrived(); // e.g. riveTrigger.fire();
    }
  });
}

त्वरित जाँच

आपके पास अवतारों का एक ग्रिड है; किसी अवतार पर टैप करने से प्रोफ़ाइल स्क्रीन आगे खुलती है। अवतार 56x56 का वृत्त है और गंतव्य 200 ऊँचाई वाला गोल किनारों का बैनर है। डिफ़ॉल्ट उड़ान अचानक बदलाव जैसी दिखती है और गति के दौरान कोने चौकोर झिलमिलाते हैं। इनमें से कौन-सा संयोजन इसे सबसे अच्छी तरह ठीक करेगा?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

अब आप अच्छी तरह तैयार साझा तत्व संक्रमण बना सकते हैं:

स्रोत और गंतव्य Hero पर समान टैग जोड़ी बनाते हैं; टैग हर स्क्रीन पर अद्वितीय और स्क्रीन के बीच समान होने चाहिए।
उड़ान शटल उड़ान के बीच में चित्रित होती है; अलग-अलग अंदरूनी विजेट के बीच धीरे-धीरे बदलाव के लिए इसे flightShuttleBuilder से अनुकूलित करें।
छायाएँ, पाठ और गोल कोने सही रखने के लिए शटल की सामग्री को पारदर्शी Material में लपेटें।
स्वाभाविक चाप के लिए createRectTween और MaterialRectArcTween से मार्ग को मोड़ें।
स्थिति Hero को संभालने दें और अभिव्यंजक छोटी गति Rive की स्थिति मशीन को दें, जिसे AnimationStatus.completed पर सक्रिय किया जाए।

इन सबको मिलाकर स्क्रीन परिवर्तन को निरंतर और उद्देश्यपूर्ण बनाएँ।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Dart सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 22
पाठ: 88

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Hero ट्रांज़िशन और साझा एलिमेंट गति” पाठ निःशुल्क है?

हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Hero ट्रांज़िशन और साझा एलिमेंट गति” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Hero ट्रांज़िशन और साझा एलिमेंट गति” में मैं क्या सीखूँगा?

सुसज्जित स्क्रीन ट्रांज़िशन के लिए Hero विजेट और कस्टम फ़्लाइट शटल का समन्वय कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Hero ट्रांज़िशन और साझा एलिमेंट गति” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Rive एसेट और AnimationControllers एम्बेड करना
स्टेट मशीन और इनपुट-चालित गति
Hero ट्रांज़िशन और साझा एलिमेंट गति
क्रमिक और कोरियोग्राफ़ किए गए AnimationControllers

← Flutter मोबाइल विकास पर वापस जाएँ