Flutter मा animations कसरी काम गर्छन्?

Question

Accepted Answer

Flutter मा शक्तिशाली, लचकदार **animation** समर्थन छ — साधारण implicit animations देखि पूर्ण-नियन्त्रित explicit animations सम्म। Animations UX लाई smooth transitions र motion को साथ बढाउँछन्, र Flutter को widget-based system ले तिनलाई सहज बनाउँछ। ## Implicit animations (सजिलो तरिका) ```dart // implicitly-animated widgets animate AUTOMATICALLY when their properties change AnimatedContainer( duration: Duration(milliseconds: 300), width: _expanded ? 200 : 100, // change width → it animates smoothly height: _expanded ? 200 : 100, color: _expanded ? Colors.blue : Colors.red, ) // just change the value (with setState) → Flutter animates the transition // others: AnimatedOpacity, AnimatedPadding, AnimatedPositioned, etc. ``` Implicit animations (`AnimatedContainer`, `AnimatedOpacity`, आदि) आफ्नो properties परिवर्तन हुँदा स्वचालित रूपमा animate हुन्छन् — animation थप्ने सबैभन्दा सजिलो तरिका। ## Explicit animations (पूर्ण नियन्त्रण) ```dart // explicit animations use an AnimationController for full control class _MyState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(duration: Duration(seconds: 1), vsync: this); _animation = Tween(begin: 0, end: 1).animate(_controller); _controller.forward(); // start the animation } @override void dispose() { _controller.dispose(); super.dispose(); } // CLEAN UP the controller! } ``` Explicit animations **AnimationController** (playback नियन्त्रण गर्न) र **Tween** (value range परिभाषित गर्न) प्रयोग गर्छन् सटीक नियन्त्रणको लागि — कस्टम, जटिल वा समन्वित animations को लागि आवश्यक। ## अन्य animation tools ```text ✓ Hero animations → shared-element transitions between screens (an image flies/grows) ✓ AnimatedBuilder / AnimatedWidget → build UI from an animation efficiently ✓ Page route transitions; staggered animations; physics-based animations ✓ Packages (Rive, Lottie) for complex/designer animations ``` ## यो किन महत्त्वपूर्ण छ Flutter मा animations बुझ्न मूल्यवान छ किनकि **animations ले user experience लाई smooth transitions र motion को साथ बढाउँछन्** जसले apps लाई पॉलिश र responsive महसुस गराउँछ, त्यसैले यो उपयोगी व्यावहारिक ज्ञान हो। Flutter को animation system शक्तिशाली र लचकदार छ, र दुई मुख्य approaches बुझ्न कुञ्जी हो। **Implicit animations** (निहित-animated widgets जस्तै `AnimatedContainer` र `AnimatedOpacity` जो आफ्नो properties परिवर्तन हुँदा स्वचालित रूपमा animate हुन्छन्) **सजिलो, सहज तरिका** हो animation थप्नको लागि — केवल मान परिवर्तन गर्नुहोस् र Flutter ले transition लाई smooth रूपमा animate गर्छ, न्यूनतम कोड आवश्यक छ, अधिकांश सामान्य animation आवश्यकताको लागि उपयुक्त। **Explicit animations** (playback control को लागि **AnimationController** र value ranges को लागि **Tween** प्रयोग गर्ने) कस्टम, जटिल वा समन्वित animations को लागि **पूर्ण नियन्त्रण** प्रदान गर्छन् — जब implicit animations पर्याप्त नहोन्। दुवै बुझ्न — र कहिले प्रत्येक प्रयोग गर्ने (simple property animations को लागि implicit, सटीक नियन्त्रणको लागि explicit) — animation आवश्यकताहरूको स्पेक्ट्रम कभर गर्छ। **अन्य tools** (shared-element screen transitions को लागि Hero animations, animation-driven UI को लागि AnimatedBuilder, र जटिल designer animations को लागि Rive/Lottie जस्तै packages) को ज्ञान toolkit लाई विस्तार गर्छ। याद राख्ने योग्य व्यावहारिक नोट **AnimationControllers लाई disposing** गर्न हो (leaks रोक्न, lifecycle ज्ञान संग जोडिएको)। चूँकि पॉलिश animations ले meaningful रूपमा user experience लाई सुधार गर्छ (smooth transitions, motion, feedback) र Flutter ले strong animation support प्रदान गर्छ, र चूँकि implicit र explicit approaches बुझ्ने ले appropriate animations थप्न सक्षम बनाउँछ, Flutter मा animations बुझ्न मूल्यवान, व्यावहारिक-सम्बन्धित ज्ञान हो पॉलिश apps बनाउनको लागि — UX लाई motion को साथ बढाउनको लागि उपयोगी, साधारण implicit animations (सामान्य केस) देखि full-control explicit animations, engaging, professional-feeling Flutter applications बनाउनको लागि मूल्यवान कौशल।