Flutter — asosiy tushunchalar, arxitektura va vidjetlar

Flutter nima

Flutter — bu 2015-yilda Google tomonidan e'lon qilingan foydalanuvchi interfeyslarini yaratish uchun SDK (Software Development Kit) va freymvorkdir. Birinchi barqaror versiya Flutter 1.0 2018-yil dekabrida chiqarilgan. React Native-dan farqli o'laroq, Flutter JavaScript va mahalliy kod o'rtasida ko'prikdan foydalanmaydi — to'g'ridan-to'g'ri protsessorning mahalliy ko'rsatmalariga kompilyatsiya qilinadi.

Flutter-ning asosiy xususiyati — o'zining renderlash dvigatelidir. Freymvork UIKit (iOS) yoki Android View tizimiga tayanmaydi. Buning o'rniga Flutter har bir pikselni mustaqil ravishda Skia (2024-yilgacha) yoki yangi Impeller dvigateli orqali chizadi. Bu barcha platformalarda ilovaning bir xil ko'rinishini kafolatlaydi va OTning turli versiyalariga moslashish muammolarini bartaraf etadi.

Statista 2024 ma'lumotlariga ko'ra, Flutter o'zaro platforma freymvorklari orasida mashhurlik bo'yicha birinchi o'rinni egallaydi: taxminan 46% ishlab chiqaruvchilar undan mobil ishlanma uchun foydalanadi. Freymvork Google Pay, Alibaba, eBay, BMW va Tencent loyihalarida qo'llaniladi.

Flutter tarixi va versiyalari

Birinchi Flutter alfa versiyasi 2015-yilda Dart Developer Summit-da Sky nomi bilan taqdim etilgan. 2018-yilda faqat iOS va Android qo'llab-quvvatlashi bilan Flutter 1.0 chiqarildi. Flutter 2.0 (2021) Web va Desktop qo'shdi. Flutter 3.0 (2022) macOS va Linux uchun barqaror qo'llab-quvvatlashni joriy etdi. Flutter 3.16 (2023) Metal va Vulkan-ga asoslangan yangi renderlash dvigateli Impeller-ni taqdim etdi.

Flutter 3.22 versiyasi (2024) iOS da Impeller-ni sukut bo'yicha o'z ichiga oladi, Material Design 3 ni yaxshilangan qo'llab-quvvatlashini, makro kengaytmalari bilan Dart 3.4 ni va platforma resurslariga to'g'ridan-to'g'ri kirish uchun Native Assets ni qo'llab-quvvatlashini o'z ichiga oladi. Google Impeller Skia bilan solishtirganda kadr yo'qotishlarini (jank) 90% ga kamaytirishini ma'lum qiladi.

Dart tili

Dart — 2011-yilda Google tomonidan yaratilgan va Flutter-da ishlatiladigan dasturlash tilidir. Dart JIT-kompilyatsiya (Hot Reload uchun) va AOT-kompilyatsiya (ishlab chiqarish versiyalari uchun) imkoniyatlari bilan qattiq tiplashni birlashtiradi. Dart 3.0 versiyasi (2023) pattern matching, sealed class va records-ni barqaror funksiyalar sifatida joriy etdi.

Null safety Dart-da — 2.12 versiyasidan joriy etilgan majburiy funksiyadir. Kompilyator barcha nullable turlarini qurish bosqichida tekshiradi, ish vaqtida NullPointerException-ni bartaraf etadi. Ma'lumot turlari (int, String, bool) sukut bo'yicha non-nullable, nullable qiymatlar uchun esa ? qo'shimchasi ishlatiladi (masalan, String? name).

Flutter arxitekturasi

Flutter arxitekturasi uch darajali printsip asosida qurilgan. Pastki daraja — renderlash, kirish/chiqish va platforma API-lariga kirish uchun mas'ul bo'lgan dvigatel (C/C++). O'rta daraja — vidjetlar, imo-ishoralar, animatsiyalar va navigatsiya tizimini amalga oshiradigan freymvork (Dart). Yuqori daraja — vidjetlarni daraxtga yig'adigan ilova (Dart).

Vidjetlar va vidjet daraxti

Flutter-da hamma narsa vidjetdir. Vidjetlar ikki xil bo'ladi: StatelessWidget (o'zgarmas, holatni saqlamaydi) va StatefulWidget (o'zgaruvchan, holatni State orqali boshqaradi). Vidjet daraxti (Widget Tree) — har bir bola vidjet ota-onaga joylashtirilgan ierarxik strukturadir. Scaffold, AppBar, Container, Text, Column, Row — asosiy qurilish bloklari.

BuildContext — vidjetning daraxtdagi o'rnini uzatuvchi ob'ektdir. MediaQuery.of(context) ekran o'lchamlarini oladi, Theme.of(context) — joriy dizayn mavzusini. BuildContext navigatsiya (Navigator.of(context)), InheritedWidget-ga kirish va Localizations.of orqali lokal tarjima uchun ishlatiladi.

Impeller dvigateli

Impeller — C++ da yozilgan va Metal (iOS/macOS) va Vulkan (Android) dan foydalanadigan zamonaviy Flutter renderlash dvigatelidir. Har bir kadrni noldan qayta chizadigan Skia-dan farqli o'laroq, Impeller shaderlarni oldindan kompilyatsiya qiladi va ularni keshda saqlaydi. Bu murakkab sahnalarning birinchi renderlashidagi kechikishlarni bartaraf etadi va GPU yukini kamaytiradi.

Google Flutter Team sinovlari shuni ko'rsatadiki, Impeller shader kompilyatsiya vaqtini 200–500 ms (Skia) dan 1–3 ms gacha qisqartiradi. iPhone 13 Pro da Impeller renderlashi kadr yo'qotishlarisiz 120 FPS ga yetadi. Android-da Vulkan bilan o'rta segment qurilmalarida (Xiaomi Redmi Note 12) ham barqaror 60 FPS.

Flutter-da namunaviy ilova

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Ilovasi')),
        body: const Center(
          child: Text('Salom, Flutter!'),
        ),
      ),
    );
  }
}

Flutterning afzalliklari

Yagona kod bazasi — Flutterning asosiy afzalligi. Dart-dagi bitta loyiha iOS, Android, Web, Windows, macOS va Linux uchun kompilyatsiya qilinadi. Google hisob-kitoblariga ko'ra, bu alohida iOS va Android loyihalariga nisbatan ishlanma vaqtini 30–50% ga qisqartiradi. Alibaba Flutter-ga o'tgandan so'ng versiya chiqarish vaqtini 30% ga qisqartirdi.

Unumdorlik bo'yicha Flutter mahalliyga yaqin. Dart-ning ARM va x86_64 mashina kodiga AOT kompilyatsiyasi interpretatsiya kechikishlarini bartaraf etadi. Impeller dvigateli 2018-yil qurilmalarida (iPhone XR, Samsung Galaxy S9) ham 60 FPS ni kafolatlaydi. Google ma'lumotlariga ko'ra, Flutter ilovalarida kadrlarning 99.5% yo'qotishlarsiz renderlanadi.

Hot Reload — kodni bir zumda yangilash texnologiyasi. Ishlab chiqaruvchi manba kodini o'zgartiradi, faylni saqlaydi va Flutter ilovaning joriy holatini yo'qotmasdan vidjet daraxtini 300–800 ms ichida qayta kuradi. Bu UI dizayn iteratsiyalarini tezlashtiradi: chekinishlar, ranglar va animatsiyalar to'liq qayta qurishni kutmasdan soniyalarda o'zgartirilishi mumkin.

Material Design 3 va o'zining Cupertino dizayn tili (iOS uslubi) Flutter-ning standart to'plamiga kiritilgan. Material 3 vidjetlari dinamik ranglarni (Material You), adaptiv tartibni va ekranlar o'rtasida o'tish animatsiyasini qo'llab-quvvatlaydi. CupertinoPageTransition va CupertinoNavigationBar mahalliy iOS navigatorining harakatini takrorlaydi.

Vidjetlarni sozlash har bir platformada maxsus View yaratishni talab qilmaydi. build() ni qayta yozish va yangi vidjetni qaytarish kifoya. animation (AnimatedContainer, Hero, TweenAnimationBuilder) va gesture (GestureDetector, Dismissible) paketlari platforma kodini yozmasdan UI animatsiya stsenariylarining 95% ini qamrab oladi.

Flutter ekotizimi va paketlari

pub.dev — Dart va Flutter uchun rasmiy paket reyestri. 2024-yil iyul holatiga ko'ra, reyestrda 45 000 dan ortiq paket nashr etilgan. Paketni o'rnatish flutter pub add buyrug'i bilan amalga oshiriladi. Pub bog'liqliklarni avtomatik hal qiladi, versiya mosligini tekshiradi va pubspec.lock ni yaratadi.

Flutter-da holatni boshqarish — asosiy arxitektura vazifalaridan biridir. flutter_bloc dan tashqari, mashhur yechimlar: Provider (Google tomonidan tavsiya etilgan, InheritedWidget dan foydalanadi), Riverpod (kompilyatsiya vaqti xavfsizligi bilan qayta ishlangan Provider versiyasi) va GetX (hamma-birida: holat, marshrutlash, DI). Provider boshlash uchun eng sodda bo'lib qolmoqda: ChangeNotifierProvider modelni o'rab oladi, Consumer esa ma'lumot o'zgarganda vidjetni qayta chizadi.

Flutter-da test qilish uch darajada qo'llab-quvvatlanadi. Birlik testlari (flutter test) UI-siz funksiyalar va sinflarni tekshiradi. Vidjet testlari (testWidgets) alohida muhitda individual vidjetlarni renderlaydi. Integratsiya testlari (IntegrationTest) qurilma yoki simulyatorda to'liq ilovani ishga tushiradi. Flutter 3.22 yamoq testlarini yamoq analitikasi va yaxshilangan kod qamrovi hisoboti orqali qo'llab-quvvatladi.

Mashhur paketlar

dio — interceptorlar, taymoutlar va FormData qo'llab-quvvatlashi bilan HTTP klienti. GitHub-dagi Flutter loyihalarining 40% ida ishlatiladi. Dio so'rovlarni qayd etish, qayta urinish va avtorizatsiya tokenlarini qo'shish uchun tutib olishni qo'llab-quvvatlaydi. Ikkinchi eng mashhur kutubxona — retrofit, tipli API mijozlarini yaratadi.

flutter_bloc — BLoC (Business Logic Component) namunasiga asoslangan holatni boshqarish kutubxonasi. BlocProvider holatlarni vidjet daraxti bo'ylab uzatadi, BlocBuilder holat o'zgarganda UI ni qayta chizadi, BlocListener esa yon ta'sirlarni (navigatsiya, SnackBar) bajaradi. Cubet — hodisalarsiz BLoC ning soddalashtirilgan versiyasi.

go_router — Google-dan Flutter uchun deklarativ navigatsiya. Marshrutlar GoRouter konfiguratsiyasida ichki marshrutlar, yo'naltirishlar va deep link qo'llab-quvvatlashi bilan tavsiflanadi. ShellRoute navigatsiyani BottomNavigationBar varaqlariga ajratadi. GoRouter 14.0 type-safe yo'llarni va varaq holatini saqlaydigan StatefulShellRoute-ni qo'llab-quvvatlaydi.