# 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 `Container`dan boshlanib, real loyihalardagi murakkab `CustomScrollView`, `SliverAppBar` va ko'p tarmoqli feed'largacha qiyinlashib boradi.
---
## 🧭 Mashg'ulot Qoidalari va Tavsiyalar
1. **Avval mustaqil bajaring:** Vizual sxemaga qarab Flutter'da vidjetlar daraxtini (Widget Tree) qanday tuzishni o'zingiz sinab ko'ring.
2. **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.
3. **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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
// 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)
```swift
// 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!
---
## 🟢 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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
RoundedRectangle(cornerRadius: 14)
.fill(Color.blue)
.padding(20)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟢 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)
### 📋 Texnik Talablar va Cheklovlar
- Yuqoridagi karta: balandligi 85 dp, chetlardan 24 dp.
- Oraliq masofa: 16 dp.
- Pastki karta: balandligi 85 dp.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
VStack(spacing: 16) {
RoundedRectangle(cornerRadius: 12).frame(height: 85)
RoundedRectangle(cornerRadius: 12).frame(height: 85)
}
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟢 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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
VStack {
HeaderView().frame(height: 56)
Spacer()
Button("Davom etish") {}.frame(height: 48)
}
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟢 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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
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)
```swift
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!
---
## 🟡 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)
### 📋 Texnik Talablar va Cheklovlar
- Chetlardan 24 dp masofa.
- Balandlik kenglikka nisbatan 16 / 9 (1.777) proporsiyada bo'lsin.
- Markazida play tugmasi doirasi bo'lsin.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
RoundedRectangle(cornerRadius: 12)
.aspectRatio(16/9, contentMode: .fit)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟡 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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
Circle().frame(width: 80, height: 80)
.overlay(alignment: .bottomTrailing) {
Circle().frame(width: 24, height: 24)
}
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟡 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)
### 📋 Texnik Talablar va Cheklovlar
- Minimal kenglik: 60 dp.
- Maksimal kenglik: ekran kengligining 75% qismi.
- Matn hajmiga qarab pufakcha o'zi moslashsin.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
Text(text)
.padding(12)
.background(Color.blue)
.frame(minWidth: 60, maxWidth: screenWidth * 0.75, alignment: .leading)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟡 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)
### 📋 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.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack(spacing: 16) {
ForEach(0..<3) { _ in RoundedRectangle(cornerRadius: 12).frame(height: 120) }
}
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟡 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)
### 📋 Texnik Talablar va Cheklovlar
- titleLabel: uzun bo'lganda '...' bilan qisqarsin.
- dateLabel: hech qachon qisqarmasin va to'liq ko'rinsin.
- Oraliq masofa 12 dp.
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack {
Text("Uzun matn...").lineLimit(1).truncationMode(.tail)
Text("Bugun, 18:30").fixedSize()
}
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟡 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)
### 📋 Texnik Talablar va Cheklovlar
- Icon 36x36 dp
- Matn bloki 2 qator
- Yopish tugmasi o'ngda
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack { Image(systemName: "bell"); VStack { Text("Title"); Text("Body") }; Button("✕") {} }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟠 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)
### 📋 Texnik Talablar va Cheklovlar
- Karta eni: 200 dp
- Rasm tepada Stack bilan
- Narx va + tugmasi pastda
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
VStack { ZStack { Image(); Badge() }; Text("Title"); HStack { Text("$1099"); Button("+") {} } }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟠 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)
### 📋 Texnik Talablar va Cheklovlar
- Scaffold floatingActionButtonLocation
- BottomAppBar circular notch
- Markazlashtirilgan FAB
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ZStack(alignment: .bottom) { BottomBar().overlay(FAB().offset(y: -28), alignment: .top) }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟠 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)
### 📋 Texnik Talablar va Cheklovlar
- Avatar chapda
- Matn ko'p qatorli
- Pastki bo'shliq to'liq saqlansin
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
VStack { Header(); Text(multilineText) }.padding()
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟠 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)
### 📋 Texnik Talablar va Cheklovlar
- SingleChildScrollView o'ralgan
- Column ichida bir nechta bloklar
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ScrollView { VStack { Block1(); Block2(); Block3() } }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🟠 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)
### 📋 Texnik Talablar va Cheklovlar
- 3 ta tab
- AnimatedAlign bilan chiziq harakati
- Duration: 300ms
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack { ... }.matchedGeometryEffect(id: "tab", in: namespace)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🔴 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)
### 📋 Texnik Talablar va Cheklovlar
- Balandlik 64 dp
- Cover 48x48 dp
- Progress bar ostida
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack { Cover(); Titles(); Controls() }.overlay(alignment: .bottom) { Progress() }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🔴 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)
### 📋 Texnik Talablar va Cheklovlar
- Halqa: 76x76 dp
- Avatar: 64x64 dp
- Pastda username
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ZStack { GradientCircle(); Avatar(); PlusBadge() }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🔴 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)
### 📋 Texnik Talablar va Cheklovlar
- AspectRatio 1.586
- Chip, Karta raqami, Amal qilish muddati
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
RoundedRectangle(cornerRadius: 18).aspectRatio(1.586, contentMode: .fit)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 🔴 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)
### 📋 Texnik Talablar va Cheklovlar
- Stack clipBehavior: Clip.none
- Positioned(top: -13)
- Chegara 2.5dp
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
Card().overlay(alignment: .topTrailing) { Badge().offset(y: -13) }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- CustomScrollView
- SliverAppBar(expandedHeight)
- SliverToBoxAdapter
- SliverGrid
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ScrollView { StretchyHeader(); Bio(); LazyVGrid() }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- SearchBar tepada
- Horizontal ListView.builder
- GridView.count
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ScrollView { Search(); ScrollView(.horizontal) { ... }; LazyVGrid { ... } }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- ListView.builder(reverse: true)
- SafeArea bottom
- TextField
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ScrollView { ... }; InputBar()
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- PageView.builder(controller: PageController(viewportFraction: 0.85))
- ListView.builder
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
TabView { ... }.tabViewStyle(.page)
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- SliverAppBar
- BottomNavigationBar / Persistent Cart
- Taom cardlari
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
ZStack(alignment: .bottom) { ScrollView { ... }; StickyCartButton() }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- Row(children: [Expanded(Bids), SizedBox, Expanded(Asks)])
- Buy/Sell 50/50 row
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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)
```swift
HStack { BidsColumn(); AsksColumn() }; HStack { BuyBtn(); SellBtn() }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
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.
---
## 👑 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)
### 📋 Texnik Talablar va Cheklovlar
- ClipRRect(borderRadius: 20)
- Stack(Artwork + CloseBtn)
- Lockup Row
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
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: [
Container(width: 48, height: 48, decoration: BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(10))),
const SizedBox(width: 12),
const Expanded(child: Text('Flutter Dash', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
ElevatedButton(onPressed: () {}, child: const Text('YUKLASH')),
],
),
),
],
),
),
);
```
#### 2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)
```swift
VStack { Artwork(); LockupRow() }.clipShape(RoundedRectangle(cornerRadius: 20))
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
appLockup.snp.makeConstraints { make in make.leading.trailing.bottom.equalToSuperview(); make.height.equalTo(80) }
```
> 💡 **iOS Dev Uchun Eslatma & Pro Tip:**
> `ClipRRect` vidjeti butun kartani va uning ichidagi barcha qatlamlarni burchak radiusi bo'yicha tekis qirqib beradi.
---
## 👑 Topshiriq 28: Fitness Dashboard (Activity Rings & Bars)
> **Daraja:** `Titan / Real-World Screen` | **Maqsad:** Faollik aylanasi, 3 ta metrika yozuvlari va 7 ta ustunli vertikal diagramma.
Salomatlik ilovalari faollik ekrani.
### Vizual Sxema (UI Mockup)
### 📋 Texnik Talablar va Cheklovlar
- Row(Rings + Metrics)
- Row(7 x Expanded(BarColumn))
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
Column(
children: [
Row(
children: [
Container(width: 80, height: 80, decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.red)),
const SizedBox(width: 16),
const Column(crossAxisAlignment: CrossAxisAlignment.start, children: [Text('Harakat: 620 kkal'), Text('Mashq: 45 daq')]),
],
),
const SizedBox(height: 20),
Container(
height: 120,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(color: const Color(0xFF1E293B), borderRadius: BorderRadius.circular(12)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: List.generate(7, (i) => Expanded(child: Container(margin: const EdgeInsets.symmetric(horizontal: 4), height: (i + 1) * 12.0, color: Colors.blue))),
),
),
],
);
```
#### 2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)
```swift
HStack { Rings(); Metrics() }; Chart { ... }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
chartContainer.snp.makeConstraints { make in make.height.equalTo(120) }
```
> 💡 **iOS Dev Uchun Eslatma & Pro Tip:**
> `Row(crossAxisAlignment: CrossAxisAlignment.end)` qilish orqali har xil balandlikdagi ustunlar pastki chiziqdan yuqoriga qarab tekis o'sadi.
---
## 👑 Topshiriq 29: Checkout Order Form (Multi-Step Summary)
> **Daraja:** `Titan / Real-World Screen` | **Maqsad:** Manzil kartasi, promokod maydoni, narx jadvali va pastki qadalgan to'lov tugmasi.
Buyurtmani rasmiylashtirish formasi.
### Vizual Sxema (UI Mockup)
### 📋 Texnik Talablar va Cheklovlar
- SingleChildScrollView
- Price breakdown rows
- Bottom sticky button
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
Scaffold(
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Card(child: ListTile(title: Text('Manzil'), subtitle: Text('Toshkent sh.'))),
Card(child: ListTile(title: Text('Promokod'), trailing: ElevatedButton(onPressed: () {}, child: Text('Qo'llash')))),
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [Text('Jami'), Text('$35.00')]),
],
),
),
),
],
),
),
bottomNavigationBar: SafeArea(
child: Padding(padding: EdgeInsets.all(16), child: ElevatedButton(onPressed: () {}, child: Text('To'lov qilish'))),
),
);
```
#### 2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)
```swift
Form { Section { Address() }; Section { Total() } }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
payButton.snp.makeConstraints { make in make.bottom.equalTo(view.safeAreaLayoutGuide).offset(-8) }
```
> 💡 **iOS Dev Uchun Eslatma & Pro Tip:**
> Forma va hisob-kitob jadvallarida `Row(mainAxisAlignment: MainAxisAlignment.spaceBetween)` chapdagi sarlavha va o'ngdagi narxni avtomatik ikki chetga tekislaydi.
---
## 👑 Topshiriq 30: Full Podcast Player (Artwork, Slider & Controls)
> **Daraja:** `Titan / Real-World Screen` | **Maqsad:** Katta muqova (1:1), to'lqinli slayder, 5 ta ijro tugmalari va AirPlay chiqish marshruti.
To'liq ekranli audio pleer arxitekturasi.
### Vizual Sxema (UI Mockup)
### 📋 Texnik Talablar va Cheklovlar
- Artwork 1:1 AspectRatio
- Slider
- Row(5 controls with large Play)
💡 Kodni ko'rish (Flutter, SwiftUI va SnapKit yechimlari)
#### 1. Flutter / Dart Yechimi (Asosiy)
```dart
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(width: 140, height: 140, decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(16))),
const SizedBox(height: 16),
const Text('Flutter for iOS Devs Podcast', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16)),
Slider(value: 0.4, onChanged: (v) {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(icon: const Icon(Icons.replay_10, color: Colors.white), onPressed: () {}),
IconButton(icon: const Icon(Icons.skip_previous, color: Colors.white), onPressed: () {}),
CircleAvatar(radius: 28, backgroundColor: Colors.cyan, child: const Icon(Icons.play_arrow, size: 32, color: Colors.white)),
IconButton(icon: const Icon(Icons.skip_next, color: Colors.white), onPressed: () {}),
IconButton(icon: const Icon(Icons.forward_30, color: Colors.white), onPressed: () {}),
],
),
],
);
```
#### 2. SwiftUI Ekvivalenti (iOS Dasturchi Taqqoslash)
```swift
VStack { Artwork(); Slider(); HStack { Controls() } }
```
#### 3. UIKit / SnapKit Ekvivalenti (Auto Layout)
```swift
playButton.snp.makeConstraints { make in make.size.equalTo(56); make.center.equalToSuperview() }
```
> 💡 **iOS Dev Uchun Eslatma & Pro Tip:**
> `Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly)` 5 ta tugmani bir-biridan va chetlardan bir xil matematik aniqlikdagi masofada joylashtiradi.
---
## 🎓 Xulosa: iOS Dasturchi Uchun Flutter Layout Qoidalari
Tabriklaymiz! Siz Flutter bo'yicha eng oddiy `Center` va `Container`dan boshlab, haqiqiy tijoriy ilovalar (Instagram Profile, Telegram Chat, Revolut Banking, Food Delivery va Podcast Player) darajasidagi **30 ta vizual topshiriqni** to'liq o'rganib chiqdingiz!
### O'zlashtirilgan asosiy konseptlar:
1. **Poydevor:** `Center`, `Container`, `Padding`, `Column`, `Row` va `Spacer`.
2. **Geometriya va Qatlamlar:** `AspectRatio` (16:9 va 1.586), `Stack` va `Positioned` bilan nishonlarni joylashtirish.
3. **Cheklovlar:** `ConstrainedBox` va `BoxConstraints` orqali dinamik chat pufakchalari.
4. **Moslashuvchan Ustunlar:** `Expanded` va `Flexible` orqali teng 50/50 yoki 3 ustunli layoutlar.
5. **Scroll & Slivers:** `SingleChildScrollView` qoidalari, `CustomScrollView`, `SliverAppBar` va `SliverGrid`.
6. **Real Production Screens:** `Scaffold.bottomNavigationBar`, `ListView(reverse: true)`, `PageView.builder` va animatsion `AnimatedAlign`.
Endi siz Flutterda har qanday murakkablikdagi dizaynni ko'rganingizda uni iOS tajribangiz bilan bog'lagan holda tezkor va xatosiz kodga aylantira olasiz! 💙