Flutter ਵਿੱਚ ਲੇਆਊਟ ਕਿਵੇਂ ਕਾਰਜ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

Flutter **ਲੇਆਊਟ ਵਿਜੈਟਾਂ ਨੂੰ ਰਚ ਕੇ** ਲੇਆਊਟ ਬਣਾਉਂਦਾ ਹੈ — ਜਿਵੇਂ **Row**, **Column**, **Container**, **Stack**, ਅਤੇ ਹੋਰ — ਜੋ ਆਪਣੇ ਬੱਚਿਆਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਦੇ ਹਨ। ਇਹਨਾਂ ਲੇਆਊਟ ਵਿਜੈਟਾਂ ਨੂੰ ਸਮਝਣਾ ਅਤੇ ਇਹ ਕਿਵੇਂ ਇਕੱਠੇ ਕੰਮ ਕਰਦੇ ਹਨ, UI ਬਣਤਰ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦੀ ਹੈ।

## ਮੁੱਖ ਲੇਆਊਟ ਵਿਜੈਟਸ

```text
ROW → arrange children HORIZONTALLY (left to right)
COLUMN → arrange children VERTICALLY (top to bottom)
CONTAINER → a box: padding, margin, size, color, decoration, alignment (very common)
STACK → overlay children on top of each other (z-axis, positioned)
PADDING → add space around a child
CENTER → center a child
EXPANDED / FLEXIBLE → make children fill available space (in a Row/Column)
SizedBox → fixed-size box / spacing
ListView → scrollable list of children
```

## ਲੇਆਊਟ ਨੂੰ ਸੰਯੁਕਤ ਕਰਨਾ

```dart
Column(                          // vertical arrangement
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    SizedBox(height: 8),         // spacing
    Row(                         // horizontal arrangement
      children: [
        Icon(Icons.star),
        Expanded(                // takes remaining horizontal space
          child: Text('Description'),
        ),
      ],
    ),
    Container(                   // a styled box
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text('Boxed'),
    ),
  ],
)
```

## ਲਚਕਦਾਰ ਲੇਆਊਟ (Row/Column ਮੁੱਖ ਅਤੇ ਅੰਤਰੀ ਧੁਰੀਆਂ)

```text
→ MAIN axis (Row=horizontal, Column=vertical): mainAxisAlignment positions children
  along it (start, center, end, spaceBetween, etc.)
→ CROSS axis (perpendicular): crossAxisAlignment
→ EXPANDED/FLEXIBLE → children share available space proportionally (responsive layouts)
→ Compose these for flexible, responsive UIs.
```

## ਇਹ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Flutter ਵਿੱਚ ਲੇਆਊਟ ਕਿਵੇਂ ਕਾਰਜ ਕਰਦੇ ਹਨ ਇਹ ਸਮਝਣਾ ਬੁਨਿਆਦੀ ਹੈ ਕਿਉਂਕਿ **UI ਤੱਤਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨਾ ਕਿਸੇ ਵੀ ਇੰਟਰਫੇਸ ਨੂੰ ਬਣਾਉਣ ਲਈ ਜरूरी ਹੈ**, ਇਸ ਲਈ ਇਹ Flutter ਡਿਵੈਲਪਮਿੰਟ ਲਈ ਲਾਜ਼ਮੀ ਵਿਹਾਰਕ ਜ਼ਿਆਨ ਹੈ।

Flutter **ਲੇਆਊਟ ਵਿਜੈਟਾਂ ਨੂੰ ਸੰਯੁਕਤ ਕਰਕੇ** ਲੇਆਊਟ ਬਣਾਉਂਦਾ ਹੈ — ਅਤੇ **ਮੁੱਖ ਲੇਆਊਟ ਵਿਜੈਟਾਂ** ਨੂੰ ਸਮਝਣਾ (ਖਿਤਿਜੀ ਪ੍ਰਬੰਧ ਲਈ Row, ਲੰਬਕਾਰੀ ਲਈ Column, ਪੈਡਿੰਗ/ਮਾਰਜਿਨ/ਸਜਾਵਟ ਦੇ ਨਾਲ ਸਟਾਇਲ ਕੀਤੇ ਬਕਸਿਆਂ ਲਈ Container, ਓਵਰਲੇ ਕਰਨ ਲਈ Stack, ਸਥਿਤੀ ਲਈ Padding ਅਤੇ Center, ਥਾਂ ਭਰਨ ਲਈ Expanded/Flexible, ਸਕ੍ਰੈਲ ਕਰਨ ਯੋਗ ਸੂਚੀਆਂ ਲਈ ListView) ਕਿਸੇ ਵੀ UI ਬਣਤਰ ਨੂੰ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।

ਇਹ ਵਿਜੈਟਾਂ ਹਰੇਕ Flutter ਐਪ ਵਿੱਚ ਲਗਾਤਾਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

**ਉਹਨਾਂ ਨੂੰ ਸੰਯੁਕਤ ਕਰਨ ਦਾ ਤਰੀਕਾ** ਸਮਝਣਾ (rows, columns, containers, ਅਤੇ ਹੋਰਾਂ ਨੂੰ ਆਸਾਨ ਟੁਕੜਿਆਂ ਤੋਂ ਗੁੰਝਲਦਾਰ ਲੇਆਊਟ ਬਣਾਉਣ ਲਈ ਨੇਸਟ ਕਰਨਾ) Flutter UIs ਬਣਾਉਣ ਦੀ ਬੁਨਿਆਦੀ ਪ੍ਰਥਾ ਹੈ — ਉਹੀ ਸੰਯੋਜਨ ਸਿਧਾਂਤ ਜੋ Flutter ਦੇ ਸਾਰੇ ਨੂੰ ਅੰਡਰਲਾਈ ਕਰਦਾ ਹੈ, ਲੇਆਊਟ ਤੇ ਲਾਗੂ।

**ਲਚਕਦਾਰ ਲੇਆਊਟ ਮਾਡਲ** ਨੂੰ ਸਮਝਣਾ — Rows ਅਤੇ Columns ਦੀਆਂ **ਮੁੱਖ ਅਤੇ ਅੰਤਰੀ ਧੁਰੀਆਂ** (ਬੱਚਿਆਂ ਦੀ ਸਥਿਤੀ ਲਈ mainAxisAlignment ਅਤੇ crossAxisAlignment) ਅਤੇ **Expanded/Flexible** ਦੀ ਪ੍ਰਭਾਵੀ ਥਾਂ ਨੂੰ ਅਨੁਪਾਤ ਰੂਪ ਵਿੱਚ ਸਾਂਝਾ ਕਰਨਾ (ਵਿਆਖਿਆ ਦੇ ਅਨੁਸਾਰ ਲਚਕਦਾਰ ਲੇਆਊਟ ਜੋ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਅਕਾਰ ਲਈ ਖੁਦ ਨੂੰ ਅਨੁਕੂਲ ਕਰਦੇ ਹਨ) — ਵਿਭਿੰਨ ਡਿਵਾਈਸਾਂ ਤੋਂ ਬਿਨਾ ਚੰਗੇ ਲੇਆਊਟ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ, ਮੋਬਾਈਲ ਐਪਸ ਲਈ ਮੁੱਖ ਚਿੰਤਾ।

ਕਿਉਂਕਿ ਕਿਸੇ ਵੀ Flutter ਇੰਟਰਫੇਸ ਨੂੰ ਬਣਾਉਣ ਲਈ ਲੇਆਊਟ ਵਿਜੈਟਾਂ ਦੇ ਨਾਲ ਤੱਤਾਂ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੈ, ਅਤੇ ਕਿਉਂਕਿ ਮੁੱਖ ਲੇਆਊਟ ਵਿਜੈਟਾਂ, ਉਹਨਾਂ ਨੂੰ ਸੰਯੁਕਤ ਕਰਨ ਦਾ ਤਰੀਕਾ, ਅਤੇ ਲਚਕਦਾਰ/ਪ੍ਰਤਿਕ੍ਰਿਆਸ਼ੀਲ ਲੇਆਊਟ ਮਾਡਲ ਨੂੰ ਸਮਝਣਾ UIs ਨੂੰ ਬਣਾਉਣ ਲਈ ਜರੂਰੀ ਹੈ, Flutter ਵਿੱਚ ਲੇਆਊਟ ਕਿਵੇਂ ਕਾਰਜ ਕਰਦੇ ਹਨ ਇਹ ਸਮਝਣਾ ਲਾਜ਼ਮੀ, ਅਸਲ ਵਿਹਾਰਕ ਜ਼ਿਆਨ ਹੈ — ਇੱਕ ਮੂਲ ਹੁਨਰ ਜੋ ਹਰ Flutter ਸਕ੍ਰੀਨ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਡਿਜਾਈਨਾਂ ਨੂੰ ਕੰਮ ਕਰ ਰਹੇ, ਪ੍ਰਤਿਕ੍ਰਿਆਸ਼ੀਲ ਇੰਟਰਫੇਸਾਂ ਵਿੱਚ ਬਦਲਣ ਲਈ ਲਾਜ਼ਮੀ ਹੈ, ਅਤੇ ਰੋਜ਼ਾਨਾ Flutter ਡਿਵੈਲਪਮਿੰਟ ਲਈ ਬੁਨਿਆਦੀ ਹੈ।