Mobil İnkişafda Flutter: Nədir, Əsas Anlayışlar və Necə İşləyir

Flutter: Widget, StatelessWidget və StatefulWidget Əsasları

Widget — UI-nin bir hissəsinin deklarativ təsviri. Flutter-də hər şey Widget-dır: düymədən tətbiqin özünə qədər. Widget konfiqurasiyadır (UI-nin özü deyil). StatelessWidget — dəyişməz Widget. build() bir dəfə çağırılır. Vəziyyəti yoxdur. Statik məzmun üçün istifadə olunur. StatefulWidget — dəyişən Widget. Dəyişə bilən State obyektinə malikdir. setState() — yenidən qurulmanı tetikler. State — StatefulWidget-a bağlı dəyişən obyekt. Dəyişə bilən məlumatları ehtiva edir.

StatelessWidget vs StatefulWidget

StatelessWidget — build() bir dəfə çağırılır. Başlıqlar, ikonlar, statik mətnlər üçün uyğundur. StatefulWidget — build() hər dəfə setState() çağırıldıqda çağırılır. Formalar, dəyişiklikləri olan siyahılar, taymerlər üçün uyğundur. InheritedWidget — konstruktorlar vasitəsilə açıq şəkildə ötürmədən məlumatı aşağı ötürmə. Theme, MediaQuery, Navigator — InheritedWidget-lar. BuildContext — ağacda Widget-in mövqeyi. context.of<T>, context.watch<T>, context.select<T,R> — InheritedWidget-a giriş.

// Nümunə Flutter Widget: setState ilə StatefulWidget
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — konfiqurasiya. StatelessWidget — dəyişməz. StatefulWidget — setState() ilə dəyişən. IT Sectr StatelessWidget ilə başlamağı və yalnız vəziyyət lazım olduqda StatefulWidget-a keçməyi tövsiyə edir.

Ağaclar (Widget Tree, Element Tree, RenderObject Tree)

Flutter səmərəli renderinq üçün üç ağac istifadə edir. Widget Tree — konfiqurasiya ağacı. Widget-lar tez-tez yaradılır (hər build), yüngüldür. Element Tree — element ağacı. Widget başına bir element (tip dəyişməzsə). Element — Widget və RenderObject arasında körpü. RenderObject Tree — renderinq ağacı. Ölçüləri, mövqeləri, çəkilişi idarə edir. RenderObject — ağırdır, nadir hallarda yaradılır. Flutter Widget Tree-ni müqayisə edir və Element Tree-ni yeniləyir, bu da RenderObject Tree yenilənməsini tetikler.

Keys və Element Tree

Key — Element Tree-də Widget identifikatoru. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Key-lər Flutter-ə yenidən qurulma zamanı köhnə və yeni Widget-ları uyğunlaşdırmağa imkan verir. Key-lər olmadan, Flutter Widget tipinə və mövqeyinə görə uyğunlaşdırır. GlobalKey — başqa Widget-dan State-ə giriş. İstifadə olunur: mürəkkəb formalar, animasiyalar, testlərdə State-ə giriş üçün. IT Sectr siyahılar (List.generate) üçün Key-lərdən istifadə etməyi və zəruri olmadıqca GlobalKey-dən qaçınmağı tövsiyə edir.

Expanded — Row/Column/Flex-də mövcud yeri dolduran Widget. Flexible — doldurmağa məcbur etmir (kiçik ola bilər). MediaQuery — cihaz məlumatı olan InheritedWidget: ekran ölçüsü, oriyentasiya, platforma, mətn miqyas faktoru. Theme/ThemeData — mərkəzləşdirilmiş tema. Theme.of(context) — giriş. MaterialApp — marşrutlaşdırma, temalar, lokal konfiqurasiya üçün kök Widget. Scaffold — AppBar, Drawer, BottomNavigationBar ilə əsas layout. AppBar — yuxarı panel.

Naviqasiya (Navigator, Route)

Navigator — marşrut yığını (Routes). Navigator.push — ekranı aç (Future qaytarır). Navigator.pop — bağla (nəticə ilə). MaterialPageRoute — animasiyalı keçid (sağdan sürüşdürmə). Named Routes — sətir identifikatorları. onGenerateRoute — mərkəzləşdirilmiş işləyici. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — web, dərin keçidlər və mürəkkəb ssenarilər üçün deklarativ naviqasiya.

Navigator 2.0

Navigator 2.0 — deklarativ naviqasiya. Router — mərkəzi Widget. RouteInformationParser — URL analizi. RouterDelegate — yığın idarəetməsi. GoRouter (paket) — Navigator 2.0 üzərində sadələşdirilmiş sarğı. Dəstəkləyir: adlandırılmış marşrutlar, parametrlər, yönləndirmə, dərin keçidlər. IT Sectr əksər layihələr üçün GoRouter-i və yalnız mürəkkəb ssenarilər (web, desktop) üçün Navigator 2.0-ı tövsiyə edir.

Asinxron (FutureBuilder, StreamBuilder)

FutureBuilder — Future əsasında UI quran Widget. connectionState: none, waiting, active, done. İstifadə olunur: HTTP sorğuları, DB oxumaları, taymerlər üçün. StreamBuilder — Stream üçün Widget (sonsuz məlumat axını). snapshot.data, snapshot.hasError, snapshot.hasData. İstifadə olunur: WebSocket, Firebase, yer yeniləmələri üçün. Hər iki Widget yeni məlumat aldıqda yenidən qurulur.

Vəziyyət İdarəetməsi

Provider — sadə DI + vəziyyət idarəetməsi. ChangeNotifierProvider, MultiProvider. Riverpod — Provider-in müasir əvəzi: kompilə təhlükəsiz, BuildContext-dən asılı olmayan. Bloc — Event-Driven arxitekturası: Cubit (sadə hadisələr) vs Bloc (mürəkkəb). GetX — yüngül vəziyyət idarəetməsi + DI + marşrutlaşdırma. setState — ən sadə, lokal vəziyyət üçün. IT Sectr yeni layihələr üçün Riverpod-u, mövcud layihələr üçün Provider-i tövsiyə edir.

Temalar və Uyğunlaşma (MediaQuery, ThemeData)

MediaQuery — ekran ölçüsü, oriyentasiya, platforma, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — tətbiq teması: rənglər, şriftlər, formalar. Theme.of(context).textTheme.bodyLarge. Hot Reload — işləyən tətbiqə kod inyeksiyası. Vəziyyəti qoruyur. Dəstəkləmir: main() dəyişdirmə, qlobal dəyişənlər, statik sahələr. Hot Restart — tam tətbiq yenidən başlatması (vəziyyət itkisi). Hot Reload — Flutter-in tərtibatçılar üçün əsas üstünlüyü.

StatelessWidget — statik məzmun üçün. StatefulWidget — dinamik məzmun üçün. InheritedWidget — DI üçün. IT Sectr defolt olaraq StatelessWidget-i və yalnız lazım olduqda StatefulWidget-i tövsiyə edir.

Cavab verən Layout

LayoutBuilder — valideyn ölçülərinə uyğunlaşma. OrientationBuilder — oriyentasiyaya uyğunlaşma. Expanded vs Flexible — Row/Column-da yer paylanması. MediaQuery — planşetlər və masaüstülər üçün qırılma nöqtələri. SafeArea — sistem elementlərindən (notç, status paneli) kənar boşluqlar. AspectRatio — nisbətlərin saxlanması. IT Sectr uyğunlaşan layoutlar üçün LayoutBuilder-i və üfüqi oriyentasiya üçün OrientationBuilder-i tövsiyə edir.

Test (Widget, Integration, Unit)

Vahid testlər — biznes məntiqinin, repozitoriyaların, modellərin testi. dart test — işə salma. Widget testləri — vidjetlərin təcrid olunmuş şəkildə testi. WidgetTester — pumpWidget, tap, enterText. İnteqrasiya testləri — real cihaz/emulyatorda tam ssenarilər. Mockito — asılılıqların mock edilməsi. Golden testlər — ekran görüntülərinin müqayisəsi (golden fayllar). IT Sectr hər ekran üçün Widget testi və biznes məntiqi üçün vahid testi tövsiyə edir.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animasiyalar (Gizli, Aşkar, Hero)

Gizli animasiyalar — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Xüsusiyyət dəyişiklikləri avtomatik animasiya olunur. Aşkar animasiyalar — Tween ilə AnimationController. forward() / reverse(). Hero animasiyası — etiketli Hero Widget — ekranlar arasında keçid animasiyası. Pilləli animasiya — Interval ilə animasiya zənciri. Lottie — After Effects animasiyalarının inteqrasiyası. Rive — interaktiv animasiyalar (state machine). IT Sectr 80% hallarda AnimatedContainer-i və mürəkkəb ssenarilər üçün AnimationController-i tövsiyə edir.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Şəbəkə (http, dio, graphql)

http — sadə HTTP klienti (get, post, put, delete). dio — interceptorlar, timeautlar, yenidən cəhdlər, günlükləmə ilə qabaqcıl klient. graphql_flutter — Flutter üçün GraphQL klienti. json_serializable — annotasiyalar vasitəsilə fromJson/toJson yaradılması. Retrofit Dart — Retrofit kimi type-safe HTTP klienti. WebSocket — web_socket_channel vasitəsilə. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr REST API üçün dio-nu və GraphQL üçün graphql_flutter-ı tövsiyə edir.

Flutter DevTools — alətlər dəsti: Inspector (vidjet ağacı), Timeline (performans), Memory, Network, Logging. Profile mode — debug olmadan profilləşdirmə. Performance overlay — FPS, qurma vaxtları. Flame chart — alov diaqramı. DevTools — istehsalda Flutter tətbiqlərini optimallaşdırmaq üçün vacib alət.

Flutter Web — Flutter-ın WASM (WebAssembly)-ə kompilyasiyası. CanvasKit (Skia) vs HTML renderer. CanvasKit — piksel mükəmməl, lakin daha ağır. HTML renderer — yüngül, lakin məhdudiyyətlərlə. WASM (Flutter 3.22+) — native performans. LayoutBuilder və MediaQuery vasitəsilə cavab verən uyğunlaşma. IT Sectr masaüstü web tətbiqləri üçün CanvasKit-i və məzmun saytları üçün HTML renderer-ı tövsiyə edir.