FlutterFlow में Rive और Lottie: Widgets और सीमाएँ

क्या FlutterFlow नेटिव रूप से Rive सपोर्ट करता है?

हाँ, playback के लिए। FlutterFlow का RiveAnimation widget, widget पैनल में Base Elements के अंदर मिलता है। आप एक source चुनते हैं (अपलोड किया गया asset या network URL), dropdown से आर्टबोर्ड चुनते हैं, चलाने वाले एनिमेशन चुनते हैं, और playback अपने-आप शुरू करने के लिए Auto Animate चालू रखते हैं। एक अलग Rive Animation action किसी बटन या page event से playback शुरू कर सकता है।

इसलिए built-in widget लूप होने वाले इलस्ट्रेशन या एक बार चलने वाले इंट्रो के लिए अच्छा है। जो मैस्कॉट query चलते समय सोचता हुआ दिखे और सफल होने पर खुशी मनाए, उसकी स्टेट मशीन को ऐप की state से चलाना पड़ता है, और यहीं custom widget काम आता है।

.riv को asset या network source के रूप में कैसे जोड़ें?

built-in widget के लिए:

1. Base Elements से RiveAnimation को पेज पर ड्रैग करें।
2. properties पैनल में source को Asset पर सेट करके .riv अपलोड करें, या Network पर सेट करके HTTPS URL पेस्ट करें।
3. आर्टबोर्ड और चलाने वाले एनिमेशन चुनें।
4. लूप के लिए Auto Animate चालू रखें, या इसे बंद करके Rive Animation action से playback शुरू करें।
5. widget को तय width और height दें, ताकि फ़ाइल लोड होते समय layout न खिसके।

Assets ऐप के अंदर ही शिप होते हैं और offline काम करते हैं। Network files से बाइनरी छोटी रहती है और बिना दोबारा publish किए अपडेट हो सकती हैं, लेकिन पहली बार लोड होने पर connection चाहिए। जो कैरेक्टर launch या ऑनबोर्डिंग में दिखता है, उसके लिए asset बेहतर है।

custom widget पर भी यही बात लागू होती है: अपलोड किए गए assets ऐप के asset bundle में पहुँचते हैं और path से लोड हो सकते हैं, और network files URL से लोड हो सकती हैं।

क्या built-in widget स्टेट मशीन इनपुट कंट्रोल कर सकता है?

FlutterFlow के दस्तावेज़ के अनुसार नहीं। RiveAnimation पेज पर source, आर्टबोर्ड, एनिमेशन चुनना, Auto Animate, और playback शुरू करने वाले action का वर्णन है। इसमें स्टेट मशीन, इनपुट या व्यू मॉडल का ज़िक्र नहीं है। स्टेट मशीन चलाने के बारे में पूछने वाले community threads भी इसी नतीजे पर पहुँचते हैं और custom widget इस्तेमाल करते हैं।

व्यावहारिक असर यह है: स्टेट मशीन पर बनी फ़ाइल, built-in widget में सिर्फ़ अपनी default स्टेट चलाती है, या अगर लूप चुनने के लिए वह इनपुट पर निर्भर है तो कुछ काम का नहीं दिखाती। सरल फ़ाइलों के लिए नाम वाली टाइमलाइन चुनना चल सकता है, लेकिन डिज़ाइनर के बनाए transitions खो जाते हैं और playback का क्रम आपको खुद तय करना पड़ता है।

Charmotion files में यह फ़र्क साफ़ दिखता है। हर सेट एक .riv है जिसमें आपके कैरेक्टर या लोगो से कुछ ही मिनटों में बने 17 एनिमेशन होते हैं, जो एक स्टेट मशीन से जुड़े होते हैं: CharacterStateMachine, जिसमें एक mood नंबर इनपुट (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) और success, error, yes, no, enter और exit ट्रिगर हैं, साथ ही Data Binding के लिए एक Character व्यू मॉडल भी। FlutterFlow में इन मूड का इस्तेमाल करने के लिए नीचे दिया गया custom widget बनाएँ।

custom widget से मूड नंबर कैसे चलाएँ?

Custom Code में rive पैकेज को dependency के रूप में जोड़ें (rive पैकेज का मौजूदा वर्ज़न pub.dev पर देखें), फिर एक integer mood पैरामीटर वाला custom widget बनाएँ। widget file को एक बार लोड करता है, इनपुट ढूँढता है, और जब भी FlutterFlow नई value भेजता है, उन्हें अपडेट करता है:

class RiveMascot extends StatefulWidget {
  const RiveMascot({super.key, this.width, this.height, required this.mood});
  final double? width;
  final double? height;
  final int mood;
  @override
  State<RiveMascot> createState() => _RiveMascotState();
}

class _RiveMascotState extends State<RiveMascot> {
  File? file;
  RiveWidgetController? controller;
  NumberInput? mood;

  @override
  void initState() {
    super.initState();
    _load();
  }

  Future<void> _load() async {
    final f = await File.asset('assets/rive_animations/character.riv',
        riveFactory: Factory.rive);
    if (f == null || !mounted) return;
    final c = RiveWidgetController(f,
        stateMachineSelector: StateMachineSelector.byName('CharacterStateMachine'));
    setState(() {
      file = f;
      controller = c;
      mood = c.stateMachine.number('mood')?..value = widget.mood.toDouble();
    });
  }

  @override
  void didUpdateWidget(RiveMascot old) {
    super.didUpdateWidget(old);
    if (old.mood != widget.mood) mood?.value = widget.mood.toDouble();
  }

  @override
  void dispose() {
    mood?.dispose();
    controller?.dispose();
    file?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final c = controller;
    return SizedBox(width: widget.width, height: widget.height,
        child: c == null ? null : RiveWidget(controller: c, fit: Fit.contain));
  }
}

अपने प्रोजेक्ट में FlutterFlow अपलोड की गई फ़ाइलों को जो asset path देता है, उसे जाँच लें, और कोई भी फ़ाइल लोड होने से पहले await RiveNative.init(); एक बार चलाएँ, उदाहरण के लिए main.dart में जोड़े गए custom action में। mood को किसी page या app state variable से bind करें, और उस variable को बदलने पर लूप बदल जाता है।

success और error रिएक्शन कैसे फ़ायर करें?

ट्रिगर events होते हैं, इसलिए वे widget पैरामीटर पर आसानी से फ़िट नहीं होते। एक सरल और भरोसेमंद तरीका है हर ट्रिगर के लिए एक counter पैरामीटर: जब integer बढ़ता है, widget ट्रिगर फ़ायर करता है।

// extra parameter: final int successCount;
TriggerInput? success;   // in _load(): success = c.stateMachine.trigger('success');

@override
void didUpdateWidget(RiveMascot old) {
  super.didUpdateWidget(old);
  if (old.mood != widget.mood) mood?.value = widget.mood.toDouble();
  if (widget.successCount > old.successCount) success?.fire();
}

action flow में, backend call सफल होने के बाद successCount state variable को एक से बढ़ाएँ। इसी तरह एक errorCount जोड़ें। हर इनपुट को dispose() में dispose करें।

ये calls Rive के legacy input API का इस्तेमाल करती हैं, जिसे Rive ने Data Binding के पक्ष में deprecate कर दिया है, लेकिन मौजूदा फ़ाइलों के लिए Flutter रनटाइम में अब भी सपोर्ट करता है। view models वाली फ़ाइल को CharacterViewModelMachine के साथ Flutter Data Binding API से भी चलाया जा सकता है; widget की संरचना वही रहती है। पूरा रनटाइम सेटअप Rive runtimes गाइड के Flutter सेक्शन में दिखाया गया है।

इसके बजाय LottieAnimation widget कब इस्तेमाल करें?

इसे तब इस्तेमाल करें जब एनिमेशन हर बार एक ही तरह चलता हो। FlutterFlow का LottieAnimation widget अपलोड किए गए assets या URL से Lottie files दिखाता है, और एक Lottie Animation action उसे start और pause कर सकता है। इसमें कोई custom code नहीं लगता।

• सही उपयोग: loading spinner, checkout के बाद success check, ऑनबोर्डिंग इलस्ट्रेशन, एम्प्टी स्टेट लूप।
• कम उपयुक्त: ऐसा कैरेक्टर जो ऐप की state के साथ मूड बदलता है या कई अलग-अलग events पर रिएक्ट करता है। Lottie में आपको फ़ाइलें या segments बदलने होंगे और उनके बीच का समय खुद मिलाना होगा।

कई ऐप दोनों इस्तेमाल करते हैं: छोटे सजावटी पलों के लिए Lottie, और जिन पलों में व्यक्तित्व चाहिए उनके लिए custom widget से चलने वाला एक Rive कैरेक्टर। अगर आपको सिर्फ़ एक तय क्लिप चाहिए, तो muted लूपिंग वीडियो भी काम करता है और उसके लिए किसी एनिमेशन रनटाइम की ज़रूरत ही नहीं।

FlutterFlow में Rive स्टेट मशीन कैसे चलाएँ

1. पैकेज जोड़ें. Custom Code में rive पैकेज को dependency के रूप में जोड़ें।
2. फ़ाइल अपलोड करें. .riv को asset के रूप में अपलोड करें और उसका path नोट करें।
3. widget बनाएँ. एक integer mood पैरामीटर वाला custom widget बनाएँ जो फ़ाइल को CharacterStateMachine के साथ लोड करे।
4. रनटाइम initialize करें. startup पर, कोई भी फ़ाइल लोड होने से पहले, RiveNative.init() एक बार कॉल करें।
5. state bind करें. mood को एक state variable से bind करें और action flows से उसे अपडेट करें।
6. ट्रिगर जोड़ें. ऐसे counter पैरामीटर जोड़ें जो बढ़ने पर success और error फ़ायर करें।

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

क्या मैं FlutterFlow में बिना कोड के Rive स्टेट मशीन इस्तेमाल कर सकता हूँ?

FlutterFlow के docs के अनुसार नहीं। बिल्ट-इन RiveAnimation widget में आर्टबोर्ड और एनिमेशन चुनने और एक playback action का ज़िक्र है, लेकिन स्टेट मशीन इनपुट या व्यू मॉडल का नहीं। अपने ऐप के logic से मूड बदलने या ट्रिगर फ़ायर करने के लिए rive Flutter package को एक custom widget में रैप करें।

FlutterFlow में मेरी Rive file सिर्फ़ पहला स्टेट ही क्यों दिखाती है?

बिल्ट-इन widget चुने गए एनिमेशन चलाता है, इनपुट से चलने वाली स्टेट मशीन नहीं। जिस फ़ाइल में लूप एक नंबर इनपुट से चुने जाते हैं, वह अपने default स्टेट में ही रुकी रहती है क्योंकि नंबर कोई सेट नहीं करता। mood इनपुट या view model property सेट करने वाला custom widget इसे ठीक कर देता है।

क्या custom Rive widget FlutterFlow के web build में काम करते हैं?

rive package iOS और Android के साथ Flutter web को भी सपोर्ट करता है, इसलिए वही custom widget web build में चल सकता है। इसे असली deployed build में टेस्ट करें, क्योंकि custom code हर FlutterFlow प्रीव्यू मोड में render नहीं होता, और web पर रनटाइम का load time भी जाँचें।

इस गाइड से झटपट जवाब

• क्या FlutterFlow Rive एनिमेशन को सपोर्ट करता है?

स्रोत

• RiveAnimation widget, FlutterFlow Docs
• LottieAnimation widget, FlutterFlow Docs
• Rive animations with State Machine, FlutterFlow Community
• Flutter runtime, Rive
• Flutter runtime: Inputs (legacy), Rive
• rive package, pub.dev