Flutter मा layouts कसरी काम गर्छन्?

Question

Accepted Answer

Flutter **layout widgets** — जस्तै **Row**, **Column**, **Container**, **Stack**, र अन्य — लाई compose गरेर layouts बनाउँछ जुन तिनीहरूका children लाई arrange गर्छ। यी layout widgets र तिनीहरू कसरी संयुक्त हुन्छन् भन्ने कुरा बुझ्नु UI संरचना बनाउन मौलिक छ।

## Core 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 को Composing

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

## Flexible 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 लाई arrange गर्नु कुनै पनि interface बनाउन आवश्यक** छ, त्यसैले यो Flutter development को लागि अवश्य-थाह्ने व्यावहारिक ज्ञान हो।

Flutter **layout widgets** लाई compose गरेर layouts बनाउँछ — र **core layout widgets** (Row को horizontal arrangement को लागि, Column को vertical को लागि, Container को styled boxes को लागि padding/margin/decoration सहित, Stack को overlaying को लागि, Padding र Center को positioning को लागि, Expanded/Flexible को space fill गर्न को लागि, ListView को scrollable lists को लागि) बुझ्नु कुनै पनि UI संरचना निर्माण गर्न आवश्यक छ।

यी widgets प्रत्येक Flutter app मा लगातार प्रयोग हुन्छन्।

**तिनीहरूलाई compose गर्ने** तरिका बुझ्नु (rows, columns, containers, र अन्यलाई nest गरेर जटिल layouts लाई साधारण pieces बाट बनाउनु) Flutter UIs बनाउने मौलिक अभ्यास हो — एउटै composition principle जुन सबै Flutter लाई अधारभूत गर्छ, layout मा लागु गरिएको।

**flexible layout model** बुझ्नु — **main र cross axes** को Rows र Columns को (mainAxisAlignment र crossAxisAlignment को लागि children को positioning) र **Expanded/Flexible** को लागि उपलब्ध space लाई proportionally साझा गर्न (responsive layouts लाई enable गर्दै जो फरक फरक screen sizes मा अनुकूलन गर्छ) — विभिन्न devices मा राम्रो देखिने layouts बनाउन महत्त्वपूर्ण छ, जुन mobile apps को लागि मुख्य चिन्ता हो।

कुनै पनि Flutter interface बनाउन layout widgets सहित elements लाई arrange गर्न आवश्यक छ, र core layout widgets बुझ्नु, तिनीहरूलाई compose गर्ने तरिका, र flexible/responsive layout model आवश्यक छ UIs निर्माण गर्न, Flutter मा layouts कसरी काम गर्छन् भन्ने कुरा बुझ्नु आवश्यक, अधारभूत व्यावहारिक ज्ञान हो — एक core skill जुन प्रत्येक Flutter screen मा प्रयोग हुन्छ, designs लाई working, responsive interfaces मा translate गर्न आवश्यक, र Flutter development को दैनिक काममा मौलिक हो।