Flutter — əsas anlayışlar, arxitektura və vidjetlər

Flutter nədir

Flutter — 2015-ci ildə Google tərəfindən elan edilmiş istifadəçi interfeysləri yaratmaq üçün SDK (Software Development Kit) və çərçivədir. İlk stabil versiya Flutter 1.0 2018-ci ilin dekabrında buraxılmışdır. React Native-dən fərqli olaraq, Flutter JavaScript və yerli kod arasında körpüdən istifadə etmir — birbaşa prosessorun yerli təlimatlarına kompilyasiya olunur.

Flutter-in əsas xüsusiyyəti öz renderləmə mühərrikidir. Çərçivə UIKit (iOS) və ya Android View sisteminə etibar etmir. Bunun əvəzinə Flutter hər pikseli müstəqil şəkildə Skia (2024-cü ilə qədər) və ya yeni Impeller mühərriki vasitəsilə çəkir. Bu, bütün platformalarda tətbiqin eyni görünüşünü təmin edir və OS-nin müxtəlif versiyalarına uyğunlaşma problemlərini aradan qaldırır.

Statista 2024 məlumatlarına görə, Flutter populyarlıq baxımından çarpaz platforma çərçivələri arasında birinci yerdədir: təxminən 46% tərtibatçı ondan mobil inkişaf üçün istifadə edir. Çərçivə Google Pay, Alibaba, eBay, BMW və Tencent layihələrində tətbiq olunur.

Flutter tarixi və versiyaları

İlk Flutter alfa versiyası 2015-ci ildə Dart Developer Summit-də Sky adı ilə təqdim edilmişdir. 2018-ci ildə yalnız iOS və Android dəstəyi ilə Flutter 1.0 buraxıldı. Flutter 2.0 (2021) Web və Desktop əlavə etdi. Flutter 3.0 (2022) macOS və Linux üçün stabil dəstək təqdim etdi. Flutter 3.16 (2023) Metal və Vulkan əsaslı yeni renderləmə mühərriki Impeller-i təqdim etdi.

Flutter 3.22 versiyası (2024) iOS-da Impeller-i standart olaraq daxil edir, Material Design 3-ün təkmilləşdirilmiş dəstəyini, makro genişləndirmələri ilə Dart 3.4-ü və platforma resurslarına birbaşa çıxış üçün daxili Native Assets dəstəyini təqdim edir. Google bildirir ki, Impeller Skia ilə müqayisədə kadr itkilərini (jank) 90% azaldır.

Dart dili

Dart — 2011-ci ildə Google tərəfindən yaradılmış və Flutter-də istifadə olunan proqramlaşdırma dilidir. Dart JIT-kompilyasiya (Hot Reload üçün) və AOT-kompilyasiya (istehsal qurğuları üçün) imkanları ilə sərt tipləşdirməni birləşdirir. Dart 3.0 versiyası (2023) pattern matching, sealed class və records-u sabit funksiyalar kimi təqdim etdi.

Null safety Dart-da — 2.12 versiyasından tətbiq edilən məcburi funksiyadır. Kompilyator bütün nullable tiplərini qurma mərhələsində yoxlayır, iş vaxtı NullPointerException-i aradan qaldırır. Məlumat tipləri (int, String, bool) standart olaraq non-nullable-dır, nullable dəyərlər üçün isə ? şəkilçisi istifadə olunur (məsələn, String? name).

Flutter arxitekturası

Flutter arxitekturası üç səviyyəli prinsip üzrə qurulmuşdur. Aşağı səviyyə — renderləmə, giriş/çıxış və platforma API-lərinə çıxışa cavabdeh olan mühərrik (C/C++). Orta səviyyə — vidjetlər, jestlər, animasiyalar və naviqasiya sistemini həyata keçirən çərçivə (Dart). Yuxarı səviyyə — vidjetləri ağaca yığan tətbiq (Dart).

Vidjetlər və vidjet ağacı

Flutter-də hər şey vidjetdir. Vidjetlər iki növdə olur: StatelessWidget (dəyişməz, vəziyyət saxlamır) və StatefulWidget (dəyişən, vəziyyəti State vasitəsilə idarə edir). Vidjet ağacı (Widget Tree) — hər bir uşaq vidjetin valideynə yerləşdirildiyi iyerarxik strukturdur. Scaffold, AppBar, Container, Text, Column, Row — əsas tikinti bloklarıdır.

BuildContext — vidjetin ağacdakı mövqeyini ötürən obyektdir. MediaQuery.of(context) ekran ölçülərini, Theme.of(context) — cari dizayn mövzusunu əldə edir. BuildContext naviqasiya (Navigator.of(context)), InheritedWidget-a giriş və Localizations.of vasitəsilə lokal tərcümə üçün istifadə olunur.

Impeller mühərriki

Impeller — C++ dilində yazılmış və Metal (iOS/macOS) və Vulkan (Android) istifadə edən müasir Flutter renderləmə mühərrikidir. Hər kadrı sıfırdan çəkən Skia-dan fərqli olaraq, Impeller şeyderləri əvvəlcədən kompilyasiya edir və onları keşdə saxlayır. Bu, mürəkkəb səhnələrin ilkin renderlənməsində gecikmələri aradan qaldırır və GPU yükünü azaldır.

Google Flutter Team testləri göstərir ki, Impeller şeyder kompilyasiya vaxtını 200–500 ms-dən (Skia) 1–3 ms-ə endirir. iPhone 13 Pro-da Impeller renderləməsi kadr itkisi olmadan 120 FPS-ə çatır. Vulkan ilə Android-də orta seqment cihazlarında (Xiaomi Redmi Note 12) belə sabit 60 FPS təmin edir.

Flutter-də nümunə tətbiq

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 Tətbiqi')),
        body: const Center(
          child: Text('Salam, Flutter!'),
        ),
      ),
    );
  }
}

Flutter-in üstünlükləri

Vahid kod bazası — Flutter-in əsas üstünlüyü. Dart-da bir layihə iOS, Android, Web, Windows, macOS və Linux üçün kompilyasiya olunur. Google-ın hesablamalarına görə, bu, ayrı-ayrı iOS və Android layihələri ilə müqayisədə inkişaf vaxtını 30–50% azaldır. Alibaba Flutter-ə keçdikdən sonra versiya buraxılış vaxtını 30% qısaltmışdır.

Performans baxımından Flutter yerliyə yaxındır. Dart-ın ARM və x86_64 maşın koduna AOT kompilyasiyası interpretasiya gecikmələrini aradan qaldırır. Impeller mühərriki 2018-ci il cihazlarında (iPhone XR, Samsung Galaxy S9) belə 60 FPS təmin edir. Google-a görə, Flutter tətbiqlərində kadrların 99.5%-i itkisiz render olunur.

Hot Reload — kodun ani yenilənməsi texnologiyası. Tərtibatçı mənbə kodunu dəyişir, faylı saxlayır və Flutter tətbiqin cari vəziyyətini itirmədən vidjet ağacını 300–800 ms ərzində yenidən qurur. Bu, UI dizayn iterasiyalarını sürətləndirir: boşluqlar, rənglər və animasiyalar tam yenidən qurulmanı gözləmədən saniyələr ərzində dəyişdirilə bilər.

Material Design 3 və öz Cupertino dizayn dili (iOS üslubu) Flutter-in standart tərkibinə daxildir. Material 3 vidjetləri dinamik rəngləri (Material You), adaptiv tərtibatı və ekranlar arasında keçid animasiyalarını dəstəkləyir. CupertinoPageTransition və CupertinoNavigationBar yerli iOS naviqatorunun davranışını təkrarlayır.

Vidjetlərin fərdiləşdirilməsi hər platformada xüsusi View yaratmağı tələb etmir. Sadəcə build()-i dəyişdirmək və yeni vidjet qaytarmaq kifayətdir. animation (AnimatedContainer, Hero, TweenAnimationBuilder) və gesture (GestureDetector, Dismissible) paketləri platforma kodu yazmadan UI animasiya ssenarilərinin 95%-ni əhatə edir.

Flutter ekosistemi və paketləri

pub.dev — Dart və Flutter üçün rəsmi paket reyestridir. 2024-cü il iyul ayına olan məlumata görə, reyestrdə 45 000-dən çox paket dərc edilmişdir. Paket quraşdırması flutter pub add əmri ilə yerinə yetirilir. Pub asılılıqları avtomatik həll edir, versiya uyğunluğunu yoxlayır və pubspec.lock yaradır.

Flutter-də vəziyyətin idarə edilməsi — əsas arxitektura vəzifələrindən biridir. flutter_bloc-dan əlavə, məşhur həllər: Provider (Google tərəfindən tövsiyə olunur, InheritedWidget istifadə edir), Riverpod (kompilyasiya vaxtı təhlükəsizliyi ilə təkmilləşdirilmiş Provider versiyası) və GetX (hamısı-birində: vəziyyət, marşrutlaşdırma, DI). Provider başlamaq üçün ən sadə olaraq qalır: ChangeNotifierProvider modeli əhatə edir, Consumer isə məlumat dəyişdikdə vidjeti yenidən çəkir.

Flutter-də test etmə üç səviyyədə dəstəklənir. Vahid testlər (flutter test) UI olmadan funksiyaları və sinifləri yoxlayır. Vidjet testləri (testWidgets) ayrılmış mühitdə fərdi vidjetləri render edir. İnteqrasiya testləri (IntegrationTest) cihazda və ya simulyatorda tam tətbiqi işə salır. Flutter 3.22 yamaq testləri üçün yamaq analitikası və təkmilləşdirilmiş kod əhatəsi hesabatı vasitəsilə dəstək əlavə etdi.

Məşhur paketlər

dio — interceptorlar, timeautlar və FormData dəstəyi ilə HTTP klienti. GitHub-da Flutter layihələrinin 40%-də istifadə olunur. Dio giriş jurnalı, təkrar cəhdlər və avtorizasiya tokenlərinin əlavə edilməsi üçün sorğuların tutulmasını dəstəkləyir. İkinci ən məşhur kitabxana — retrofit, tipli API müştəriləri yaradır.

flutter_bloc — BLoC (Business Logic Component) nümunəsinə əsaslanan vəziyyətin idarə edilməsi kitabxanasıdır. BlocProvider vəziyyətləri vidjet ağacı boyunca ötürür, BlocBuilder vəziyyət dəyişdikdə UI-ni yenidən çəkir, BlocListener isə yan təsirləri (naviqasiya, SnackBar) yerinə yetirir. Cubet — hadisələr olmadan BLoC-un sadələşdirilmiş versiyasıdır.

go_router — Google-dan Flutter üçün deklarativ naviqasiyadır. Marşrutlar GoRouter konfiqurasiyasında iç-içə marşrutlar, yönləndirmələr və deep link dəstəyi ilə təsvir olunur. ShellRoute naviqasiyanı BottomNavigationBar tablarına bölür. GoRouter 14.0 type-safe yolları və tab vəziyyətini saxlayan StatefulShellRoute-u dəstəkləyir.