AppBar — bu nima, sozlash va Flutter vidjetlari

Flutter-da AppBar nima

AppBar — Scaffold-ning yuqori qismida ko'rsatiladigan standart Material yuqori panel komponenti. U ekran sarlavhasini, navigatsiya tugmasini (odatda "gamburger" belgisi yoki "Orqaga" o'qi) va harakatlarni — qidirish, sozlamalar yoki boshqa funksiyalarni ochadigan belgilarni o'z ichiga oladi. AppBar avtomatik ravishda platformaga moslashadi: Android-da standart Material bottom-shadow, iOS-da esa tekisroq dizayn va shaffoflik ishlatiladi.

AppBar PreferredSizeWidget interfeysini amalga oshiradi, ya'ni uning balandligi doimiy va qurishdan oldin ma'lum. Standart bo'yicha, AppBar balandligi Android-da 56dp va iOS-da vertikal yo'nalishda 44dp, yuqorida SafeArea hisobga olingan holda. Bu xususiyat Scaffold-ga body uchun mavjud joyni oldindan hisoblash imkonini beradi, renderlashda qayta joylashishni oldini oladi.

Flutter Material Library Guide (2026) ma'lumotlariga ko'ra, AppBar bir necha iteratsiyadan o'tgan: Flutter 1.x da oddiy matn konteyneri edi, Flutter 2.x da Material 3 va flexibleSpace qo'llab-quvvatlashini oldi, Flutter 3.x da esa System UI (holat paneli rangi, shaffoflik) bilan integratsiyaga ega bo'ldi. Zamonaviy AppBar Android 12+ qurilmalarida Material You dan Dynamic Color-ni qo'llab-quvvatlaydi.

AppBar tuzilishi: xususiyatlar va parametrlar

AppBar yuqori panelning har bir qismini boshqaradigan parametrlar to'plamini taqdim etadi. Ushbu xususiyatlarni tushunish, odatiy yechimlar yaratmasdan panelni istalgan dizayn talablariga moslashtirish imkonini beradi.

Title va leading: sarlavha va navigatsiyani sozlash

title xususiyati istalgan vidjetni qabul qiladi, lekin eng ko'p TextStyle orqali uslub sozlamasi bilan Text ishlatiladi. Uzoq sarlavhalar uchun title-ni Flexible-ga o'rash tavsiya etiladi, matn joy yetishmasligida to'g'ri kesilishi uchun. leading xususiyati, agar aniq belgilanmagan bo'lsa, Navigator.push orqali ichki ekranga o'tishda avtomatik ravishda BackButton bilan almashtiriladi.

Actions: harakat belgilarini joylashtirish

actions ro'yxati AppBar-ning o'ng chetiga tekislangan vidjetlarni o'z ichiga oladi. Har bir element 48dp dan keng bo'lmasligi kerak (Material Design standarti). Harakatlarni guruhlash uchun PopupMenuButton dan foydalaning — bu kamroq muhim variantlarni ochiladigan menyuda yashiradi va interfeys zichligi bo'yicha Material tavsiyalariga amal qiladi.

AppBar-ni moslashtirish: uslublar, ranglar va xatti-harakat

AppBar rang, soya va bo'shliq xususiyatlari orqali chuqur moslashtirishni qo'llab-quvvatlaydi. Asosiy ko'rinish ilova mavzusidan meros qilib olinadi, lekin har bir xususiyat alohida bekor qilinishi mumkin. Asosiy sozlash stsenariylarini ko'rib chiqaylik.

AppBar-ning fon rangi backgroundColor orqali o'rnatiladi. Agar ko'rsatilmagan bo'lsa, ThemeData dan appBarTheme ishlatiladi. Material 3 da AppBar rangi avtomatik ravishda ColorScheme.primary dan hisoblanadi, lekin ma'lum bir ekran uchun bekor qilinishi mumkin. Shaffof AppBar (ko'pincha profillarda ishlatiladi) uchun backgroundColor: Colors.transparent va elevation: 0 o'rnating.

elevation xususiyati AppBar ostidagi soyani boshqaradi. 0 qiymati soyani olib tashlaydi, "tekis" panel effektini yaratadi, bu Material 3 uchun dolzarbdir. 4 qiymati standart Material Design soyasini beradi. Soyani boshqarish uchun shadowColor dan foydalaning — panelni tarkibdan vizual ravishda ajratadigan soya rangi.

AppBar-da matn rangini boshqarish uchun foregroundColor dan foydalaning. Bu xususiyat sarlavha, belgilar va actions matni rangiga ta'sir qiladi. backgroundColor o'zgartirilganda avtomatik ravishda kontrastli foregroundColor tanlanadi, lekin nostandart dizaynlar uchun majburiy o'rnatilishi mumkin.

SliverAppBar: AppBar-ning animatsiyali versiyasi

SliverAppBar — CustomScrollView ichida foydalanish uchun AppBar-ning kengaytmasi bo'lib, aylantirishda animatsiyani qo'llab-quvvatlaydi: yig'ilish (collapsing), paralaks effekti va mahkamlash (pinned). Standart AppBar-dan farqli o'laroq, SliverAppBar sliver-vidjetdir va aylantirish pozitsiyasiga qarab hajmini dinamik o'zgartirishi mumkin.

SliverAppBar-ning asosiy rejimlari pinned, floating va snap xususiyatlari kombinatsiyasi bilan aniqlanadi. Pinned rejimida panel har doim ekranning yuqori qismida ko'rinadi. Floating rejimida orqaga aylantirishda paydo bo'ladi. Floating + snap kombinatsiyasi "yopishqoq" panel xatti-harakatini yaratadi, eng kichik yuqoriga aylantirishda chiqadi, bu ko'pincha yangiliklar lentalarida ishlatiladi.

Flutter API SliverAppBar (2026) ma'lumotlariga ko'ra, SliverAppBar dan foydalanish uchun oddiy ListView yoki Column-ni sliver-vidjetlar bilan CustomScrollView bilan almashtirish kerak. Scaffold to'g'ri ishlashda davom etadi, lekin Scaffold-ning appBar xususiyati null bo'lishi kerak — SliverAppBar CustomScrollView ichida birinchi sliver sifatida joylashtiriladi.

Ilovada AppBar-ni sozlash misoli

AppBar misolini qidirish, ochiladigan menyu va TabBar bilan ko'rib chiqaylik. Ushbu kod Flutter-dagi ishlab chiqarish ilovasida yuqori panelning odatda konfiguratsiyasini namoyish etadi.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalog'),
    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('Sozlamalar')),
          const PopupMenuItem(value: 'about', child: Text('Ilova haqida')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Misolda AppBar markazlashtirilgan sarlavha, chapda Drawer ochish tugmasi, o'ngda qidirish belgisi va ochiladigan menyuni o'z ichiga oladi. TabBar bottom da mahsulot toifalari o'rtasida almashish imkonini beradi. Bu konfiguratsiya mobil ilovalarning aksariyat stsenariylarini qamrab oladi: navigatsiya, qidirish, qo'shimcha variantlar va bo'limlar o'rtasida almashish — hammasi bitta yuqori panelda.