मोबाइल डेवलपमेंट में Flutter: यह क्या है, प्रमुख अवधारणाएँ और यह कैसे काम करता है

Flutter: Widget, StatelessWidget और StatefulWidget की मूल बातें

Widget — UI के एक हिस्से का घोषणात्मक विवरण। Flutter में सब कुछ एक Widget है: बटन से लेकर ऐप तक। Widget एक कॉन्फ़िगरेशन है (स्वयं UI नहीं)। StatelessWidget — एक अपरिवर्तनीय Widget। build() एक बार कॉल होता है। इसकी कोई स्थिति नहीं है। स्थिर सामग्री के लिए उपयोग किया जाता है। StatefulWidget — एक परिवर्तनीय Widget। इसमें एक State ऑब्जेक्ट है जो बदल सकता है। setState() — पुनर्निर्माण को ट्रिगर करता है। State — StatefulWidget से बंधा एक परिवर्तनीय ऑब्जेक्ट। इसमें ऐसा डेटा होता है जो बदल सकता है।

StatelessWidget बनाम StatefulWidget

StatelessWidget — build() एक बार कॉल होता है। हेडर, आइकन, स्थिर टेक्स्ट के लिए उपयुक्त। StatefulWidget — build() हर बार setState() कॉल होने पर कॉल होता है। फ़ॉर्म, बदलती सूचियाँ, टाइमर के लिए उपयुक्त। InheritedWidget — कंस्ट्रक्टर के माध्यम से स्पष्ट रूप से पास किए बिना डेटा को नीचे भेजना। Theme, MediaQuery, Navigator — InheritedWidgets। BuildContext — ट्री में Widget की स्थिति। context.of<T>, context.watch<T>, context.select<T,R> — InheritedWidget तक पहुँच।

// Flutter Widget उदाहरण: setState के साथ StatefulWidget
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — कॉन्फ़िगरेशन। StatelessWidget — अपरिवर्तनीय। StatefulWidget — setState() के साथ परिवर्तनीय। IT Sectr StatelessWidget से शुरू करने और केवल जब स्थिति की आवश्यकता हो तब StatefulWidget पर स्विच करने की अनुशंसा करता है।

ट्री (Widget Tree, Element Tree, RenderObject Tree)

Flutter कुशल रेंडरिंग के लिए तीन ट्री का उपयोग करता है। Widget Tree — कॉन्फ़िगरेशन ट्री। Widgets बार-बार बनाए जाते हैं (हर build), हल्के होते हैं। Element Tree — तत्व ट्री। प्रति Widget एक तत्व (यदि प्रकार नहीं बदलता है)। Element — Widget और RenderObject के बीच पुल। RenderObject Tree — रेंडरिंग ट्री। आकार, स्थिति, ड्राइंग को संभालता है। RenderObject — भारी, शायद ही कभी बनाया जाता है। Flutter Widget Tree की तुलना करता है और Element Tree को अपडेट करता है, जो RenderObject Tree अपडेट को ट्रिगर करता है।

Keys और Element Tree

Key — Element Tree में Widget पहचानकर्ता। ValueKey, ObjectKey, UniqueKey, PageStorageKey। Keys Flutter को पुनर्निर्माण के दौरान पुराने और नए Widgets को मिलाने की अनुमति देती हैं। Keys के बिना, Flutter Widget प्रकार और स्थिति से मिलान करता है। GlobalKey — दूसरे Widget से State तक पहुँच। इसका उपयोग: जटिल फ़ॉर्म, एनिमेशन, परीक्षणों में State तक पहुँच के लिए। IT Sectr सूचियों (List.generate) के लिए Keys का उपयोग करने और आवश्यकता न होने पर GlobalKey से बचने की अनुशंसा करता है।

Expanded — Row/Column/Flex में उपलब्ध स्थान भरने वाला Widget। Flexible — भरने के लिए बाध्य नहीं करता (छोटा हो सकता है)। MediaQuery — डिवाइस जानकारी वाला InheritedWidget: स्क्रीन आकार, ओरिएंटेशन, प्लेटफ़ॉर्म, टेक्स्ट स्केल फ़ैक्टर। Theme/ThemeData — केंद्रीकृत थीम। Theme.of(context) — पहुँच। MaterialApp — रूटिंग, थीम, लोकेल कॉन्फ़िगरेशन के लिए मूल Widget। Scaffold — AppBar, Drawer, BottomNavigationBar के साथ मूल लेआउट। AppBar — शीर्ष पैनल।

नेविगेशन (Navigator, Route)

Navigator — रूट स्टैक (Routes)। Navigator.push — स्क्रीन खोलें (Future लौटाता है)। Navigator.pop — बंद करें (परिणाम सहित)। MaterialPageRoute — एनिमेटेड संक्रमण (दाएँ से स्लाइड)। Named Routes — स्ट्रिंग पहचानकर्ता। onGenerateRoute — केंद्रीकृत हैंडलर। Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — वेब, डीप लिंकिंग और जटिल परिदृश्यों के लिए घोषणात्मक नेविगेशन।

Navigator 2.0

Navigator 2.0 — घोषणात्मक नेविगेशन। Router — केंद्रीय Widget। RouteInformationParser — URL पार्सिंग। RouterDelegate — स्टैक प्रबंधन। GoRouter (पैकेज) — Navigator 2.0 पर सरलीकृत रैपर। समर्थन करता है: नामित रूट, पैरामीटर, रीडायरेक्ट, डीप लिंकिंग। IT Sectr अधिकांश परियोजनाओं के लिए GoRouter और केवल जटिल परिदृश्यों (वेब, डेस्कटॉप) के लिए Navigator 2.0 की अनुशंसा करता है।

एसिंक्रोनस (FutureBuilder, StreamBuilder)

FutureBuilder — Widget जो Future के आधार पर UI बनाता है। connectionState: none, waiting, active, done। इसका उपयोग: HTTP अनुरोध, DB रीड, टाइमर के लिए। StreamBuilder — Stream के लिए Widget (अनंत डेटा प्रवाह)। snapshot.data, snapshot.hasError, snapshot.hasData। इसका उपयोग: WebSocket, Firebase, स्थान अपडेट के लिए। दोनों Widgets नया डेटा प्राप्त करने पर पुनर्निर्मित होते हैं।

स्टेट मैनेजमेंट

Provider — सरल DI + स्टेट मैनेजमेंट। ChangeNotifierProvider, MultiProvider। Riverpod — Provider का आधुनिक विकल्प: कंपाइल-सेफ, BuildContext से स्वतंत्र। Bloc — इवेंट-ड्रिवन आर्किटेक्चर: Cubit (सरल इवेंट) बनाम Bloc (जटिल)। GetX — हल्का स्टेट मैनेजमेंट + DI + रूटिंग। setState — सबसे सरल, स्थानीय स्थिति के लिए। IT Sectr नई परियोजनाओं के लिए Riverpod और मौजूदा परियोजनाओं के लिए Provider की अनुशंसा करता है।

थीम और अनुकूलन (MediaQuery, ThemeData)

MediaQuery — स्क्रीन आकार, ओरिएंटेशन, प्लेटफ़ॉर्म, textScaleFactor। MediaQuery.of(context).size.width। ThemeData — ऐप थीम: रंग, फ़ॉन्ट, आकार। Theme.of(context).textTheme.bodyLarge। Hot Reload — चल रहे ऐप में कोड इंजेक्शन। स्थिति बनाए रखता है। समर्थन नहीं करता: main() बदलना, वैश्विक चर, स्थैतिक फ़ील्ड। Hot Restart — पूर्ण ऐप पुनरारंभ (स्थिति हानि)। Hot Reload — डेवलपर्स के लिए Flutter का मुख्य लाभ।

StatelessWidget — स्थिर सामग्री के लिए। StatefulWidget — गतिशील सामग्री के लिए। InheritedWidget — DI के लिए। IT Sectr डिफ़ॉल्ट रूप से StatelessWidget और केवल आवश्यकता होने पर StatefulWidget की अनुशंसा करता है।

रिस्पॉन्सिव लेआउट

LayoutBuilder — मूल आयामों के अनुकूल होना। OrientationBuilder — ओरिएंटेशन के अनुकूल होना। Expanded बनाम Flexible — Row/Column में स्थान वितरण। MediaQuery — टैबलेट और डेस्कटॉप के लिए ब्रेकपॉइंट। SafeArea — सिस्टम तत्वों (नॉच, स्टेटस बार) से मार्जिन। AspectRatio — अनुपात बनाए रखना। IT Sectr अनुकूली लेआउट के लिए LayoutBuilder और लैंडस्केप ओरिएंटेशन के लिए OrientationBuilder की अनुशंसा करता है।

परीक्षण (Widget, Integration, Unit)

यूनिट टेस्ट — व्यावसायिक तर्क, रिपॉजिटरी, मॉडल का परीक्षण। dart test — चलाएँ। Widget टेस्ट — अलग-थलग Widgets का परीक्षण। WidgetTester — pumpWidget, tap, enterText। इंटीग्रेशन टेस्ट — वास्तविक डिवाइस/एमुलेटर पर पूर्ण परिदृश्य। Mockito — निर्भरता मॉकिंग। Golden टेस्ट — स्क्रीनशॉट तुलना (गोल्डन फ़ाइलें)। IT Sectr प्रत्येक स्क्रीन के लिए Widget टेस्ट और व्यावसायिक तर्क के लिए यूनिट टेस्ट की अनुशंसा करता है।

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

एनिमेशन (Implicit, Explicit, Hero)

Implicit एनिमेशन — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder। गुण परिवर्तन स्वचालित रूप से एनिमेट होते हैं। Explicit एनिमेशन — Tween के साथ AnimationController। forward() / reverse()। Hero एनिमेशन — टैग के साथ Hero Widget — स्क्रीन के बीच संक्रमण एनिमेशन। Staggered एनिमेशन — Interval के साथ एनिमेशन श्रृंखला। Lottie — After Effects एनिमेशन एकीकरण। Rive — इंटरैक्टिव एनिमेशन (state machine)। IT Sectr 80% मामलों के लिए AnimatedContainer और जटिल परिदृश्यों के लिए AnimationController की अनुशंसा करता है।

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

नेटवर्किंग (http, dio, graphql)

http — सरल HTTP क्लाइंट (get, post, put, delete)। dio — इंटरसेप्टर, टाइमआउट, रीट्राई, लॉगिंग के साथ उन्नत क्लाइंट। graphql_flutter — Flutter के लिए GraphQL क्लाइंट। json_serializable — एनोटेशन के माध्यम से fromJson/toJson जनरेशन। Retrofit Dart — Retrofit जैसा type-safe HTTP क्लाइंट। WebSocket — web_socket_channel के माध्यम से। Firebase — Cloud Firestore, Realtime Database, Cloud Functions। IT Sectr REST API के लिए dio और GraphQL के लिए graphql_flutter की अनुशंसा करता है।

Flutter DevTools — टूल सेट: Inspector (Widget ट्री), Timeline (प्रदर्शन), Memory, Network, Logging। Profile mode — डीबग के बिना प्रोफाइलिंग। Performance overlay — FPS, बिल्ड टाइम। Flame chart — फ्लेम चार्ट ट्रेसिंग। DevTools — प्रोडक्शन में Flutter एप्लिकेशन को ऑप्टिमाइज़ करने का आवश्यक उपकरण।

Flutter Web — Flutter को WASM (WebAssembly) में कंपाइल करना। CanvasKit (Skia) बनाम HTML renderer। CanvasKit — पिक्सेल-परफेक्ट, लेकिन भारी। HTML renderer — हल्का, लेकिन सीमाओं के साथ। WASM (Flutter 3.22+) — मूल प्रदर्शन। LayoutBuilder और MediaQuery के माध्यम से रिस्पॉन्सिव अनुकूलन। IT Sectr डेस्कटॉप वेब एप्लिकेशन के लिए CanvasKit और कंटेंट साइटों के लिए HTML renderer की अनुशंसा करता है।