Flutter मध्ये layouts कसे कार्य करतात?

Question

Accepted Answer

Flutter **layout widgets** — जसे की **Row**, **Column**, **Container**, **Stack**, आणि इतर — यांना compose करून layouts तयार करते जे त्यांच्या children ला व्यवस्थित करतात. UI structures तयार करण्यासाठी या layout widgets समजणे आणि ते कसे एकत्रित होतात हे समजणे मूलभूत आहे.

## मुख्य layout widgets

```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
```

## Layout compose करणे

```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'),
    ),
  ],
)
```

## लवचिक layouts (Row/Column main आणि cross axes)

```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 मध्ये layouts कसे कार्य करतात हे समजणे मूलभूत आहे कारण **UI elements ला व्यवस्थित करणे कोणत्याही interface तयार करण्यासाठी आवश्यक आहे**, त्यामुळे हे Flutter development साठी अवश्य जाणावे असे व्यावहारिक ज्ञान आहे.

Flutter **layout widgets** compose करून layouts तयार करते — आणि **मुख्य layout widgets** समजणे (Row क्षैतिज व्यवस्थेसाठी, Column उभ्या व्यवस्थेसाठी, Container styled boxes साठी padding/margin/decoration सह, Stack overlaying साठी, Padding आणि Center positioning साठी, Expanded/Flexible space भरण्यासाठी, ListView scrollable lists साठी) कोणत्याही UI structure तयार करण्यासाठी आवश्यक आहे.

या widgets चा प्रत्येक Flutter app मध्ये सतत वापर होतो.

**Compose करायला** कसे आहे हे समजणे (rows, columns, containers, आणि इतरांना nest करून complex layouts तयार करणे simple pieces पासून) हे Flutter UIs तयार करण्याचे मूलभूत सराव आहे — Flutter च्या सर्व बाजूंत अंतर्निहित समान composition principle, layout ला लागू केलेली.

**Flexible layout model** समजणे — Rows आणि Columns चे **main आणि cross axes** (children ला position करण्यासाठी mainAxisAlignment आणि crossAxisAlignment) आणि **Expanded/Flexible** उपलब्ध space proportionally share करण्यासाठी (responsive layouts सक्षम करणे जे विविध screen sizes ला adapt करतात) — हे विविध devices मध्ये layouts सुंदर दिसण्यासाठी महत्त्वाचे आहे, mobile apps साठी मुख्य चिंता आहे.

कारण कोणत्याही Flutter interface तयार करण्यासाठी layout widgets सह elements arrange करणे आवश्यक आहे, आणि core layout widgets, त्यांना कसे compose करायचे, आणि flexible/responsive layout model समजणे UIs construct करण्यासाठी आवश्यक आहे, Flutter मध्ये layouts कसे कार्य करतात हे समजणे आवश्यक, मूलभूत व्यावहारिक ज्ञान आहे — प्रत्येक Flutter screen मध्ये वापरलेली मुख्य कौशल्य, designs ला working, responsive interfaces मध्ये convert करण्यासाठी आवश्यक, आणि दैनंदिन Flutter development साठी मूलभूत आहे.