# Flutter Roadmap 2026: Interaktiv O'rganish Xaritasi (UI Flow Map)

> **Holat:** 2026-yil. Ushbu sahifada Flutter dasturchisi bo'lish uchun bosib o'tilishi kerak bo'lgan barcha bosqichlar interaktiv xarita (Flow Map) ko'rinishida jamlangan. Har bir mavzuni o'rgangach, uni **"Learning"**, **"Done"** yoki **"Skip"** holatiga o'tkazib, o'z progresshingizni kuzatib borishingiz mumkin. Shuningdek, har bir mavzu bo'yicha rasmiy Google & Flutter hujjatlariga to'g'ridan-to'g'ri havolalar keltirilgan.

---

## 📌 Rasmiy Havolalar va Manbalar

- 🌐 **Rasmiy Roadmap:** [https://roadmap.sh/flutter](https://roadmap.sh/flutter) — Dunyo bo'yicha eng ommabop dasturchilar yo'l xaritasi.
- 📖 **Flutter Rasmiy Hujjatlari:** [https://docs.flutter.dev](https://docs.flutter.dev)
- 🎯 **Dart Rasmiy Hujjatlari:** [https://dart.dev](https://dart.dev)
- 📦 **Pub.dev Paketlar Reyestri:** [https://pub.dev](https://pub.dev)

---

## 🗺️ Bosqichlar Tavsifi (Roadmap Bosqichlari)

Yuqoridagi interaktiv xarita orqali siz quyidagi 8 ta asosiy modulni bosqichma-bosqich o'zlashtirasiz:

### 1. Dart Dasturlash Tili (Dart Fundamentals)
Flutter'ning poydevori — bu Dart tilidir. Dart 3 bilan birga kelgan zamonaviy imkoniyatlar:
- **Sound Null Safety:** `?`, `!`, `late` va nil-coalescing operatorlari orqali runtime xatolarini nolga tushirish.
- **Records & Pattern Matching:** Swift Tuples va Rust enum matching kabi ixcham sintaksis.
- **Sealed Classes:** Holatlarni xavfsiz ifodalash (Success, Failure, Loading).
- **Asinxronlik:** `Future`, `Stream` va og'ir vazifalarni fonda bajaruvchi `Isolates` (`compute()`).

### 2. Flutter Arxitekturasi va Dvigatel
- **3 ta Daraxt Modeli:** `Widget Tree` (Konfiguratsiya) ➔ `Element Tree` (Boshqaruv) ➔ `RenderObject Tree` (GPU ga chizish).
- **Constraints Qoidasi:** *"Constraints go down, Sizes go up, Parent sets position"*.
- **Asosiy Widgetlar:** `Row`, `Column`, `Stack`, `Flex`, `ListView.builder` va `CustomScrollView` (Slivers).

### 3. UI/UX Dizayn va Animatsiyalar
- **Material Design 3 & Cupertino:** Android va iOS uchun moslashuvchan dizayn.
- **Responsive Layout:** `MediaQuery` va `LayoutBuilder` bilan mobil hamda desktop ekranlarni qo'llab-quvvatlash.
- **Animations:** `AnimatedContainer`, `Hero` hamda `AnimationController` bilan silliq 60/120 FPS harakatlar.

### 4. Holat Boshqaruvi (State Management)
- **ChangeNotifier & ListenableBuilder:** Flutter'ning rasmiy MVVM standarti (tashqi paketsiz).
- **Riverpod 3:** Reaktiv, compile-safe va testlash uchun eng qulay holat boshqaruvchisi.
- **BLoC / Cubit:** Katta bank va korporativ loyihalar uchun qat'iy event-driven arxitektura.

### 5. Tarmoq, REST API va Clean Architecture
- **Dio HTTP Mijozi:** `BaseOptions`, interceptorlar va so'rovlar navbati.
- **JWT Refresh Token:** 401 Unauthorized da orqa fonda avtomatik tokenni yangilash (`QueuedInterceptor`).
- **Clean Architecture:** Domain (Entities, Result), Data (Dio, Models, Cache) va Presentation (UI, Notifier) qatlamlari.

### 6. Desktop Dasturlash (macOS & Windows)
- **Oynani Boshqarish:** `window_manager` orqali oyna o'lchami, markazlashtirish va sarlavhalar.
- **Desktop UX:** `PlatformMenuBar` (macOS tizim menyusi), `Shortcuts` (Cmd+K, Ctrl+S) va `MouseRegion` (Hover & Cursor).
- **Master-Detail Layout:** Katta monitorlar uchun 2 ustunli moslashuvchan ko'rinish.

### 7. Mahalliy Xotira va Oflayn Kesh
- **Kalit-qiymat:** `shared_preferences` va shifrlangan `flutter_secure_storage`.
- **Relyatsion Baza:** `sqlite3` va `drift` orqali tiplangan SQL jadvallari.
- **NoSQL / Oflayn Kesh:** `hive_flutter` orqali tezkor oflayn rejim.

### 8. Avtotestlar va Reliz (Deployment)
- **Testlash:** `flutter_test` va `mocktail` bilan Unit va Widget testlar.
- **Do'konlarga Chiqarish:** Apple App Store (iOS & macOS), Google Play (Android) va Windows (MSIX/EXE).

---

## 💡 Maslahat: Qanday Samarali O'rganish Kerak?

1. **Har kuni kamida bitta mavzuni tanlang:** Yuqoridagi xaritada kerakli kartochka ustiga bosing, "O'rganilmoqda" (Learning) deb belgilang.
2. **Rasmiy hujjatlarni o'qing:** Kartochka ichidagi "Rasmiy Flutter / Dart Hujjatlari" tugmasi orqali Google'ning original yo'riqnomasini ko'zdan kechiring.
3. **Amalda kod yozing:** Faqat o'qish yetarli emas — kichik widget yoki funksiyani o'z loyihangizda sinab ko'ring.
4. **Bajarildi (Done) deb belgilang:** Shunda progress profilingizda saqlanadi va necha foiz bosib o'tganingizni ko'rib borasiz!