Flutter இல் widgets என்றால் என்ன?

Question

Accepted Answer

Flutter இல், **எல்லாமும் widget ஆக உள்ளது** — UI உறுப்புகள் (buttons, text, images), layout structures (rows, columns, padding), மற்றும் app itself கூட widgets ஆகும். Widgets என்பவை immutable building blocks ஆக இருந்து, முழு user interface ஐ அமைக்கின்றன.

## Everything is a 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).
```

## Composing widgets into a 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** ஐ உருவாக்குகின்றன — composition என்பது முக்கிய pattern ஆகும் (simple widgets ஐ complex UIs ஆக சேர்க்கவும்).

## Widgets are immutable; 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
```

## ஏன் இது முக்கியமானது

Widgets ஐ புரிந்துகொள்வது Flutter க்கு அடிப்படையாக உள்ளது, ஏனெனில் **Flutter இல் எல்லாமும் widget ஆக உள்ளது** — முழு UI இவற்றிலிருந்து கட்டமைக்கப்படுகிறது — எனவே widget model ஐ புரிந்துகொள்வது அத்தியாவசியமான, அடிப்படையான Flutter development க்கான அறிவு.

முக்கிய concept — visible elements (text, buttons, images), layout structures (rows, columns, padding), page structure, மற்றும் app itself கூட **all widgets** ஆகும் — என்பது Flutter எப்படி செயல்படுகிறது என்பதின் வரையறுக்கும் பண்பு ஆகும், மற்றும் இதை புரிந்துகொள்வது எந்த Flutter UI ஐ கட்டமைக்க வேண்டுமெனில் தொடக்க புள்ளி ஆகும்.

UIs ஐ **widgets ஐ tree ஆக composing** செய்து கட்டமைக்கப்படுகிறது என்பதை புரிந்துகொள்வது (widgets ஐ nesting செய்வது, simple ones ஐ complex interfaces ஆக சேர்ப்பது) என்பது Flutter development இன் அடிப்படையான pattern ஆகும் — inheritance க்கு பதிலாக composition, simple, reusable building blocks களிலிருந்து complex UIs ஐ கட்டமைக்கவும்.

**Widgets immutable descriptions** ஆக UI இயல்பாக உள்ளது என்பதை புரிந்துகொள்வது (actual rendered objects ஐ விட configuration, state changes ஆகும் போது Flutter அவற்றை efficiently rebuild செய்கிறது) என்பது Flutter இன் declarative UI model எப்படி செயல்படுகிறது என்பதை புரிந்துகொள்ள முக்கியமாக உள்ளது — UI எப்படி இருக்க வேண்டும் என்பதை நீங்கள் விவரிக்கிறீர்கள், மற்றும் Flutter rendering ஐ efficiently கையாளுகிறது.

இந்த widget-and-composition model Flutter இல் எல்லாவற்றிற்கும் அடிப்படையாக உள்ளது: layouts, styling, state management, மற்றும் structure எல்லாம் widgets மூலம் செயல்படுகிறது.

Widget என்பது Flutter இன் atomic unit ஆக உள்ளது (எல்லாமும் widget ஆக உள்ளது, UIs widget trees ஆக composition மூலம் கட்டமைக்கப்படுகிறது) மற்றும் இந்த model ஐ புரிந்துகொள்வது Flutter UIs ஐ கட்டமைப்பதற்கான முழுமையான அடிப்படை ஆக உள்ளது, எனவே widgets ஐ புரிந்துகொள்வது — எல்லாமும் widget ஆக உள்ளது, trees ஆக composition, மற்றும் அவற்றின் immutable declarative nature — அத்தியாவசியமான, அடிப்படையான Flutter knowledge ஆகும், Flutter development இன் ஒவ்வொரு aspect ம் அமைந்திருக்கும் core concept மற்றும் Flutter ஐ கற்கும் போது புரிந்துகொள்ள வேண்டிய முதல் விஷயம் ஆகும்.