Flutter में widgets क्या हैं?

Question

IT Interview Practice · Accepted Answer

Flutter में, **सब कुछ एक widget है** — UI तत्व (बटन, पाठ, छवियां), लेआउट संरचनाएं (पंक्तियां, स्तंभ, padding) और यहां तक कि ऐप्लिकेशन ही सभी widgets हैं। Widgets अपरिवर्तनीय निर्माण खंड हैं जो संपूर्ण उपयोगकर्ता इंटरफेस बनाने के लिए रचना करते हैं।

## सब कुछ एक widget है

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## Widgets को tree में बनाना

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Widgets एक **widget tree** बनाने के लिए नेस्ट करते हैं — रचना मुख्य पैटर्न है (सरल widgets को जटिल UIs में जोड़ें)।

## Widgets अपरिवर्तनीय हैं; configuration

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## यह क्यों महत्वपूर्ण है

Flutter में widgets को समझना मौलिक है क्योंकि **Flutter में सब कुछ एक widget है** — संपूर्ण UI उनसे बनाया गया है — इसलिए widget मॉडल को समझना Flutter विकास के लिए आवश्यक, मौलिक ज्ञान है।

मुख्य अवधारणा — कि दृश्यमान तत्व (पाठ, बटन, छवियां), लेआउट संरचनाएं (पंक्तियां, स्तंभ, padding), पृष्ठ संरचना और यहां तक कि ऐप्लिकेशन **सभी widgets हैं** — यह Flutter कैसे काम करता है इसकी परिभाषित विशेषता है, और इसे समझना किसी भी Flutter UI बनाने का प्रारंभिक बिंदु है।

यह समझना कि UIs **widgets को tree में बनाकर** निर्मित हैं (widgets को नेस्ट करना, सरल लोगों को जटिल इंटरफेस में जोड़ना) Flutter विकास का मौलिक पैटर्न है — विरासत पर रचना, सरल, पुन: प्रयोज्य निर्माण खंडों से जटिल UIs बनाना।

यह समझना कि **widgets UI का अपरिवर्तनीय विवरण हैं** (वास्तव में प्रस्तुत वस्तुएं नहीं, configuration, Flutter उन्हें कुशलतापूर्वक फिर से बनाता है जब state बदलता है) Flutter के घोषणात्मक UI मॉडल कैसे काम करता है यह समझने के लिए महत्वपूर्ण है — आप वर्णन करते हैं कि UI कैसा दिखना चाहिए, और Flutter कुशलतापूर्वक रेंडरिंग को संभालता है।

यह widget-और-रचना मॉडल Flutter में सब कुछ को रेखांकित करता है: लेआउट, स्टाइलिंग, state management और संरचना सभी widgets के माध्यम से काम करते हैं।

चूंकि widget Flutter की परमाणु इकाई है (सब कुछ एक widget है, UIs रचना द्वारा निर्मित widget trees हैं) और इस मॉडल को समझना Flutter UIs बनाने की संपूर्ण नींव है, widgets को समझना — कि सब कुछ एक widget है, trees में रचना, और उनकी अपरिवर्तनीय घोषणात्मक प्रकृति — आवश्यक, मौलिक Flutter ज्ञान है, मुख्य अवधारणा जिस पर Flutter विकास के हर पहलू निर्मित हैं और Flutter सीखते समय समझने के लिए पहली चीज है।

सब कुछ एक widget है

Widgets को tree में बनाना

Widgets अपरिवर्तनीय हैं; configuration

यह क्यों महत्वपूर्ण है

संबंधित प्रश्न