Flutter Widgets — यह क्या है, विजेट ट्री और build

Flutter Widgets क्या हैं?

Flutter Widgets — Flutter फ्रेमवर्क में सभी UI तत्व, अपरिवर्तनीय (immutable) Dart कक्षाओं के रूप में कार्यान्वित। विजेट एक UI तत्व का कॉन्फ़िगरेशन है: इसका आकार, रंग, स्थिति और ईवेंट हैंडलर। Android (XML + View) या iOS (Storyboard + UIView) के विपरीत, Flutter मूल घटकों का उपयोग नहीं करता — सब कुछ Canvas पर Skia (Android/iOS/Linux) या Impeller (iOS/macOS) इंजन द्वारा खींचा जाता है। यह बिना प्लेटफ़ॉर्म भिन्नता के सभी प्लेटफ़ॉर्म पर एक समान रूप सुनिश्चित करता है। Flutter विजेट के दो सेटों के साथ आता है: Material Widgets (Android/वेब के लिए Google Material Design 3) और Cupertino Widgets (iOS/macOS के लिए Apple HIG)। डेवलपर एक ही एप्लिकेशन में दोनों सेटों को जोड़ सकता है। प्रत्येक विजेट में build() विधि होती है जो एक चाइल्ड विजेट या उनकी संरचना लौटाती है — इस प्रकार विजेट ट्री बनाया जाता है।

Flutter के तीन ट्री

Flutter तीन ट्री के साथ काम करता है: Widget Tree (कॉन्फ़िगरेशन, डेवलपर द्वारा बनाया गया), Element Tree (ट्री में विजेट की स्थिति का मैपिंग, फ्रेमवर्क द्वारा प्रबंधित) और Render Tree (ऑब्जेक्ट जो लेआउट की गणना करते हैं और पेंटिंग करते हैं)। एक Widget एक Element बनाता है, जो एक RenderObject बनाता है। कॉन्फ़िगरेशन बदलने (rebuild) पर Element का पुन: उपयोग किया जाता है — यह Flutter का अनुकूलन तंत्र है: यदि विजेट का प्रकार और key मेल खाते हैं, तो Element पुन: नहीं बनाया जाता, बल्कि नए कॉन्फ़िगरेशन के साथ अपडेट किया जाता है। तीन ट्री को समझना Flutter एप्लिकेशन के प्रदर्शन को अनुकूलित करने की कुंजी है।

StatelessWidget: अपरिवर्तनीय विजेट

StatelessWidget — एक विजेट जो आंतरिक स्थिति संग्रहीत नहीं करता। यह कंस्ट्रक्टर के माध्यम से पैरामीटर प्राप्त करता है और build के बाद बदलने की क्षमता के बिना उन्हें प्रदर्शित करता है। StatelessWidget स्थैतिक तत्वों के लिए आदर्श है: शीर्षक, आइकन, अवतार, निश्चित डेटा वाली सूचियाँ। build() विधि निर्माण के समय और जब पैरेंट विजेट बदलता है, एक बार कॉल की जाती है। चूंकि StatelessWidget की कोई स्थिति नहीं है, इसे अलग State ऑब्जेक्ट की आवश्यकता नहीं है — build() सीधे विजेट क्लास में परिभाषित किया जाता है।

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — एक StatelessWidget जो कंस्ट्रक्टर के माध्यम से name और avatarUrl प्राप्त करता है। CircleAvatar अवतार प्रदर्शित करता है, Text नाम प्रदर्शित करता है। विजेट निर्माण के बाद इन मानों को नहीं बदल सकता। const कंस्ट्रक्टर (const ProfileHeader) का उपयोग Flutter को पैरेंट रीबिल्ड के दौरान विजेट इंस्टेंस का पुन: उपयोग करने की अनुमति देता है — सभी StatelessWidget के लिए अनुशंसित एक माइक्रो-ऑप्टिमाइज़ेशन।

StatefulWidget: स्थिति वाले विजेट

StatefulWidget — एक अलग State ऑब्जेक्ट में संग्रहीत परिवर्तनीय स्थिति वाला विजेट। StatefulWidget स्वयं अपरिवर्तनीय है, StatelessWidget की तरह। परिवर्तनीय भाग State को सौंपा गया है: State एक ऑब्जेक्ट है जो एक बार बनाया जाता है और कई विजेट रीबिल्ड से बच जाता है। जब स्थिति बदलती है (setState()), Flutter State पर build() कॉल करता है, UI को अपडेट करता है। StatefulWidget का उपयोग इंटरैक्टिव तत्वों के लिए किया जाता है: काउंटर, टेक्स्ट फ़ील्ड, चेकबॉक्स, एनिमेशन, टाइमर।

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — State क्लास _LikeButtonState के साथ एक StatefulWidget। फ़ील्ड liked और count State में संग्रहीत स्थिति हैं और रीबिल्ड पर रीसेट नहीं होते। setState() Flutter को सूचित करता है कि UI को पुनर्निर्माण की आवश्यकता है। Flutter प्रत्येक पैरेंट रीबिल्ड पर State को पुन: नहीं बनाता — केवल जब कॉन्फ़िगरेशन (key या विजेट प्रकार) बदलता है। IT Sectr में, हम प्रदर्शन के लिए StatelessWidget और इंटरैक्टिव घटकों के लिए StatefulWidget का उपयोग करते हैं, म्यूटेशन की सीमाओं तक StatefulWidget को कम करने के सिद्धांत का पालन करते हुए।

विजेट ट्री: Widget से RenderObject तक

Widget Tree — एप्लिकेशन UI का वर्णन करने वाले विजेट की पदानुक्रमित संरचना। Flutter Widget Tree को Element Tree में परिवर्तित करता है: प्रत्येक Widget एक Element बनाता है, जो ट्री में अपनी स्थिति और RenderObject से कनेक्शन को ट्रैक करता है। Render Tree लेआउट (आकार और स्थिति निर्धारण) और पेंट (रेंडरिंग) करता है। Element एक महत्वपूर्ण अनुकूलन परत है: यदि रीबिल्ड के दौरान विजेट प्रकार और key नहीं बदले हैं, तो Element का पुन: उपयोग किया जाता है, RenderObject को पुन: बनाए बिना कॉन्फ़िगरेशन अपडेट किया जाता है। यह उच्च फ्रेम दर (60/120 FPS) पर Flutter के प्रदर्शन को सुनिश्चित करता है।

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter विजेट')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'नमस्ते, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen विजेट ट्री: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]। Scaffold मूल Material Design लेआउट विजेट है। Center अपने चाइल्ड Column को केंद्रित करता है। Column चिल्ड्रन को केंद्र संरेखण (mainAxisAlignment.center) के साथ लंबवत रूप से व्यवस्थित करता है। Flutter लेआउट की गणना ऊपर से नीचे (पैरेंट से constraints पास किए जाते हैं) और आकार नीचे से ऊपर (sizedByParent या चिल्ड्रन से साइज़िंग) करता है।

BuildContext: बिल्ड संदर्भ और ट्री तक पहुँच

BuildContext — Element Tree में विजेट की स्थिति का एक वर्णनकर्ता। प्रत्येक build() विधि एक BuildContext प्राप्त करती है, जिसके माध्यम से विजेट पहुँच सकता है: MediaQuery (स्क्रीन आकार, ओरिएंटेशन, पिक्सेल घनत्व, सुरक्षित क्षेत्र), Theme (MaterialThemeData या CupertinoThemeData), Navigator (नेविगेशन स्टैक), ScaffoldMessenger (SnackBar), InheritedWidget (ट्री में नीचे डेटा पास करना)। BuildContext को build() पूरा होने के बाद सहेजा नहीं जाना चाहिए या सिंक्रोनस संदर्भ के बाहर उपयोग नहीं किया जाना चाहिए — इससे “Scaffold.of() called with a context that does not contain a Scaffold” जैसी त्रुटियाँ होती हैं। कॉन्टेक्स्ट को सहेजने के बजाय, डेटा तक पहुँच के लिए Builder विजेट या InheritedWidget पैटर्न का उपयोग करें।

Key: ट्री में विजेट की पहचान

Key — प्रत्येक विजेट के कंस्ट्रक्टर का एक वैकल्पिक पैरामीटर (super.key)। Key Flutter को सूची में आइटम के क्रम या संख्या बदलने पर विजेट की पहचान करने में मदद करता है। Key के बिना, Flutter विजेट की तुलना प्रकार और स्थिति से करता है; Key के बिना सूची के बीच में एक आइटम जोड़ने पर, Flutter गलत विजेट के लिए Element का पुन: उपयोग करता है, जिससे स्थिति संबंधी बग (StatefulWidget) और एनिमेशन समस्याएँ होती हैं। सूचियों के लिए ValueKey (अद्वितीय पहचानकर्ता), ObjectKey (डेटा ऑब्जेक्ट पर आधारित), UniqueKey (प्रत्येक रीबिल्ड पर गारंटीकृत अद्वितीय — बलपूर्वक पुनर्निर्माण के लिए) का उपयोग करें।

Flutter विजेट कैटलॉग: Material, Cupertino, Layout

Flutter SDK (स्थिर संस्करण 3.3+, Dart 3+) में 200+ अंतर्निहित विजेट श्रेणियों में विभाजित हैं: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) और Accessibility (Semantics, MergeSemantics, ExcludeSemantics)। लेआउट विजेट किसी भी Flutter UI की नींव हैं: Row क्षैतिज अनुक्रमों के लिए, Column लंबवत के लिए, Stack ओवरलैपिंग तत्वों के लिए, सजावट के लिए BoxDecoration के साथ Container।