# Flutter 2: Flutter vs native Swift/Kotlin — arxitektura va o'lchangan natijalar

> **Holat:** 2026-yil sentabr. Krossplatforma tanlashda marketing shiorlariga emas, balki arxitektura va mustaqil o'lchov natijalariga tayanish lozim. Ushbu darsda Flutter, nativ iOS (Swift/SwiftUI), nativ Android (Kotlin/Compose), React Native va KMP platformalarining render qilish tamoyillari, Impeller evolyutsiyasi, Ilovan (2026) ilmiy benchmarki hamda freym va hajm o'lchash usullari ko'rsatiladi.

## Mundarija

1. [Render arxitekturasi: kim qanday chizadi?](#rendering)
2. [Impeller evolyutsiyasi: Skia'dan to'liq voz kechish](#impeller)
3. [Ilmiy o'lchovlar: Ilovan (2026) benchmark natijalari](#ilovan-benchmark)
4. [Tadqiqot cheklovlari va boshqa ilmiy ishlar](#research-context)
5. [Freym byudjeti: 60 Hz va 120 Hz ProMotion](#frame-budget)
6. [O'lchov amaliyoti: integration_test va drayver](#profiling)
7. [Ilova hajmi (App Size) va uni tahlil qilish](#app-size)
8. [Qaror jadvali: qachon Native, qachon Flutter, qachon KMP?](#decision-table)
9. [Xulosa](#xulosa)
10. [Manbalar](#manbalar)

---

## 1. Render arxitekturasi: kim qanday chizadi? {#rendering}

Dasturlash tizimlari ekranga piksellarni chiqarish bo'yicha tubdan farq qiladi:

| Mezon | Flutter | React Native (New Arch) | Kotlin Multiplatform (KMP) | Nativ iOS (SwiftUI) |
| :--- | :--- | :--- | :--- | :--- |
| **Piksel chizuvchi** | **Impeller:** Metal (iOS) yoki Vulkan (Android) orqali to'g'ridan-to'g'ri o'zi chizadi ([Flutter Architecture](https://docs.flutter.dev/resources/architectural-overview)) | **OS nativ komponentlari:** JSI va Fabric orqali tizim komponentlariga bog'lanadi | **Nativ UI:** SwiftUI va Jetpack Compose orqali tizim chizadi | **CoreAnimation / Metal:** Tizim optimallashtirilgan render zanjiri |
| **UIKit integratsiyasi** | Tizim UIKit tugmalarini ishlatmaydi; `CupertinoButton` toza Dart kodidir | Nativ `UIButton` / `UIView` yaratiladi | Nativ `Button` / `View` yaratiladi | Sof nativ `View` |
| **Kompilyatsiya** | Ishlab chiqarishda (Release) to'liq **AOT**, ishlab chiqishda (Debug) **JIT + Hot Reload** | Hermes dvigateli orqali JavaScript bytecode (AOT) | Nativ mashina kodi (LLVM orqali Kotlin/Native) | Swift mashina kodi (AOT) |

Flutter'ning o'z piksellarini o'zi chizishi unga barcha platformalarda (iOS, Android, macOS, Windows) 100% bir xil vizual ko'rinish beradi, ammo yangi iOS tizim effektlarini (masalan, Liquid Glass) darhol qabul qilishni qiyinlashtiradi.

---

## 2. Impeller evolyutsiyasi: Skia'dan to'liq voz kechish {#impeller}

Flutterning dastlabki yillaridagi eng katta muammo — **Shader Compilation Jank** (birinchi marta animatsiya ishga tushganda shaderlar runtime'da kompilyatsiya qilinishi oqibatida kadrlar tushib qolishi) edi ([Flutter Shader Compilation](https://docs.flutter.dev/perf/shader)).

Google bu muammoni ildizi bilan yo'qotish uchun yangi avlod **Impeller** dvigatelini yaratdi:

| Versiya | Sana | Impeller holati va o'zgarishlar |
| :--- | :--- | :--- |
| **Flutter 3.10** | 2023-05-10 | iOS uchun Impeller sukut bo'yicha yoqildi (Metal API) |
| **Flutter 3.24** | 2024-08-06 | Android uchun Vulkan sinovlari o'tkazildi, to'liq chiqarilish kechiktirildi |
| **Flutter 3.27** | 2024-12-11 | Android uchun Impeller sukut bo'yicha yoqildi |
| **Flutter 3.29** | 2025-02-12 | Android qurilmalarning 100% qismida faollashdi (OpenGL ES fallback bilan) |
| **Flutter 3.47** | 2026-08-12 | Desktop (macOS va Windows) uchun Impeller sukut bo'yicha standartga aylandi |

Bugungi kunda iOS'da eski Skia dvigateli to'liq olib tashlangan va Impeller yagona qo'llab-quvvatlanadigan dvigateldir ([Impeller Engine](https://docs.flutter.dev/perf/impeller)). Android'da Skia opt-out bayrog'i hali vaqtincha mavjud, ammo kelgusi relizlarda butunlay o'chirilishi e'lon qilingan.

---

## 3. Ilmiy o'lchovlar: Ilovan (2026) benchmark natijalari {#ilovan-benchmark}

2026-yil sentabrda e'lon qilingan A. Ilovan tadqiqoti ("Cross-Platform vs Native Mobile Development: An Empirical Study of Software Quality Trade-offs", arXiv:2609.21544) krossplatforma bo'yicha eng so'nggi va batafsil mustaqil ilmiy manba hisoblanadi ([arXiv:2609.21544](https://arxiv.org/abs/2609.21544)).

### Sinov shartlari
- **Loyiha:** O'simliklarni boshqarish ilovasi (Plant management).
- **Kod bazalari (5 ta):** Native iOS (Swift + SwiftUI), Native Android (Kotlin + Jetpack Compose), Flutter (Dart + Material), React Native (TypeScript + Expo, New Architecture), KMP (umumiy Kotlin mantiq + nativ UI).
- **Qurilmalar:** iPhone 15 (iOS 26.3.1) va Pixel 6 Pro (Android 16).
- **Hajm:** Har bir variant 2,000 marta ishga tushirilgan (jami 16,000 ta sinov).

### 1-natija: 7 ta mijoz amali yig'indisi (Subtotal, ms)
Ushbu operatsiyalar real tarmoq va lokal hisob-kitobni o'z ichiga oladi (login, fetch, conditional fetch, image download, decode, local sync, upload):

| OS | Yondashuv | O'rtacha vaqt (ms) | Nativga nisbatan farq (shu OS bo'yicha) |
| :--- | :--- | :--- | :--- |
| **iOS** | **Native (SwiftUI)** | **353.120** | **Asosiy (reference)** |
| iOS | Kotlin Multiplatform | 374.677 | +6.1% |
| iOS | Flutter | 518.638 | +46.9% |
| iOS | React Native | 679.319 | +92.4% |
| **Android** | **Native (Compose)** | **452.755** | **Asosiy (reference)** |
| Android | Kotlin Multiplatform | 504.592 | +11.4% |
| Android | React Native | 1218.088 | +169.0% |
| Android | Flutter | 1547.144 | +241.7% |

*Xulosa:* iOS'da KMP nativga deyarli teng natija ko'rsatgan (+6.1%). Flutter esa React Native'dan tezroq ishlagan (+46.9% vs +92.4%). Android'da esa Flutter tarmoq va ma'lumotlar bazasi sinxronlash amallarida nativdan sezilarli darajada orqada qolgan.

### 2-natija: Sintetik UI testlari (Mean ± SD, ms)

| OS | Yondashuv | 50 qatorni render qilish | 200 qatorni scroll qilish |
| :--- | :--- | :--- | :--- |
| **iOS** | Native (SwiftUI) | 49.708 ± 3.108 | 871.525 ± 6.199 |
| iOS | Kotlin Multiplatform | 36.517 ± 1.460 | 876.012 ± 4.958 |
| iOS | React Native | 44.568 ± 5.394 | 76.701 ± 6.606 |
| iOS | **Flutter** | **33.989 ± 6.014** | 890.003 ± 3.844 |
| **Android** | Native (Compose) | 45.338 ± 5.646 | 316.170 ± 15.054 |
| Android | Kotlin Multiplatform | 27.404 ± 6.011 | 316.347 ± 9.723 |
| Android | React Native | 102.279 ± 32.224 | 125.403 ± 15.098 |
| Android | Flutter | 95.379 ± 18.814 | 912.652 ± 11.036 |

> **Ogohlantirish (Muallif izohi):** Scroll testidagi past sonlar React Native'ning ravonligini bildirmaydi — RN drayveri animatsiyani tezroq uzgani sababli sinov muddati qisqa chiqqan. Render testida esa Flutter iOS'da eng tezkor (33.98 ms) natijani qayd etgan.

### 3-natija: Yozilgan kod hajmi (SLOC)

| Texnologiya | Fayllar soni | Kod satrlari (SLOC) | Birlashgan nativga nisbatan |
| :--- | :---: | :---: | :--- |
| Native iOS | 63 | 4,522 | — |
| Native Android | 26 | 4,583 | — |
| **Birlashgan nativ (ikkisi)** | **89** | **9,105** | **100% (reference)** |
| **Flutter** | **16** | **5,466** | **−40.0%** |
| React Native | 39 | 4,209 | −53.8% |
| Kotlin Multiplatform | 16 | 4,195 | −53.9% (1,624 umumiy + 1,291 Android + 1,280 iOS) |

Flutter ikkita alohida nativ ilovaga nisbatan kod hajmini **40% ga qisqartiradi** va arxitekturani 16 ta faylda ixcham saqlashga imkon beradi.

---

## 4. Tadqiqot cheklovlari va boshqa ilmiy ishlar {#research-context}

Ilovan (2026) maqolasida quyidagi cheklovlar ochiq qayd etilgan:
1. Sinovda faqat vaqt o'lchangan — CPU, xotira (RAM), batareya iste'moli va ilova hajmi bu testga kirmagan.
2. Sinov bitta dasturchi tomonidan yozilgan bitta ilova asosida o'tkazilgan.
3. Testlar parallel emas, ketma-ket o'tkazilgan.

Boshqa ilmiy tadqiqotlar xulosalari (Ilovan 2026 related work):
- **Oliveira et al. (EASE 2023):** Nativ platformalar doimiy resurs samaradorligi bo'yicha g'olib; og'ir CPU hisob-kitoblarida Flutter krossplatformalar orasida eng kuchlisi.
- **Nawrocki et al. (IEEE Computer 2021):** Nativ ilova hajmi va ishga tushish tezligida yutadi; Flutter krossplatforma kompromisi bo'yicha eng kuchli umumiy yechim.
- **Biørn-Hansen et al. (EMSE 2020):** Nativ Android xotirani yaxshiroq boshqaradi; Flutter'da qo'shimcha xotira sarfi kam, ammo tinch turgan holatdagi (idle) xotira yuki balandroq.
- **Jetpack Compose 1.9.0:** Google Compose 1.9.0 dan boshlab kadrlar tushib qolishi (jank) bo'yicha to'liq optimallashuvga erishganini e'lon qilgan ([Android Compose Performance](https://developer.android.com/jetpack/compose/performance)).

---

## 5. Freym byudjeti: 60 Hz va 120 Hz ProMotion {#frame-budget}

Silliq interfeys ta'minlash uchun dasturchi freym vaqtini to'g'ri tushunishi kerak ([Flutter Best Practices](https://docs.flutter.dev/perf/best-practices)):

- **60 Hz displeylar:** Standart yangilanish vaqti — $16.6\text{ ms}$. Flutterning ikkita mustaqil oqimi bor: **UI (build) oqimi** va **Raster (render) oqimi**. Ular konveyer (pipeline) shaklida parallel ishlaydi — ya'ni har bir oqimga 16 ms dan vaqt ajratiladi.
- **Kechikish (Latency) talabi:** Agar foydalanuvchi teginishiga (touch response) darhol javob qaytishi shart bo'lsa, umumiy kadr $16\text{ ms}$ ichida qurilishi va chizilishi kerak (ya'ni $8\text{ ms}$ UI oqimiga, $8\text{ ms}$ esa raster oqimiga).
- **120 Hz ProMotion (iPhone Pro, iPad Pro):** Yangilanish vaqti — $8.3\text{ ms}$. Freymlar sakramasligi uchun har bir freym umumiy hisobda **8 ms dan kam vaqtda** to'liq tayyor bo'lishi shart.

---

## 6. O'lchov amaliyoti: integration_test va drayver {#profiling}

Ilovangizning scroll ravonligini profil qilish uchun `integration_test` paketidan foydalaniladi:

```dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

void main() {
  final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  testWidgets('Scroll unumdorligini tekshirish', (tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Scaffold(
          body: ListView.builder(
            key: const Key('perf_list'),
            itemCount: 200,
            itemBuilder: (context, index) => ListTile(
              title: Text('Element $index'),
            ),
          ),
        ),
      ),
    );

    await binding.traceAction(() async {
      await tester.fling(find.byKey(const Key('perf_list')), const Offset(0, -500), 1000);
      await tester.pumpAndSettle();
    }, reportKey: 'scrolling_timeline');
  });
}
```

Drayver fayli (`test_driver/perf_driver.dart`):

```text
import 'package:flutter_driver/driver_extension.dart';
import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver(
      responseDataCallback: (data) async {
        if (data != null) {
          final timeline = TimelineSummary.summarize(data['scrolling_timeline']);
          await timeline.writeTimelineToFile('scrolling_timeline', pretty: true);
        }
      },
    );
```

Profil rejimida ishga tushirish buyrug'i:

```bash
flutter drive --driver=test_driver/perf_driver.dart --target=integration_test/scrolling_test.dart --profile
```

Natijada `build/scrolling_summary.timeline_summary.json` fayli hosil bo'ladi va unda `average_frame_build_time_millis` hamda `worst_frame_build_time_millis` kabi aniq ko'rsatkichlar saqlanadi.

---

## 7. Ilova hajmi (App Size) va uni tahlil qilish {#app-size}

Flutter dvigateli va standart shriftlar o'z ichida bo'lgani sababli, bo'sh ilova ham nativ ilovadan biroz kattaroq hajmga ega bo'ladi:
- Rasmiy hujjatlardagi yagona tarixiy ko'rsatkich (Flutter 1.17, 2020-yil): iPhone 11 da bo'sh ilova **5.4 MB siqilgan (compressed)** va **13.7 MB yoyilgan (uncompressed)** hajm bergan ([Flutter App Size](https://docs.flutter.dev/perf/app-size)).
- 2026-yilda real ilova hajmini tekshirish buyruqlari:

```bash
flutter build ipa --export-method development
```

Hajmni har bir paket bo'yicha batafsil tahlil qilish:

```bash
flutter build ios --analyze-size
```

Ushbu buyruq `build/` ichida `.json` fayl qoldiradi, uni `dart devtools` orqali ochib, aynan qaysi plagin yoki rasm ko'p joy olayotganini ko'rish mumkin.

---

## 8. Qaror jadvali: qachon Native, qachon Flutter, qachon KMP? {#decision-table}

Ilmiy dalillar va arxitektura asosida texnologiya tanlash matritsasi:

| Loyiha turi va talab | Tavsiya | Sababi |
| :--- | :--- | :--- |
| **Yuqori brending, maxsus animatsiyalar, MVP, startaplar** | **Flutter** | Butun ekran bir xil chiziladi, kod 40% tejaladi, Hot Reload ishlab chiqishni keskin tezlashtiradi. |
| **Chuqur Apple ekotizimi (Widgetlar, Vision Pro, Live Activities, CoreML)** | **Native (Swift/SwiftUI)** | Day-0 qo'llab-quvvatlash, minimal ilova hajmi, tizim bilan 100% integratsiya. |
| **Mavjud yirik nativ ilovalarga umumiy mantiq qo'shish (Fintech, Banklar)** | **KMP (Kotlin Multiplatform)** | UI nativ qoladi, xavf kam, tarmoq va kripto mantiq yagona Kotlin kodida ishlaydi. |
| **Web va SEO juda muhim bo'lgan krossplatforma** | **React / React Native** | Vebda HTML DOM render qilinadi, qidiruv tizimlari uchun ideal. |

---

## 9. Xulosa {#xulosa}

- Flutter piksellarni Impeller yordamida to'g'ridan-to'g'ri Metal/Vulkan orqali chizadi; UIKit komponentlaridan foydalanmaydi.
- Impeller 2026-yilda iOS va Desktop'da yagona standartga aylandi, Shader Compilation Jank muammosi bartaraf etildi.
- Ilovan (2026) ilmiy sinovlari ko'rsatganidek, Flutter nativ iOS'ga nisbatan tarmoq va lokal saqlashda +46.9% vaqt sarflaydi, ammo kod bazasini 40% ga qisqartiradi.
- 120 Hz ProMotion ekranlarida kadrlar tushib qolmasligi uchun freym 8 ms dan kam vaqtda chizilishi lozim.
- Har qanday loyihada tanlov qat'iy mezonlarga asoslanishi lozim: tizim bilan chuqur integratsiya uchun Native, tezkor krossplatforma uchun esa Flutter.

---

## Manbalar {#manbalar}

1. [Architectural Overview — Flutter Docs](https://docs.flutter.dev/resources/architectural-overview)
2. [Impeller Rendering Engine — Flutter Docs](https://docs.flutter.dev/perf/impeller)
3. [Understanding Shader Compilation Jank — Flutter Docs](https://docs.flutter.dev/perf/shader)
4. [Ilovan, "Cross-Platform vs Native Mobile Development", arXiv:2609.21544 (2026)](https://arxiv.org/abs/2609.21544)
5. [Performance Best Practices — Flutter Docs](https://docs.flutter.dev/perf/best-practices)
6. [Measuring App Size — Flutter Docs](https://docs.flutter.dev/perf/app-size)
7. [Profiling Integration Tests — Flutter Docs](https://docs.flutter.dev/cookbook/testing/integration/profiling)
8. [Jetpack Compose Performance — Android Developers](https://developer.android.com/jetpack/compose/performance)