Flutter 8: Amaliyot — 30 ta Vizual UI Topshiriq (Flutter Widget Tree Challenge)

💙 Flutter — Mobile (iOS, Android) & Desktop (macOS, Windows)

Flutter 8: Amaliyot — 30 ta Vizual UI Topshiriq (Flutter Widget Tree Challenge)

Holat: Ushbu qo'llanma 2026-yil holatiga ko'ra Flutter 3.x va Dart 3+ talablari asosida iOS dasturchilari uchun tayyorlangan. Barcha kodlar zamonaviy const konstruktorlar, Null Safety, SwiftUI va UIKit (SnapKit) taqqoslashlari bilan boyitilgan.

iOS dasturchisi (Swift/SwiftUI/UIKit) Flutter'ga o'tayotganida eng katta to'siq — bu sintaksis emas, balki Layout (Vidjetlar daraxti) tafakkuridir.

UIKit/SnapKit'da: Biz o'zimiz xohlagan view'ga xohlagan tomondan constraint bog'laymiz (make.top, make.leading, offset).
SwiftUI'da: Deklarativ oqim (VStack, HStack, padding, frame).
Flutter'da esa qat'iy qoida mavjud:

"Constraints go down. Sizes go up. Parent sets position." (Cheklovlar pastga tushadi. O'lchamlar yuqoriga qaytadi. Ota-ona vidjet joylashuvni belgilaydi.)

Ushbu amaliy darslikda aynan iOS dasturchisi nigohi bilan Flutterni chuqur his qilish uchun 30 ta vizual vazifa jamlandi. Ular oddiy Center va Containerdan boshlanib, real loyihalardagi murakkab CustomScrollView, SliverAppBar va ko'p tarmoqli feed'largacha qiyinlashib boradi.

🧭 Mashg'ulot Qoidalari va Tavsiyalar

Avval mustaqil bajaring: Vizual sxemaga qarab Flutter'da vidjetlar daraxtini (Widget Tree) qanday tuzishni o'zingiz sinab ko'ring.
Kodni tekshiring: Qiyinchilik tug'ilsa, "💡 Kodni ko'rish" tugmasini bosing:
Flutter (Dart): Asosiy toza Flutter yechimi.
SwiftUI ekvivalenti: iOS'da bunga nima to'g'ri kelishi.
UIKit (SnapKit) ekvivalenti: Imperativ Auto Layout bilan taqqoslash.
Pro Tip: Har bir topshiriqdagi "iOS Dev uchun Eslatma" qismini diqqat bilan o'qing — u yerda Flutterning eng mashhur xatolari (RenderFlex overflowed, cheksiz balandlik xatolari) tushuntirilgan.

📊 Qiyinchilik Darajalari

Daraja	Vazifalar	Qamrab Olingan Mavzular
🟢 Oson (Easy)	01 – 05	Center, Padding, DecoratedBox, Column & Spacing, SafeArea, Row
🟡 O'rta (Medium)	06 – 11	AspectRatio, Stack & Positioned, ConstrainedBox, Expanded 3 ustun, TextOverflow.ellipsis, Notification Banner
🟠 Qiyin (Hard)	12 – 16	E-Commerce Product Card, FAB & BottomAppBar, Self-Sizing Card, SingleChildScrollView, AnimatedAlign Tab
🔴 Qahramon (Hero)	17 – 20	Mini-Player, Stories Concentric Rings, Bank Card (1.586 ratio), Paywall Subscription Stack
👑 Titan (Real-World Screens)	21 – 30	Profile (Slivers), Home Multi-Feed, Telegram Chat (Inverted ListView), Fintech Dashboard, Food Delivery (SliverAppBar), Crypto Order Book, App Store Today Card, Fitness Dashboard, Checkout Form, Full Podcast Player

🟢 Topshiriq 01: Markazdagi Kvadrat (Center & Container)

Daraja: Oson (Easy) | Maqsad: Ekran markazida 120x120 dp o'lchamli burchaklari yumaloqlangan ko'k kvadratni joylashtirish.

Flutterning eng asosiy o'q markazlashtiruvchisi Center va universal qutisi Container bilan tanishish.

Vizual Sxema (UI Mockup)

Topshiriq 01: Markazdagi Kvadrat (Center & Container)

📋 Texnik Talablar va Cheklovlar

Kvadrat kengligi (width) va balandligi (height): 120 dp.
Burchaklar radiusi (BorderRadius): 16 dp.
Kvadrat butun ekranning gorizontal va vertikal markazida bo'lsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task01CenterSquare extends StatelessWidget {
  const Task01CenterSquare({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: Center(
        child: Container(
          width: 120,
          height: 120,
          decoration: BoxDecoration(
            color: const Color(0xFF02569B),
            borderRadius: BorderRadius.circular(16),
            border: Border.all(color: const Color(0xFF38BDF8), width: 1.5),
          ),
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

// SwiftUI ekvivalenti:
ZStack {
    Color(white: 0.1).ignoresSafeArea()
    RoundedRectangle(cornerRadius: 16)
        .fill(Color.blue)
        .frame(width: 120, height: 120)
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

// SnapKit ekvivalenti:
blueBox.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.size.equalTo(120)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutter'da Container ga o'lcham va bezak (BoxDecoration) bir vaqtda beriladi. DIQQAT: Agar decoration parametrini ishlatsangiz, color ni tashqarida emas, aynan decoration: BoxDecoration(color: ...) ichida yozish shart, aks holda runtime assertion xatosi yuzaga keladi!

</details>

🟢 Topshiriq 02: Chetlaridan Bir Xil Masofa (Padding & DecoratedBox)

Daraja: Oson (Easy) | Maqsad: Ekranning barcha to'rtta chetidan 20 dp ichki bo'shliq tashlab, to'liq cho'ziluvchi kartani hosil qilish.

Flutteda Padding vidjeti yoki Container(margin: ...) orqali barcha chetlardan bir xil oraliq tashlash.

Vizual Sxema (UI Mockup)

Topshiriq 02: Chetlaridan Bir Xil Masofa (Padding & DecoratedBox)

📋 Texnik Talablar va Cheklovlar

To'rtta chetdan ham 20 dp oraliq (EdgeInsets.all(20)).
Karta ota-onaning butun bo'sh maydonini egallashi kerak.
Burchaklar radiusi 14 dp.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task02PaddingCard extends StatelessWidget {
  const Task02PaddingCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: const Color(0xFF0077B6),
              borderRadius: BorderRadius.circular(14),
            ),
            child: const Center(
              child: Text(
                'Padding(EdgeInsets.all(20))',
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

RoundedRectangle(cornerRadius: 14)
    .fill(Color.blue)
    .padding(20)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

card.snp.makeConstraints { make in
    make.edges.equalToSuperview().inset(20)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutter'da width: double.infinity va height: double.infinity yozish — iOS'dagi make.edges.equalToSuperview() bilan bir xil ma'noni anglatadi, ya'ni ota-ona ruxsat bergan maksimal chegaragacha cho'ziladi.

</details>

🟢 Topshiriq 03: Ketma-ket Ikkita Karta (Column & SizedBox Spacing)

Daraja: Oson (Easy) | Maqsad: Biri ikkinchisining ostida joylashgan va orasi 16 dp bo'lgan ikkita balandligi 85 dp lik kartani joylashtirish.

Vertikal tartib (Column) va vidjetlar orasidagi masofani boshqarish (SizedBox(height: 16)).

Vizual Sxema (UI Mockup)

Topshiriq 03: Ketma-ket Ikkita Karta (Column & SizedBox Spacing)

📋 Texnik Talablar va Cheklovlar

Yuqoridagi karta: balandligi 85 dp, chetlardan 24 dp.
Oraliq masofa: 16 dp.
Pastki karta: balandligi 85 dp.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task03ColumnCards extends StatelessWidget {
  const Task03ColumnCards({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 35.0),
        child: Column(
          children: [
            Container(
              height: 85,
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFF02569B),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
            const SizedBox(height: 16), // Masofa oraliq qutisi!
            Container(
              height: 85,
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFF7B2CBF),
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

VStack(spacing: 16) {
    RoundedRectangle(cornerRadius: 12).frame(height: 85)
    RoundedRectangle(cornerRadius: 12).frame(height: 85)
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

card1.snp.makeConstraints { make in make.height.equalTo(85) }
card2.snp.makeConstraints { make in
    make.top.equalTo(card1.snp.bottom).offset(16)
    make.height.equalTo(85)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: iOS SwiftUI'da VStack(spacing: 16) ishlatilsa, Flutter'da eng qulay va keng tarqalgan usul — vidjetlar orasiga const SizedBox(height: 16) qo'yishdir. const qo'yilishi esa Flutterni qayta chizishda (re-render) CPU va xotirani 0% sarflashini ta'minlaydi.

</details>

🟢 Topshiriq 04: Bosh Banner va Pastki Tugma (SafeArea & Spacer)

Daraja: Oson (Easy) | Maqsad: Ekranning tepasida header banner (56 dp), pastida esa pastki chegaraga qadalgan harakat tugmasi (48 dp).

iPhone Notch va Home Bar'dan saqlovchi SafeArea va elementlarni ikki qutbga itaruvchi Spacer() vidjeti.

Vizual Sxema (UI Mockup)

Topshiriq 04: Bosh Banner va Pastki Tugma (SafeArea & Spacer)

📋 Texnik Talablar va Cheklovlar

Header: balandligi 56 dp, Safe Area tepasidan 8 dp masofada.
Pastki tugma: balandligi 48 dp, Safe Area ostidan 8 dp masofada, to'liq kenglikda.
O'rtadagi bo'shliq Spacer() orqali avtomatik to'ldirilsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task04SafeAreaButton extends StatelessWidget {
  const Task04SafeAreaButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: Column(
            children: [
              Container(
                height: 56,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: const Color(0xFF1E293B),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Center(
                  child: Text('Header Banner', style: TextStyle(color: Colors.white)),
                ),
              ),
              const Spacer(), // Bo'shliqni to'liq egallaydi!
              SizedBox(
                height: 48,
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF0284C7),
                    shape: const StadiumBorder(),
                  ),
                  child: const Text('Davom etish', style: TextStyle(color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

VStack {
    HeaderView().frame(height: 56)
    Spacer()
    Button("Davom etish") {}.frame(height: 48)
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

header.snp.makeConstraints { make in
    make.top.equalTo(view.safeAreaLayoutGuide).offset(8)
}
button.snp.makeConstraints { make in
    make.bottom.equalTo(view.safeAreaLayoutGuide).offset(-8)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutter Spacer() vidjeti Expanded(child: SizedBox()) ning qisqartmasi hisoblanadi. U Column yoki Row ichidagi bo'sh joyni 100% o'ziga oladi va qolgan elementlarni chetga itaradi.

</details>

🟢 Topshiriq 05: Doiraviy Avatar va Yonidagi Matn (Row & Column)

Daraja: Oson (Easy) | Maqsad: Chapda 64x64 radiusli doiraviy profil rasmi (CircleAvatar), o'ngda esa vertikal tekislangan Ism va Kasb yozuvlari.

Gorizontal Row va vertikal Column ning eng mashhur birikmasi — Ro'yxat qatori (List Row).

Vizual Sxema (UI Mockup)

Topshiriq 05: Doiraviy Avatar va Yonidagi Matn (Row & Column)

📋 Texnik Talablar va Cheklovlar

Avatar: radius: 32 (diametri 64 dp).
Matnlar avatardan 12 dp o'ngda boshlansin.
Title: qalin 15 dp oq matn. Subtitle: kulrang 12 dp matn.
Matnlar bloki avatarga nisbatan vertikal markazda bo'lsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task05UserRow extends StatelessWidget {
  const Task05UserRow({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: const Color(0xFF0F172A),
      child: Row(
        children: [
          const CircleAvatar(
            radius: 32,
            backgroundColor: Color(0xFF02569B),
            child: Text('AP', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
          ),
          const SizedBox(width: 12),
          const Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Azimjon Pulatov',
                style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 4),
              Text(
                'Flutter & iOS Software Engineer',
                style: TextStyle(color: Colors.grey, fontSize: 12),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack(spacing: 12) {
    Circle().frame(width: 64, height: 64)
    VStack(alignment: .leading, spacing: 4) {
        Text("Azimjon Pulatov").bold()
        Text("Flutter & iOS Engineer").foregroundColor(.gray)
    }
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

avatar.snp.makeConstraints { make in make.size.equalTo(64) }
title.snp.makeConstraints { make in
    make.leading.equalTo(avatar.snp.trailing).offset(12)
    make.bottom.equalTo(avatar.snp.centerY).offset(-2)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutteda Column sukut bo'yicha ekranning butun balandligini egallashga intiladi (mainAxisSize: MainAxisSize.max). Agar Row ichida uning balandligi faqat ichidagi matnlariga teng bo'lishini xohlasangiz, mainAxisSize: MainAxisSize.min berish shart!

</details>

🟡 Topshiriq 06: 16:9 Nisbatdagi Video Player (AspectRatio)

Daraja: O'rta (Medium) | Maqsad: Ekran kengligiga qarab balandligi avtomatik 16:9 nisbatda hisoblanuvchi video pleer kartasi.

Flutterning AspectRatio vidjeti yordamida geometrik proporsiyalarni boshqarish.

Vizual Sxema (UI Mockup)

Topshiriq 06: 16:9 Nisbatdagi Video Player (AspectRatio)

📋 Texnik Talablar va Cheklovlar

Chetlardan 24 dp masofa.
Balandlik kenglikka nisbatan 16 / 9 (1.777) proporsiyada bo'lsin.
Markazida play tugmasi doirasi bo'lsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task06AspectRatioVideo extends StatelessWidget {
  const Task06AspectRatioVideo({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(
            decoration: BoxDecoration(
              color: const Color(0xFF1E293B),
              borderRadius: BorderRadius.circular(12),
              border: Border.all(color: const Color(0xFF00B4D8), width: 1.5),
            ),
            child: const Center(
              child: CircleAvatar(
                radius: 24,
                backgroundColor: Color(0xFF00B4D8),
                child: Icon(Icons.play_arrow, color: Colors.white, size: 28),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

RoundedRectangle(cornerRadius: 12)
    .aspectRatio(16/9, contentMode: .fit)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

video.snp.makeConstraints { make in
    make.height.equalTo(video.snp.width).multipliedBy(9.0 / 16.0)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutterning AspectRatio vidjeti ota-onasining bergan kengligiga qarab o'z balandligini avtomatik hisoblaydi. Bu iPad va telefonlarda bir xil to'g'ri ko'rinishni ta'minlaydi.

</details>

🟡 Topshiriq 07: Avatar Burchagidagi Online Status Dot (Stack & Positioned)

Daraja: O'rta (Medium) | Maqsad: 80x80 profil rasmining pastki o'ng burchagida qisman chiqib turuvchi 24x24 yashil status doirachasi.

Flutteda elementlarni bir-birining ustiga qadash uchun Stack va Positioned vidjetlaridan foydalanish.

Vizual Sxema (UI Mockup)

Topshiriq 07: Avatar Burchagidagi Online Status Dot (Stack & Positioned)

📋 Texnik Talablar va Cheklovlar

Avatar: 80x80 dp (CircleAvatar(radius: 40)).
Status dot: 24x24 dp, yashil rang, qora chegara (border: 3dp).
Stack(clipBehavior: Clip.none) orqali badge chetdan tashqariga chiqishiga ruxsat berish.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task07AvatarBadge extends StatelessWidget {
  const Task07AvatarBadge({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        clipBehavior: Clip.none, // Chegaradan chiqishga ruxsat!
        children: [
          const CircleAvatar(
            radius: 40,
            backgroundColor: Color(0xFF7B2CBF),
            child: Text('AZ', style: TextStyle(color: Colors.white, fontSize: 20)),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Container(
              width: 24,
              height: 24,
              decoration: BoxDecoration(
                color: const Color(0xFF10B981),
                shape: BoxShape.circle,
                border: Border.all(color: const Color(0xFF0F172A), width: 3),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

Circle().frame(width: 80, height: 80)
    .overlay(alignment: .bottomTrailing) {
        Circle().frame(width: 24, height: 24)
    }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

statusDot.snp.makeConstraints { make in
    make.size.equalTo(24)
    make.bottom.trailing.equalTo(avatar).offset(2)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutteda Stack ichidagi element burchakdan tashqariga chiqishi uchun Stack(clipBehavior: Clip.none) bo'lishi shart. Agar Clip.hardEdge (default) qolsa, tashqariga chiqqan qism qirqib tashlanadi.

</details>

🟡 Topshiriq 08: Moslashuvchan Xabar Pufakchasi (ConstrainedBox)

Daraja: O'rta (Medium) | Maqsad: Qisqa matnda kichik, uzun matnda esa ekran kengligining 75% idan oshmaydigan chat pufakchasi.

Flutteda ConstrainedBox va BoxConstraints orqali dinamik minimal va maksimal chegaralar o'rnatish.

Vizual Sxema (UI Mockup)

Topshiriq 08: Moslashuvchan Xabar Pufakchasi (ConstrainedBox)

📋 Texnik Talablar va Cheklovlar

Minimal kenglik: 60 dp.
Maksimal kenglik: ekran kengligining 75% qismi.
Matn hajmiga qarab pufakcha o'zi moslashsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task08ChatBubble extends StatelessWidget {
  final String text;
  const Task08ChatBubble({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    final maxWidth = MediaQuery.of(context).size.width * 0.75;

    return Align(
      alignment: Alignment.centerLeft,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minWidth: 60,
            maxWidth: maxWidth,
          ),
          child: Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: const Color(0xFF02569B),
              borderRadius: BorderRadius.circular(16),
            ),
            child: Text(
              text,
              style: const TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

Text(text)
    .padding(12)
    .background(Color.blue)
    .frame(minWidth: 60, maxWidth: screenWidth * 0.75, alignment: .leading)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

bubble.snp.makeConstraints { make in
    make.width.greaterThanOrEqualTo(60)
    make.width.lessThanOrEqualToSuperview().multipliedBy(0.75)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutteda Align yoki Row ichida bo'lmagan Container o'z ota-onasining to'liq kengligini egallashga majbur bo'ladi. Shu sababli chat pufakchalarida Align(alignment: Alignment.centerLeft, child: ...) bilan o'rash shart.

</details>

🟡 Topshiriq 09: Uchta Teng Ustun (Row & Expanded)

Daraja: O'rta (Medium) | Maqsad: Gorizontal qatorda kengligi bir-biriga mutlaqo teng bo'lgan va orasi 16 dp dan bo'lgan 3 ta karta.

Flutteda Row ichidagi Expanded vidjeti orqali ekran kengligini teng nisbatlarda bo'lish.

Vizual Sxema (UI Mockup)

Topshiriq 09: Uchta Teng Ustun (Row & Expanded)

📋 Texnik Talablar va Cheklovlar

3 ta karta ekranning chap va o'ngidan 16 dp oraliqda.
Kartalar orasida 16 dp bo'shliq.
Har bir karta bir xil kenglikda va balandligi 120 dp bo'lsin.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task09ThreeColumns extends StatelessWidget {
  const Task09ThreeColumns({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Center(
        child: Row(
          children: [
            Expanded(
              child: Container(
                height: 120,
                decoration: BoxDecoration(
                  color: const Color(0xFF02569B),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Container(
                height: 120,
                decoration: BoxDecoration(
                  color: const Color(0xFF7B2CBF),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Container(
                height: 120,
                decoration: BoxDecoration(
                  color: const Color(0xFF10B981),
                  borderRadius: BorderRadius.circular(12),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack(spacing: 16) {
    ForEach(0..<3) { _ in RoundedRectangle(cornerRadius: 12).frame(height: 120) }
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

card2.snp.makeConstraints { make in
    make.leading.equalTo(card1.snp.trailing).offset(16)
    make.width.equalTo(card1)
}

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutter'da Expanded(flex: 1) yozish orqali nisbatlarni ham boshqarish mumkin. Masalan, agar birinchi kartaga flex: 2, qolganlariga flex: 1 bersangiz, birinchi karta qolganlaridan 2 barobar kattaroq bo'ladi.

</details>

🟡 Topshiriq 10: Sarlavha va Sana (TextOverflow.ellipsis)

Daraja: O'rta (Medium) | Maqsad: Bitta qatorda chapda sarlavha, o'ngda sana. Sarlavha haddan tashqari uzun bo'lsa ham sana siqilmasdan to'liq qolishi kerak.

Flutteda Expanded va TextOverflow.ellipsis yordamida matnni to'g'ri qisqartirish (truncation).

Vizual Sxema (UI Mockup)

Topshiriq 10: Sarlavha va Sana (TextOverflow.ellipsis)

📋 Texnik Talablar va Cheklovlar

titleLabel: uzun bo'lganda '...' bilan qisqarsin.
dateLabel: hech qachon qisqarmasin va to'liq ko'rinsin.
Oraliq masofa 12 dp.

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

import 'package:flutter/material.dart';

class Task10TextTruncate extends StatelessWidget {
  const Task10TextTruncate({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: const Color(0xFF0F172A),
      child: Row(
        children: [
          const Expanded(
            child: Text(
              'Juda uzun topshiriq sarlavhasi: Flutter va Dart vidjetlar arxitekturasini o'rganish',
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
              maxLines: 1,
              overflow: TextOverflow.ellipsis, // '...' belgisi!
            ),
          ),
          const SizedBox(width: 12),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: const Color(0xFF0284C7).withOpacity(0.2),
              borderRadius: BorderRadius.circular(6),
            ),
            child: const Text(
              'Bugun, 18:30',
              style: TextStyle(color: Color(0xFF38BDF8), fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack {
    Text("Uzun matn...").lineLimit(1).truncationMode(.tail)
    Text("Bugun, 18:30").fixedSize()
}

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

titleLabel.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
dateLabel.setContentCompressionResistancePriority(.required, for: .horizontal)

💡 iOS Dev Uchun Eslatma & Pro Tip: iOS UIKit'dagi setContentCompressionResistancePriority ga Flutteda eng yaqin ekvivalent — sarlavhani Expanded ichiga o'rab, overflow: TextOverflow.ellipsis berishdir. Shunda dateLabel o'zining tabiiy o'lchamini saqlab qoladi.

</details>

🟡 Topshiriq 11: Bildirishnoma Kartasi va Yopish Tugmasi

Daraja: O'rta (Medium) | Maqsad: Chapda 36x36 icon, o'rtada 2 qatorli xabar matni, o'ngda 28x28 yopish tugmasi.

Uchta elementdan iborat gorizontal Row zanjiri.

Vizual Sxema (UI Mockup)

Topshiriq 11: Bildirishnoma Kartasi va Yopish Tugmasi

📋 Texnik Talablar va Cheklovlar

Icon 36x36 dp
Matn bloki 2 qator
Yopish tugmasi o'ngda

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(14)),
  child: Row(
    children: [
      const Icon(Icons.notifications_active, color: Color(0xFF00B4D8), size: 32),
      const SizedBox(width: 12),
      const Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Yangi dars', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
            Text('Flutter vidjetlar daraxtini o'rganing', style: TextStyle(color: Colors.grey, fontSize: 12)),
          ],
        ),
      ),
      IconButton(onPressed: () {}, icon: const Icon(Icons.close, color: Colors.white, size: 20)),
    ],
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack { Image(systemName: "bell"); VStack { Text("Title"); Text("Body") }; Button("✕") {} }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

textStack.snp.makeConstraints { make in make.leading.equalTo(icon.snp.trailing).offset(12); make.trailing.equalTo(close.snp.leading).offset(-12) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Row ichidagi matn Column ni albatta Expanded bilan o'rang, aks holda matn uzun bo'lib ketsa RenderFlex overflowed by X pixels xatosi kelib chiqadi.

</details>

🟠 Topshiriq 12: Do'kon Mahsulot Kartasi (Product Grid Card)

Daraja: Qiyin (Hard) | Maqsad: Rasm, chegirma nishoni (-25%), sarlavha, narx va sariq dumaloq qo'shish tugmasi (+).

E-Commerce mahsulot kartasi va uning ichki qatlamlari.

Vizual Sxema (UI Mockup)

Topshiriq 12: Do'kon Mahsulot Kartasi (Product Grid Card)

📋 Texnik Talablar va Cheklovlar

Karta eni: 200 dp
Rasm tepada Stack bilan
Narx va + tugmasi pastda

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Container(
  width: 200,
  padding: const EdgeInsets.all(12),
  decoration: BoxDecoration(color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(16)),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Stack(
        children: [
          Container(height: 110, decoration: BoxDecoration(color: Colors.black26, borderRadius: BorderRadius.circular(10))),
          Positioned(top: 8, left: 8, child: Container(padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), color: Colors.red, child: const Text('-25%', style: TextStyle(color: Colors.white, fontSize: 10)))),
        ],
      ),
      const SizedBox(height: 8),
      const Text('MacBook Air M3', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
      const Spacer(),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const Text('$1,099', style: TextStyle(color: Colors.green, fontSize: 16, fontWeight: FontWeight.bold)),
          FloatingActionButton.small(onPressed: () {}, child: const Icon(Icons.add)),
        ],
      )
    ],
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

VStack { ZStack { Image(); Badge() }; Text("Title"); HStack { Text("$1099"); Button("+") {} } }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

addButton.snp.makeConstraints { make in make.trailing.bottom.equalToSuperview().inset(12) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Karta ichidagi elementlar har doim pastki chegaraga tekis bo'lishi uchun Spacer() vidjetidan unumli foydalaning.

</details>

🟠 Topshiriq 13: Floating Action Button (centerDocked & BottomBar)

Daraja: Qiyin (Hard) | Maqsad: Pastki paneldan yarmi tepaga chiqib turuvchi dumaloq Floating Action Button.

Flutter Scaffold ning maxsus FAB joylashuvi arxitekturasi.

Vizual Sxema (UI Mockup)

Topshiriq 13: Floating Action Button (centerDocked & BottomBar)

📋 Texnik Talablar va Cheklovlar

Scaffold floatingActionButtonLocation
BottomAppBar circular notch
Markazlashtirilgan FAB

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    backgroundColor: const Color(0xFF0284C7),
    child: const Icon(Icons.add, size: 28),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    shape: const CircularNotchedRectangle(),
    notchMargin: 8,
    color: const Color(0xFF1E293B),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        IconButton(icon: const Icon(Icons.home, color: Colors.white), onPressed: () {}),
        const SizedBox(width: 48), // FAB o'rni uchun bo'shliq
        IconButton(icon: const Icon(Icons.person, color: Colors.white), onPressed: () {}),
      ],
    ),
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ZStack(alignment: .bottom) { BottomBar().overlay(FAB().offset(y: -28), alignment: .top) }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

fab.snp.makeConstraints { make in make.centerY.equalTo(bottomBar.snp.top) }

💡 iOS Dev Uchun Eslatma & Pro Tip: iOS da buni qo'lda centerY.equalTo(bottomBar.snp.top) bilan hisoblaymiz, Flutterda esa centerDocked va CircularNotchedRectangle bu vazifani avtomatik bajaradi.

</details>

🟠 Topshiriq 14: Dinamik Izoh Qatori (Self-Sizing Card)

Daraja: Qiyin (Hard) | Maqsad: Matn hajmiga qarab o'zi balandligini hisoblovchi card vidjeti.

Flutteda balandlik cheklovlarisiz moslashuvchan vidjet yaratish.

Vizual Sxema (UI Mockup)

Topshiriq 14: Dinamik Izoh Qatori (Self-Sizing Card)

📋 Texnik Talablar va Cheklovlar

Avatar chapda
Matn ko'p qatorli
Pastki bo'shliq to'liq saqlansin

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Card(
  color: const Color(0xFF1E293B),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: const [
            CircleAvatar(radius: 18),
            SizedBox(width: 8),
            Text('Farrux Aliyev', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
          ],
        ),
        const SizedBox(height: 8),
        const Text(
          'Flutterda vidjet balandligi berilmasa, uning balandligi bolalarining tabiiy hajmiga mos ravishda avtomatik o'lchanadi.',
          style: TextStyle(color: Colors.white70),
        ),
      ],
    ),
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

VStack { Header(); Text(multilineText) }.padding()

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

commentLabel.snp.makeConstraints { make in make.bottom.equalToSuperview().offset(-16) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutterda qutilar uchun majburiy height bermaslik — Auto Layout dagi self-sizing bilan bir xil ishlaydi.

</details>

🟠 Topshiriq 15: Vertikal Scroll Qoidalari (SingleChildScrollView)

Daraja: Qiyin (Hard) | Maqsad: Ekrandan uzun kontentni xatosiz vertikal scroll qilish.

SingleChildScrollView va Column birgalikda ishlashi.

Vizual Sxema (UI Mockup)

Topshiriq 15: Vertikal Scroll Qoidalari (SingleChildScrollView)

📋 Texnik Talablar va Cheklovlar

SingleChildScrollView o'ralgan
Column ichida bir nechta bloklar

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: Column(
    children: [
      Container(height: 200, color: Colors.blue),
      const SizedBox(height: 20),
      Container(height: 300, color: Colors.indigo),
      const SizedBox(height: 20),
      Container(height: 400, color: Colors.teal),
    ],
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ScrollView { VStack { Block1(); Block2(); Block3() } }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

contentView.snp.makeConstraints { make in make.edges.width.equalToSuperview() }

💡 iOS Dev Uchun Eslatma & Pro Tip: SingleChildScrollView ichidagi Column ga Expanded solish TAQIQLANADI! Chunki scroll bo'ladigan muhitda balandlik cheksiz (infinite) bo'ladi va Expanded qayergacha cho'zilishni bilmay crash beradi.

</details>

🟠 Topshiriq 16: Harakatlanuvchi Tab Chizig'i (AnimatedAlign)

Daraja: Qiyin (Hard) | Maqsad: Tanlangan tab tugmasi ostida silliq siljuvchi ko'k indikator chizig'i.

AnimatedAlign orqali silliq animatsiyalar yaratish.

Vizual Sxema (UI Mockup)

Topshiriq 16: Harakatlanuvchi Tab Chizig'i (AnimatedAlign)

📋 Texnik Talablar va Cheklovlar

3 ta tab
AnimatedAlign bilan chiziq harakati
Duration: 300ms

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Stack(
  children: [
    Row(
      children: [
        Expanded(child: TextButton(onPressed: () => setState(() => alignX = -1.0), child: const Text('Bosh sahifa'))),
        Expanded(child: TextButton(onPressed: () => setState(() => alignX = 0.0), child: const Text('Katalog'))),
        Expanded(child: TextButton(onPressed: () => setState(() => alignX = 1.0), child: const Text('Profil'))),
      ],
    ),
    AnimatedAlign(
      alignment: Alignment(alignX, 1.0),
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      child: FractionallySizedBox(widthFactor: 0.33, child: Container(height: 3, color: Colors.blue)),
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack { ... }.matchedGeometryEffect(id: "tab", in: namespace)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

indicator.snp.remakeConstraints { ... }; UIView.animate { view.layoutIfNeeded() }

💡 iOS Dev Uchun Eslatma & Pro Tip: AnimatedAlign orqali alignment qiymatini o'zgartirish Flutterda constraint yangilashdan 10 barobar kam kod talab qiladi.

</details>

🔴 Topshiriq 17: Spotify Mini-Player Paneli

Daraja: Qahramon (Hero) | Maqsad: Cover rasmi (48x48), trek nomi, Play/Next tugmalari va 2 dp progress bar.

Ixcham audio pleer bottom paneli.

Vizual Sxema (UI Mockup)

Topshiriq 17: Spotify Mini-Player Paneli

📋 Texnik Talablar va Cheklovlar

Balandlik 64 dp
Cover 48x48 dp
Progress bar ostida

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Container(
  height: 64,
  margin: const EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(16)),
  child: Column(
    children: [
      Expanded(
        child: Row(
          children: [
            const SizedBox(width: 8),
            Container(width: 48, height: 48, decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(8))),
            const SizedBox(width: 12),
            const Expanded(child: Text('Blinding Lights', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
            IconButton(icon: const Icon(Icons.pause, color: Colors.white), onPressed: () {}),
            IconButton(icon: const Icon(Icons.skip_next, color: Colors.white), onPressed: () {}),
          ],
        ),
      ),
      const LinearProgressIndicator(value: 0.6, minHeight: 2, color: Colors.pink, backgroundColor: Colors.white12),
    ],
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack { Cover(); Titles(); Controls() }.overlay(alignment: .bottom) { Progress() }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

progressBar.snp.makeConstraints { make in make.leading.trailing.bottom.equalToSuperview(); make.height.equalTo(2) }

💡 iOS Dev Uchun Eslatma & Pro Tip: LinearProgressIndicator vidjeti o'z ota-onasining kengligiga avtomatik moslashadi.

</details>

🔴 Topshiriq 18: Stories Karuseli Elementi (Concentric Rings)

Daraja: Qahramon (Hero) | Maqsad: Tashqi gradientli halqa (76x76), ichida avatar (64x64), "+" badge va username.

Konsentrik aylanalar kompozitsiyasi.

Vizual Sxema (UI Mockup)

Topshiriq 18: Stories Karuseli Elementi (Concentric Rings)

📋 Texnik Talablar va Cheklovlar

Halqa: 76x76 dp
Avatar: 64x64 dp
Pastda username

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Stack(
      alignment: Alignment.center,
      children: [
        Container(
          width: 76,
          height: 76,
          decoration: const BoxDecoration(shape: BoxShape.circle, gradient: LinearGradient(colors: [Colors.purple, Colors.pink, Colors.orange])),
        ),
        const CircleAvatar(radius: 34, backgroundColor: Color(0xFF0F172A)),
        const CircleAvatar(radius: 31, backgroundColor: Color(0xFF02569B)),
        Positioned(
          bottom: 2,
          right: 2,
          child: Container(width: 20, height: 20, decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.blue), child: const Icon(Icons.add, size: 14, color: Colors.white)),
        ),
      ],
    ),
    const SizedBox(height: 6),
    const Text('flutter_dev', style: TextStyle(color: Colors.white, fontSize: 11)),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ZStack { GradientCircle(); Avatar(); PlusBadge() }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

avatar.snp.makeConstraints { make in make.center.equalTo(ringView) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Stack(alignment: Alignment.center) orqali barcha aylanalarni bitta markaziy nuqtaga terish juda qulay.

</details>

🔴 Topshiriq 19: Bank Karta Maketi (AspectRatio: 1.586)

Daraja: Qahramon (Hero) | Maqsad: ISO 7810 standarti bo'yicha 1.586 tomonlar nisbatiga ega plastik karta.

Nisbatli gradientli karta va ichki elementlar.

Vizual Sxema (UI Mockup)

Topshiriq 19: Bank Karta Maketi (AspectRatio: 1.586)

📋 Texnik Talablar va Cheklovlar

AspectRatio 1.586
Chip, Karta raqami, Amal qilish muddati

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

AspectRatio(
  aspectRatio: 1.586,
  child: Container(
    padding: const EdgeInsets.all(22),
    decoration: BoxDecoration(
      gradient: const LinearGradient(colors: [Color(0xFF02569B), Color(0xFF0175C2)]),
      borderRadius: BorderRadius.circular(18),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [Text('FLUTTER BANK', style: TextStyle(color: Colors.white, fontWeight: FontWeight.w900)), Text('📶', style: TextStyle(fontSize: 18))]),
        Container(width: 45, height: 34, decoration: BoxDecoration(color: Colors.amber, borderRadius: BorderRadius.circular(6))),
        const Text('9860 •••• •••• 4512', style: TextStyle(color: Colors.white, fontSize: 18, letterSpacing: 2, fontWeight: FontWeight.bold)),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [Text('AZIMJON PULATOV', style: TextStyle(color: Colors.white)), Text('08/28', style: TextStyle(color: Colors.white))]),
      ],
    ),
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

RoundedRectangle(cornerRadius: 18).aspectRatio(1.586, contentMode: .fit)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

card.snp.makeConstraints { make in make.height.equalTo(card.snp.width).dividedBy(1.586) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween) orqali kartadagi 4 ta qatorni bir xil teng masofada taqsimlash mumkin.

</details>

🔴 Topshiriq 20: Premium Paywall Obuna Kartasi

Daraja: Qahramon (Hero) | Maqsad: Yuqori o'ng burchakdan qisman chiqib turuvchi "ENG MASHHUR" badge li obuna kartasi.

Stack bilan chegaradan tashqariga chiqish (Negative offset Positioned).

Vizual Sxema (UI Mockup)

Topshiriq 20: Premium Paywall Obuna Kartasi

📋 Texnik Talablar va Cheklovlar

Stack clipBehavior: Clip.none
Positioned(top: -13)
Chegara 2.5dp

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Stack(
  clipBehavior: Clip.none,
  children: [
    Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.purple, width: 2.5),
      ),
      child: Column(
        children: [
          Row(
            children: const [
              Icon(Icons.check_circle, color: Colors.purple),
              SizedBox(width: 12),
              Text('Yillik Obuna', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16)),
              Spacer(),
              Text('$4.99/oy', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18)),
            ],
          ),
        ],
      ),
    ),
    Positioned(
      top: -13,
      right: 24,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
        decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(12)),
        child: const Text('🔥 ENG MASHHUR', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 10)),
      ),
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

Card().overlay(alignment: .topTrailing) { Badge().offset(y: -13) }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

badge.snp.makeConstraints { make in make.centerY.equalTo(card.snp.top); make.trailing.equalToSuperview().offset(-24) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Positioned vidjetida manfiy top: -13 berish uchun uning ota-onasi Stack(clipBehavior: Clip.none) bo'lishi majburiy.

</details>

👑 Topshiriq 21: Instagram Profile (CustomScrollView & SliverAppBar)

Daraja: Titan / Real-World Screen | Maqsad: Stretchy Header Banner, Banner pastiga teng yarmi kirib turuvchi Avatar, Stats va GridView.

Flutterning eng kuchli quroli — Slivers arxitekturasi.

Vizual Sxema (UI Mockup)

Topshiriq 21: Instagram Profile (CustomScrollView & SliverAppBar)

📋 Texnik Talablar va Cheklovlar

CustomScrollView
SliverAppBar(expandedHeight)
SliverToBoxAdapter
SliverGrid

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 120,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(background: Container(color: Colors.indigo)),
    ),
    SliverToBoxAdapter(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            CircleAvatar(radius: 36),
            SizedBox(height: 8),
            Text('Azimjon Pulatov', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    ),
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, mainAxisSpacing: 2, crossAxisSpacing: 2),
      delegate: SliverChildBuilderDelegate((_, i) => Container(color: Colors.grey[800]), childCount: 15),
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ScrollView { StretchyHeader(); Bio(); LazyVGrid() }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

avatar.snp.makeConstraints { make in make.centerY.equalTo(banner.snp.bottom) }

💡 iOS Dev Uchun Eslatma & Pro Tip: iOS da stretchy header yaratish uchun scrollViewDidScroll da constraint o'zgartiriladi. Flutterda esa bu SliverAppBar(stretch: true) orqali bir zumda hal bo'ladi.

</details>

👑 Topshiriq 22: E-Commerce Home Screen (Nested ListView & GridView)

Daraja: Titan / Real-World Screen | Maqsad: Qidiruv paneli, gorizontal Stories, reklama banneri va mahsulotlar to'ri.

Ko'p qatlamli bosh sahifa arxitekturasi.

Vizual Sxema (UI Mockup)

Topshiriq 22: E-Commerce Home Screen (Nested ListView & GridView)

📋 Texnik Talablar va Cheklovlar

SearchBar tepada
Horizontal ListView.builder
GridView.count

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Column(
        children: [
          TextField(decoration: InputDecoration(hintText: 'Qidiruv...')),
          SizedBox(
            height: 80,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (_, i) => const Padding(padding: EdgeInsets.all(8), child: CircleAvatar(radius: 30)),
            ),
          ),
        ],
      ),
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ScrollView { Search(); ScrollView(.horizontal) { ... }; LazyVGrid { ... } }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

storiesCV.snp.makeConstraints { make in make.height.equalTo(80) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Gorizontal ListView ni CustomScrollView ichiga joylashda uni aniq SizedBox(height: 80) bilan o'rash shart, aks holda vertikal balandlik noaniq bo'lib xato beradi.

</details>

👑 Topshiriq 23: Telegram Chat Xonasi (Inverted ListView & InputBar)

Daraja: Titan / Real-World Screen | Maqsad: Xabarlar ro'yxati (pastdan boshlanuvchi) va klaviaturaga ulanuvchi input maydoni.

Flutterda real vaqt chat ekrani tuzilishi.

Vizual Sxema (UI Mockup)

Topshiriq 23: Telegram Chat Xonasi (Inverted ListView & InputBar)

📋 Texnik Talablar va Cheklovlar

ListView.builder(reverse: true)
SafeArea bottom
TextField

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Column(
  children: [
    Expanded(
      child: ListView.builder(
        reverse: true, // Pastdan yuqoriga o'sadi!
        itemCount: 20,
        itemBuilder: (_, i) => Align(
          alignment: i % 2 == 0 ? Alignment.centerRight : Alignment.centerLeft,
          child: Container(margin: const EdgeInsets.all(8), padding: const EdgeInsets.all(12), decoration: BoxDecoration(color: i % 2 == 0 ? Colors.blue : Colors.grey[800], borderRadius: BorderRadius.circular(12)), child: Text('Xabar #$i', style: const TextStyle(color: Colors.white))),
        ),
      ),
    ),
    SafeArea(
      child: Container(
        padding: const EdgeInsets.all(8),
        color: const Color(0xFF1E293B),
        child: Row(children: [Expanded(child: TextField()), IconButton(icon: const Icon(Icons.send), onPressed: () {})]),
      ),
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ScrollView { ... }; InputBar()

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

inputBar.snp.makeConstraints { make in make.bottom.equalTo(view.keyboardLayoutGuide.snp.top) }

💡 iOS Dev Uchun Eslatma & Pro Tip: ListView(reverse: true) qilish orqali eng oxirgi xabarlar har doim pastda turadi va yangi xabar kelganda scroll qilish shart bo'lmaydi.

</details>

👑 Topshiriq 24: Fintech Banking Dashboard (PageView & Transactions)

Daraja: Titan / Real-World Screen | Maqsad: Balans, varoqlanuvchi kredit kartalar (PageView) va operatsiyalar ro'yxati.

Bank ilovalari boshqaruv ekrani.

Vizual Sxema (UI Mockup)

Topshiriq 24: Fintech Banking Dashboard (PageView & Transactions)

📋 Texnik Talablar va Cheklovlar

PageView.builder(controller: PageController(viewportFraction: 0.85))
ListView.builder

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Padding(padding: EdgeInsets.all(16), child: Text('$18,920.50', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white))),
    SizedBox(
      height: 120,
      child: PageView.builder(
        controller: PageController(viewportFraction: 0.85),
        itemCount: 3,
        itemBuilder: (_, i) => Container(margin: const EdgeInsets.symmetric(horizontal: 8), decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(14))),
      ),
    ),
    const Expanded(child: Text('Operatsiyalar ro'yxati...')),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

TabView { ... }.tabViewStyle(.page)

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

cardsCV.snp.makeConstraints { make in make.height.equalTo(120) }

💡 iOS Dev Uchun Eslatma & Pro Tip: PageController(viewportFraction: 0.85) berilganda keyingi karta chetidan qisman ko'rinib turadi — bu zamonaviy UI standartidir.

</details>

👑 Topshiriq 25: Food Delivery Restaurant Detail (SliverAppBar & Cart)

Daraja: Titan / Real-World Screen | Maqsad: Collapsing Cover Image, Taomlar ro'yxati va pastki Sticky Savat tugmasi.

Restoran taomlari menyusi va savat fiksatsiyasi.

Vizual Sxema (UI Mockup)

Topshiriq 25: Food Delivery Restaurant Detail (SliverAppBar & Cart)

📋 Texnik Talablar va Cheklovlar

SliverAppBar
BottomNavigationBar / Persistent Cart
Taom cardlari

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(expandedHeight: 160, flexibleSpace: FlexibleSpaceBar(background: Container(color: Colors.orange))),
      SliverList(delegate: SliverChildBuilderDelegate((_, i) => ListTile(title: Text('Taom #$i')), childCount: 10)),
    ],
  ),
  bottomNavigationBar: SafeArea(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: ElevatedButton(onPressed: () {}, style: ElevatedButton.styleFrom(backgroundColor: Colors.red), child: const Text('Savatga o'tish • $9.00')),
    ),
  ),
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

ZStack(alignment: .bottom) { ScrollView { ... }; StickyCartButton() }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

cartBar.snp.makeConstraints { make in make.bottom.equalTo(view.safeAreaLayoutGuide).offset(-8) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Scaffold ning bottomNavigationBar parametri orqali kiritilgan tugma avtomatik ravishda ekranning eng pastiga yopishadi va klaviaturadan saqlanadi.

</details>

👑 Topshiriq 26: Crypto Asset Detail (Chart & 50/50 Order Book)

Daraja: Titan / Real-World Screen | Maqsad: Narx, to'lqinsimon grafik, 2 ta teng ustunli Order Book (Bids vs Asks) va pastki tugmalar.

Birja asset ekrani va 50/50 ustunlar.

Vizual Sxema (UI Mockup)

Topshiriq 26: Crypto Asset Detail (Chart & 50/50 Order Book)

📋 Texnik Talablar va Cheklovlar

Row(children: [Expanded(Bids), SizedBox, Expanded(Asks)])
Buy/Sell 50/50 row

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

Column(
  children: [
    const Text('SOL / USDT: $148.50', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
    Container(height: 80, color: Colors.black26),
    Expanded(
      child: Row(
        children: [
          Expanded(child: Container(color: Colors.green.withOpacity(0.1))),
          const SizedBox(width: 8),
          Expanded(child: Container(color: Colors.red.withOpacity(0.1))),
        ],
      ),
    ),
    Row(
      children: [
        Expanded(child: ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.green), onPressed: () {}, child: const Text('Sotib olish'))),
        const SizedBox(width: 12),
        Expanded(child: ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.red), onPressed: () {}, child: const Text('Sotish'))),
      ],
    ),
  ],
);

2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)

HStack { BidsColumn(); AsksColumn() }; HStack { BuyBtn(); SellBtn() }

3. UIKit / SnapKit Ekvivalenti (Auto Layout)

asks.snp.makeConstraints { make in make.leading.equalTo(bids.snp.trailing).offset(12); make.width.equalTo(bids) }

💡 iOS Dev Uchun Eslatma & Pro Tip: Flutterda 50/50 ustunlarni qilish uchun ikkala tomonga ham Expanded qo'yish kifoya — hech qanday pikselli hisob-kitob kerak emas.

</details>

👑 Topshiriq 27: App Store Today Card (Hero Artwork & Lockup)

Daraja: Titan / Real-World Screen | Maqsad: Katta Artwork rasmi, burchakdagi shaffof "✕" va pastki App Lockup qatori.

Apple App Store mashhur "Bugun" kartasi.

Vizual Sxema (UI Mockup)

Topshiriq 27: App Store Today Card (Hero Artwork & Lockup)

📋 Texnik Talablar va Cheklovlar

ClipRRect(borderRadius: 20)
Stack(Artwork + CloseBtn)
Lockup Row

<details> <summary>💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)</summary>

1. Flutter / Dart Yechimi (Asosiy)

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Container(
    color: const Color(0xFF1E293B),
    child: Column(
      children: [
        Stack(
          children: [
            Container(height: 200, color: const Color(0xFF02569B)),
            Positioned(top: 12, right: 12, child: CircleAvatar(backgroundColor: Colors.black45, radius: 14, child: const Icon(Icons.close, size: 16))),
          ],
        ),
        Padding(
          padding: const EdgeInsets.all(16),
          child: Row(
            children: [