AppBar — bu nədir, Flutter-da quraşdırma və vidjetlər

Flutter-da AppBar nədir

AppBar — Scaffold-un yuxarı hissəsində göstərilən standart Material yuxarı panel komponentidir. O, ekran başlığını, naviqasiya düyməsini (adətən "hamburger" ikonu və ya "Geri" oxu) və hərəkətləri — axtarış, parametrlər və ya digər funksiyaları açan ikonları ehtiva edir. AppBar avtomatik olaraq platformaya uyğunlaşır: Android-də standart Material bottom-shadow, iOS-da isə daha düz dizayn və şəffaflıq istifadə olunur.

AppBar PreferredSizeWidget interfeysini tətbiq edir, yəni hündürlüyü sabitdir və qurulmadan əvvəl məlumdur. Standart olaraq AppBar-ın hündürlüyü Android-də 56dp, iOS-da şaquli oriyentasiyada 44dp təşkil edir, yuxarıda SafeArea nəzərə alınmaqla. Bu xüsusiyyət Scaffold-a body üçün mövcud yeri əvvəlcədən hesablamağa imkan verir, render zamanı yenidən düzülmənin qarşısını alır.

Flutter Material Library Guide (2026)-ya görə, AppBar bir neçə iterasiyadan keçmişdir: Flutter 1.x-də sadə mətn konteyneri idi, Flutter 2.x-də Material 3 və flexibleSpace dəstəyi aldı, Flutter 3.x-də isə System UI (status paneli rəngi, şəffaflıq) ilə inteqrasiya əldə etdi. Müasir AppBar Android 12+ cihazlarında Material You-dan Dynamic Color-ı dəstəkləyir.

AppBar strukturu: xüsusiyyətlər və parametrlər

AppBar yuxarı panelin hər hissəsini idarə edən parametrlər dəsti təqdim edir. Bu xüsusiyyətləri başa düşmək, fərdi həllər yaratmadan paneli istənilən dizayn tələblərinə çevik şəkildə uyğunlaşdırmağa imkan verir.

Title və leading: başlıq və naviqasiyanın qurulması

title xüsusiyyəti istənilən vidjeti qəbul edir, lakin ən çox TextStyle ilə stil konfiqurasiyası olan Text istifadə olunur. Uzun başlıqlar üçün title-ı Flexible-ə bükmək tövsiyə olunur ki, yer çatışmazlığında mətn düzgün kəsilsin. leading xüsusiyyəti, açıq şəkildə təyin edilməyibsə, Navigator.push vasitəsilə iç-içə ekrana keçid zamanı avtomatik olaraq BackButton ilə əvəz olunur.

Actions: hərəkət ikonlarının yerləşdirilməsi

actions siyahısı AppBar-ın sağ kənarına düzləndirilmiş vidjetləri ehtiva edir. Hər bir element 48dp-dən (Material Design standartı) geniş olmamalıdır. Hərəkətləri qruplaşdırmaq üçün PopupMenuButton istifadə edin — bu, daha az vacib variantları açılan menyuda gizlədir və interfeys sıxlığı üzrə Material tövsiyələrinə əməl edir.

AppBar-ın fərdiləşdirilməsi: stillər, rənglər və davranış

AppBar rəng, kölgə və boşluq xüsusiyyətləri vasitəsilə dərin fərdiləşdirməni dəstəkləyir. Əsas görünüş tətbiqin mövzusundan miras alınır, lakin hər bir xüsusiyyət fərdi olaraq ləğv edilə bilər. Əsas konfiqurasiya ssenarilərini nəzərdən keçirək.

AppBar-ın fon rəngi backgroundColor vasitəsilə təyin edilir. Göstərilməyibsə, ThemeData-dən appBarTheme istifadə olunur. Material 3-də AppBar rəngi avtomatik olaraq ColorScheme.primary-dən hesablanır, lakin konkret ekran üçün ləğv edilə bilər. Şəffaf AppBar (tez-tez profillərdə istifadə olunur) üçün backgroundColor: Colors.transparent və elevation: 0 təyin edin.

elevation xüsusiyyəti AppBar altındakı kölgəni idarə edir. 0 dəyəri kölgəni silir, "düz" panel effekti yaradır, bu Material 3 üçün aktualdır. 4 dəyəri standart Material Design kölgəsi verir. Kölgənin fərdi idarəsi üçün shadowColor istifadə edin — paneli məzmundan vizual olaraq ayıran kölgə rəngi.

AppBar-da mətn rəngini idarə etmək üçün foregroundColor istifadə edin. Bu xüsusiyyət başlığın, ikonların və actions mətninin rənginə təsir edir. backgroundColor dəyişdirilərkən avtomatik olaraq kontrastlı foregroundColor seçilir, lakin qeyri-standart dizaynlar üçün məcburi təyin edilə bilər.

SliverAppBar: AppBar-ın animasiyalı versiyası

SliverAppBar — CustomScrollView daxilində istifadə üçün AppBar-ın genişləndirilməsidir, sürüşdürmə zamanı animasiyanı dəstəkləyir: yığılma (collapsing), paralaks effekti və bərkitmə (pinned). Standart AppBar-dan fərqli olaraq, SliverAppBar sliver-vidjetdir və sürüşdürmə mövqeyindən asılı olaraq ölçüsünü dinamik dəyişə bilər.

SliverAppBar-ın əsas rejimləri pinned, floating və snap xüsusiyyətlərinin kombinasiyası ilə müəyyən edilir. Pinned rejimində panel həmişə ekranın yuxarı hissəsində görünür. Floating rejimində əks sürüşdürmə zamanı görünür. Floating + snap kombinasiyası "yapışqan" panel davranışı yaradır, ən kiçik yuxarı sürüşdürmədə çıxır, bu tez-tez xəbər lentlərində istifadə olunur.

Flutter API SliverAppBar (2026)-ya görə, SliverAppBar istifadə etmək üçün adi ListView və ya Column-ı sliver-vidjetlərlə CustomScrollView ilə əvəz etmək lazımdır. Scaffold düzgün işləməyə davam edir, lakin Scaffold-un appBar xüsusiyyəti null olmalıdır — SliverAppBar CustomScrollView daxilində ilk sliver kimi yerləşdirilir.

Tətbiqdə AppBar-ın qurulması nümunəsi

AppBar nümunəsini axtarış, açılan menyu və TabBar ilə nəzərdən keçirək. Bu kod Flutter-da istehsal tətbiqində yuxarı panelin tipik konfiqurasiyasını nümayiş etdirir.

Scaffold(
  appBar: AppBar(
    title: const Text('Kataloq'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Parametrlər')),
          const PopupMenuItem(value: 'about', child: Text('Tətbiq haqqında')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Nümunədə AppBar mərkəzləşdirilmiş başlıq, solda Drawer açma düyməsi, sağda axtarış ikonu və açılan menyu ehtiva edir. TabBar bottom-da məhsul kateqoriyaları arasında keçid etməyə imkan verir. Bu konfiqurasiya mobil tətbiqlərin əksər ssenarilərini əhatə edir: naviqasiya, axtarış, əlavə seçimlər və bölmələr arasında keçid — hamısı bir yuxarı paneldə.