Flutter — मुख्य अवधारणाएँ, आर्किटेक्चर और विजेट

Flutter क्या है

Flutter एक SDK (सॉफ़्टवेयर डेवलपमेंट किट) और यूज़र इंटरफ़ेस बनाने के लिए फ्रेमवर्क है, जिसे Google ने 2015 में घोषित किया था। Flutter 1.0 का पहला स्थिर संस्करण दिसंबर 2018 में जारी हुआ। React Native के विपरीत, Flutter JavaScript और नेटिव कोड के बीच ब्रिज का उपयोग नहीं करता — यह सीधे प्रोसेसर के नेटिव निर्देशों में कंपाइल होता है।

Flutter की मुख्य विशेषता इसका अपना रेंडरिंग इंजन है। फ्रेमवर्क UIKit (iOS) या Android की View प्रणाली पर निर्भर नहीं करता। इसके बजाय, Flutter Skia (2024 से पहले) या नए Impeller इंजन के माध्यम से प्रत्येक पिक्सेल स्वतंत्र रूप से खींचता है। यह सभी प्लेटफ़ॉर्म पर एकसमान दिखावट सुनिश्चित करता है और विभिन्न OS संस्करणों के अनुकूलन की समस्याओं को समाप्त करता है।

Statista 2024 के अनुसार, Flutter लोकप्रियता में क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क में पहले स्थान पर है: लगभग 46% डेवलपर्स इसका उपयोग मोबाइल डेवलपमेंट के लिए करते हैं। फ्रेमवर्क का उपयोग Google Pay, Alibaba, eBay, BMW और Tencent के प्रोजेक्ट्स में किया जाता है।

Flutter का इतिहास और संस्करण

पहला Flutter का अल्फा संस्करण 2015 में Dart डेवलपर समिट में Sky नाम से प्रस्तुत किया गया था। 2018 में केवल iOS और Android के समर्थन के साथ Flutter 1.0 जारी हुआ। Flutter 2.0 (2021) ने Web और Desktop समर्थन जोड़ा। Flutter 3.0 (2022) ने macOS और Linux के लिए स्थिर समर्थन पेश किया। Flutter 3.16 (2023) ने Impeller पेश किया — Metal और Vulkan पर आधारित एक नया रेंडरिंग इंजन।

Flutter 3.22 (2024) में iOS पर डिफ़ॉल्ट रूप से Impeller शामिल है, बेहतर Material Design 3 समर्थन, मैक्रो एक्सटेंशन के साथ Dart 3.4, और प्लेटफ़ॉर्म संसाधनों तक सीधी पहुंच के लिए अंतर्निहित Native Assets समर्थन। Google रिपोर्ट करता है कि Impeller Skia की तुलना में फ्रेम जैंक को 90% कम करता है।

Dart भाषा

Dart एक प्रोग्रामिंग भाषा है जिसे Google ने 2011 में बनाया और Flutter में उपयोग किया जाता है। Dart सख्त टाइपिंग को JIT कंपाइलेशन (Hot Reload के लिए) और AOT कंपाइलेशन (प्रोडक्शन बिल्ड के लिए) क्षमताओं के साथ जोड़ता है। Dart 3.0 (2023) ने पैटर्न मैचिंग, सील्ड क्लास और रिकॉर्ड्स को स्थिर सुविधाओं के रूप में पेश किया।

Dart में Null safety एक अनिवार्य सुविधा है जो संस्करण 2.12 से शुरू की गई है। कंपाइलर बिल्ड समय पर सभी नल करने योग्य प्रकारों की जाँच करता है, रनटाइम पर NullPointerException को समाप्त करता है। डेटा प्रकार (int, String, bool) डिफ़ॉल्ट रूप से गैर-नल करने योग्य हैं, और नल करने योग्य मान ? प्रत्यय का उपयोग करते हैं (जैसे, String? name)।

Flutter आर्किटेक्चर

Flutter आर्किटेक्चर तीन-स्तरीय सिद्धांत पर बनाया गया है। निचली परत इंजन (C/C++) है, जो रेंडरिंग, I/O और प्लेटफ़ॉर्म API तक पहुँच के लिए जिम्मेदार है। मध्य परत फ्रेमवर्क (Dart) है, जो विजेट सिस्टम, जेस्चर, एनिमेशन और नेविगेशन को लागू करती है। ऊपरी परत एप्लिकेशन (Dart) है, जो विजेट को एक ट्री में जोड़ती है।

विजेट और विजेट ट्री

Flutter में, सब कुछ एक विजेट है। विजेट दो प्रकार के होते हैं: StatelessWidget (अपरिवर्तनीय, स्थिति संग्रहीत नहीं करता) और StatefulWidget (परिवर्तनीय, State के माध्यम से स्थिति प्रबंधित करता है)। विजेट ट्री एक पदानुक्रमित संरचना है जहाँ प्रत्येक चाइल्ड विजेट पैरेंट के अंदर नेस्टेड होता है। Scaffold, AppBar, Container, Text, Column, Row — ये मूलभूत बिल्डिंग ब्लॉक हैं।

BuildContext एक ऑब्जेक्ट है जो ट्री में विजेट की स्थिति बताता है। MediaQuery.of(context) स्क्रीन के आयाम प्राप्त करता है, Theme.of(context) वर्तमान थीम प्राप्त करता है। BuildContext का उपयोग नेविगेशन (Navigator.of(context)), InheritedWidget तक पहुँच, और Localizations.of के माध्यम से लोकेल अनुवाद के लिए किया जाता है।

Impeller इंजन

Impeller Flutter का आधुनिक रेंडरिंग इंजन है, जो C++ में लिखा गया है और Metal (iOS/macOS) और Vulkan (Android) का उपयोग करता है। Skia के विपरीत, जो हर फ्रेम को शुरू से दोबारा खींचता था, Impeller शेडर्स को पहले से कंपाइल करता है और उन्हें कैश में संग्रहीत करता है। यह जटिल दृश्यों के पहली बार रेंडरिंग के दौरान देरी को समाप्त करता है और GPU लोड को कम करता है।

Google Flutter टीम के परीक्षण बताते हैं कि Impeller शेडर कंपाइलेशन समय को 200–500 ms (Skia) से घटाकर 1–3 ms कर देता है। iPhone 13 Pro पर, Impeller की इम्पल्स रेंडरिंग बिना फ्रेम ड्रॉप के 120 FPS प्राप्त करती है। Vulkan वाले Android पर, यह मिड-रेंज डिवाइसों (Xiaomi Redmi Note 12) पर भी स्थिर 60 FPS प्रदान करता है।

Flutter एप्लिकेशन उदाहरण

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter एप्लिकेशन')),
        body: const Center(
          child: Text('नमस्ते, Flutter!'),
        ),
      ),
    );
  }
}

Flutter के लाभ

एकल कोडबेस — Flutter का मुख्य लाभ। एक Dart प्रोजेक्ट iOS, Android, Web, Windows, macOS और Linux में कंपाइल होता है। Google के अनुसार, यह अलग-अलग iOS और Android प्रोजेक्ट्स की तुलना में डेवलपमेंट समय को 30–50% कम करता है। Alibaba ने Flutter पर स्विच करने के बाद संस्करण जारी करने का समय 30% कम कर दिया।

प्रदर्शन Flutter का नेटिव के करीब है। Dart का ARM और x86_64 मशीन कोड में AOT कंपाइलेशन इंटरप्रिटेशन देरी को समाप्त करता है। Impeller इंजन 2018 के डिवाइसों (iPhone XR, Samsung Galaxy S9) पर भी 60 FPS की गारंटी देता है। Google के अनुसार, Flutter एप्लिकेशन में 99.5% फ्रेम बिना जैंक के रेंडर होते हैं।

Hot Reload — तत्काल कोड अपडेट की तकनीक। डेवलपर स्रोत कोड बदलता है, फ़ाइल सहेजता है, और Flutter वर्तमान एप्लिकेशन स्थिति को खोए बिना 300–800 ms में विजेट ट्री को पुनर्निर्मित करता है। यह UI डिज़ाइन पुनरावृत्तियों को गति देता है: पूर्ण पुनर्निर्माण की प्रतीक्षा किए बिना सेकंड में मार्जिन, रंग और एनिमेशन बदले जा सकते हैं।

Material Design 3 और मूल Cupertino डिज़ाइन भाषा (iOS शैली) मानक Flutter पैकेज में शामिल हैं। Material 3 विजेट डायनामिक रंग (Material You), रिस्पॉन्सिव लेआउट और स्क्रीन संक्रमण एनिमेशन का समर्थन करते हैं। CupertinoPageTransition और CupertinoNavigationBar मूल iOS नेविगेटर व्यवहार की नकल करते हैं।

अनुकूलन विजेट्स के लिए प्रत्येक प्लेटफ़ॉर्म पर कस्टम View बनाने की आवश्यकता नहीं है। बस build() को ओवरराइड करें और एक नया विजेट लौटाएँ। एनिमेशन पैकेज (AnimatedContainer, Hero, TweenAnimationBuilder) और जेस्चर पैकेज (GestureDetector, Dismissible) प्लेटफ़ॉर्म कोड लिखे बिना UI एनिमेशन परिदृश्यों के 95% को कवर करते हैं।

Flutter इकोसिस्टम और पैकेज

pub.dev Dart और Flutter के लिए आधिकारिक पैकेज रजिस्ट्री है। जुलाई 2024 तक, रजिस्ट्री में 45,000 से अधिक पैकेज प्रकाशित हैं। पैकेज स्थापित करने के लिए कमांड flutter pub add <package_name> का उपयोग किया जाता है। Pub स्वचालित रूप से निर्भरताओं को हल करता है, संस्करण संगतता की जाँच करता है, और pubspec.lock जनरेट करता है।

Flutter में स्टेट मैनेजमेंट प्रमुख आर्किटेक्चरल चुनौतियों में से एक है। flutter_bloc के अलावा, लोकप्रिय समाधानों में शामिल हैं: Provider (Google द्वारा अनुशंसित, InheritedWidget का उपयोग करता है), Riverpod (कंपाइल-टाइम सुरक्षा के साथ Provider का पुनर्डिज़ाइन किया गया संस्करण), और GetX (सब-में-एक: स्थिति, रूटिंग, DI)। Provider सबसे सरल बना हुआ है: ChangeNotifierProvider मॉडल को लपेटता है, और Consumer डेटा बदलने पर विजेट को पुनर्निर्मित करता है।

Flutter में परीक्षण तीन स्तरों पर समर्थित है। यूनिट परीक्षण (flutter test) UI के बिना फ़ंक्शन और क्लास की जाँच करते हैं। विजेट परीक्षण (testWidgets) एक पृथक वातावरण में अलग-अलग विजेट रेंडर करते हैं। एकीकरण परीक्षण (IntegrationTest) डिवाइस या सिम्युलेटर पर पूर्ण एप्लिकेशन चलाते हैं। Flutter 3.22 ने पैच एनालिटिक्स और बेहतर कोड कवरेज रिपोर्टिंग के माध्यम से पैच परीक्षणों के लिए समर्थन जोड़ा।

लोकप्रिय पैकेज

dio इंटरसेप्टर, टाइमआउट और FormData के समर्थन के साथ एक HTTP क्लाइंट है। GitHub पर 40% Flutter प्रोजेक्ट्स में उपयोग किया जाता है। Dio लॉगिंग, रीट्राई और प्रमाणीकरण टोकन जोड़ने के लिए अनुरोध इंटरसेप्शन का समर्थन करता है। दूसरी सबसे लोकप्रिय लाइब्रेरी retrofit है, जो टाइप किए गए API क्लाइंट जनरेट करती है।

flutter_bloc BLoC (बिज़नेस लॉजिक कंपोनेंट) पैटर्न पर आधारित एक स्टेट मैनेजमेंट लाइब्रेरी है। BlocProvider विजेट ट्री में नीचे स्थितियाँ पास करता है, BlocBuilder स्थिति बदलने पर UI को पुनर्निर्मित करता है, और BlocListener साइड इफेक्ट्स (नेविगेशन, SnackBar) को संभालता है। Cubit बिना इवेंट के BLoC का सरलीकृत संस्करण है।

go_router Google द्वारा Flutter के लिए घोषणात्मक नेविगेशन है। रूट GoRouter कॉन्फ़िगरेशन में नेस्टेड रूट, रीडायरेक्ट और डीप लिंक के समर्थन के साथ वर्णित हैं। ShellRoute BottomNavigationBar टैब में नेविगेशन को विभाजित करता है। GoRouter 14.0 टाइप-सेफ पथ और टैब स्थिति संरक्षण के साथ StatefulShellRoute का समर्थन करता है।