Flutter Widgets — bu nədir, vidjet ağacı və build

Flutter Widgets nədir?

Flutter Widgets — Flutter frameworkündə bütün UI elementləridir, dəyişməz (immutable) Dart sinifləri kimi tətbiq edilir. Vidjet UI elementinin konfiqurasiyasıdır: ölçüsü, rəngi, mövqeyi, hadisə idarəçiləri. Android (XML + View) və ya iOS-dən (Storyboard + UIView) fərqli olaraq, Flutter nativ komponentlərdən istifadə etmir — hər şey Skia (Android/iOS/Linux) və ya Impeller (iOS/macOS) məhərriki tərəfindən Canvas-da çəkilir. Bu, bütün platformalarda platforma fərqlilikləri olmadan eyni görünüşü təmin edir. Flutter iki vidjet dəsti ilə gəlir: Material Widgets (Android/Web üçün Google Material Design 3 dizaynı) və Cupertino Widgets (iOS/macOS üçün Apple HIG dizaynı). Tərtibatçı hər iki dəsti bir tətbiqdə birləşdirə bilər. Hər vidjetin uşaq vidjet və ya onların kompozisiyasını qaytaran build() metodu var — vidjet ağacı belə qurulur.

Flutter-ün üç ağacı

Flutter üç ağacla işləyir: Widget Tree (tərtibatçı tərəfindən yaradılan konfiqurasiya), Element Tree (vidjetin ağacdakı mövqeyinə uyğunluğu, framework tərəfindən idarə olunur), Render Tree (layout-u hesablayan və paint edən obyektlər). Widget Element yaradır, Element isə RenderObject yaradır. Element konfiqurasiya dəyişdikdə (rebuild) təkrar istifadə olunur — bu Flutter optimallaşdırma mexanizmidir: vidjetin növü və key uyğun gəlirsə, Element yenidən yaradılmır, yalnız yeni konfiqurasiya yenilənir. Üç ağacı başa düşmək Flutter tətbiqlərinin performansını optimallaşdırmağın açarıdır.

StatelessWidget: dəyişməz vidjetlər

StatelessWidget — daxili vəziyyəti saxlamayan vidjet. O, parametrləri konstruktor vasitəsilə qəbul edir və qurulduqdan sonra dəyişmədən göstərir. StatelessWidget statik elementlər üçün idealdır: başlıqlar, nişanlar, avatarlar, sabit məlumatlı siyahılar. build() metodu yaradılarkən və ana vidjet dəyişdikdə bir dəfə çağrılır. StatelessWidget-ün vəziyyəti olmadığı üçün ayrıca State obyekti tələb etmir — build() birbaşa vidjet sinfində təyin olunur.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — name və avatarUrl-i konstruktor vasitəsilə qəbul edən StatelessWidget. CircleAvatar avatarı, Text isə adı göstərir. Vidjet bu dəyərləri yaradıldıqdan sonra dəyişə bilməz. const konstruktorundan (const ProfileHeader) istifadə Flutter-ə ana vidjet rebuild edildikdə vidjet nüsxəsini təkrar istifadə etməyə imkan verir — bu, bütün StatelessWidget üçün tövsiyə olunan mikrooptimallaşdırmadır.

StatefulWidget: vəziyyətli vidjetlər

StatefulWidget — ayrıca State obyektində saxlanılan dəyişən vəziyyətə malik vidjet. StatefulWidget-ün özü StatelessWidget kimi dəyişməzdir (immutable). Dəyişən hissə State-də cəmlənmişdir: State — bir dəfə yaradılan və vidjetin çoxsaylı rebuild-lərindən sonra qalan obyektdir. Vəziyyət dəyişdikdə (setState()), Flutter State-in build() metodunu çağırır və UI-ni yeniləyir. StatefulWidget interaktiv elementlər üçün istifadə olunur: sayıcılar, mətn sahələri, checkboxlar, animasiyalar, taymerlər.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — _LikeButtonState State sinfi ilə StatefulWidget. liked və count sahələri State-də saxlanılan və rebuild zamanı sıfırlanmayan vəziyyətdir. setState() Flutter-ə UI-ni yenidən qurmağın zəruriliyi barədə məlumat verir. Flutter hər ana rebuild-də State-i yenidən yaratmır — yalnız konfiqurasiya dəyişdikdə (key və ya vidjet növü). IT Sectr-də biz göstərmək üçün StatelessWidget, interaktiv komponentlər üçün isə StatefulWidget istifadə edirik, StatefulWidget-ì mutasiya sərhəddlərinə qədər minimallaşdırmaq prinsipinə əməl edirik.

Vidjet ağacı: Widget-dən RenderObject-a qədər

Widget Tree — tətbiqin UI-ni təsvir edən vidjetlərin iyerarxik strukturudur. Flutter Widget Tree-ni Element Tree-yə çevirir: hər Widget ağacdakı mövqeyini və RenderObject ilə əlaqəsini izləyən Element yaradır. Render Tree layout (ölçü və mövqelərin müəyyən edilməsi) və paint (çəkmə) yerinə yetirir. Element əsas optimallaşdırma qatıdır: rebuild zamanı vidjet növü və key dəyişməyibsə, Element təkrar istifadə olunur, konfiqurasiyanı RenderObject-u yenidən yaratmadan yeniləyir. Bu, Flutter-ə yüksək kadr tezliyində (60/120 FPS) performans təmin edir.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Salam, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen vidjet ağacı: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — Material Design-ün əsas layout vidjeti. Center uşaq Column-u mərkəzləşdirir. Column uşaq elementləri şaquli olaraq mərkəzə düzləşdirir (mainAxisAlignment.center). Flutter layout-u yuxarıdan aşağıya (constraints valideyndən ötürülür), ölçüləri isə aşağıdan yuxarıya (sizedByParent və ya sizing from children) hesablayır.

BuildContext: yığılma konteksti və ağaca çıxış

BuildContext — vidjetin Element Tree-dəki mövqeyinin deskriptorudur. Hər build() metodu BuildContext qəbul edir, onun vasitəsilə vidjet aşağıdakılara çıxış əldə edə bilər:MediaQuery (ekran ölçüsü, oriyentasiya, piksel sıxlığı, safe area), Theme (MaterialThemeData və ya CupertinoThemeData), Navigator (navigasiya yığını), ScaffoldMessenger (SnackBar), InheritedWidget (məlumatları ağac boyunca ötürmə). BuildContext build() tamamlandıqdan sonra saxlanılmamalı və ya sinxron kontekstdən kənarda istifadə edilməməlidir — bu, «Scaffold.of() called with a context that does not contain a Scaffold» səhvlərinə gətirib çıxarır. Context-i saxlamaq əvəzinə məlumatlara çıxış üçün Builder vidjetindən və ya InheritedWidget nümunəsindən istifadə edin.

Key: vidjetin ağacda identifikasiyası

Key — hər vidjetin konstruktorunun isteğə bağlı parametridir (super.key). Key Flutter-ə siyahıdakı elementlərin sırası/sayı dəyişdikdə vidjeti müəyyən etməyə kömək edir. Key olmadan Flutter vidjetləri növü və mövqeyinə görə müqayisə edir; siyahının ortasına element əlavə edərkən key olmadan Flutter səhv vidjet üçün Element-i təkrar istifadə edir, vəziyyət (StatefulWidget) və animasiya səhvlərinə səbəb olur. Siyahılar üçün ValueKey (unikal identifikator), ObjectKey (məlumat obyekti əsasında), UniqueKey (hər rebuild-də zəmanətli unikal — məcburi yenidən yaratma üçün) istifadə edin.

Flutter vidjet kataloqu: Material, Cupertino, Layout

Flutter SDK (stabil versiya 3.3+, Dart 3+) kateqoriyalara bölünmüş 200+ daxili vidjeti əhatə edir: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) və Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Layout vidjetləri istənilən Flutter UI-nin əsasıdır: Row üfiüqi ardıcıllıqlar üçün, Column şaquli ardıcıllıqlar üçün, Stack üst-üstə düşən elementlər üçün, Container BoxDecoration ilə bəzəmə üçün.