Scaffold: bu nima, tuzilishi va Flutter vidjetlari

Flutterda Scaffold nima

Scaffold — bu Material Design kutubxonasidan olingan vidjet-kompozitor bo‘lib, ekranning asosiy vizual tuzilishini shakllantiradi. U Material ilovasining standart namunasini amalga oshiradi: yuqori panel, ekran tanasi, yon menyu va suzuvchi tugmalar. Faqat o‘lchamlar va uslubni belgilaydigan Containerdan farqli o‘laroq, Scaffold butun ekranni yagona tizim sifatida boshqaradi.

Material Design bo‘yicha qurilgan har bir Flutter ilovasi MaterialApp bilan boshlanadi, uning ichida har bir ekran Scaffoldga o‘raladi. Aynan Scaffold iPhone X va undan yuqori modellar uchun SafeAreani hisobga olgan holda barcha qurilmalarda AppBarning to‘g‘ri ko‘rsatilishini ta’minlaydi. U shuningdek z-tartibi uchun javobgardir: Drawer tanadan yuqorida, SnackBar esa butun interfeysdan yuqorida, ammo muloqot oynalaridan pastda ko‘rsatiladi.

Rasmiy Flutter API Reference (2026) ma’lumotlariga ko‘ra, Scaffold SnackBar, BottomSheet va PersistentBottomSheet kabi vidjetlarning to‘g‘ri ishlashi uchun majburiy shartdir. Scaffoldsiz bu komponentlar istisno tashlaydi, chunki ular Scaffold kontekstiga kirish uchun InheritedWidget Scaffold.of ga bog‘liq. Shuning uchun har qanday tarkibni Scaffold o‘rniga to‘g‘ridan-to‘g‘ri Containerga joylashtirish Material funksionalligini yo‘qotishga olib keladigan boshlang‘ich dasturchilarning keng tarqalgan xatosidir.

Vidjetlar iyerarxiyasida Scaffold

Oddiy Flutter ilovasida Scaffold MaterialApp ichida, odatda cross-platform ishlanmada WidgetsApp yoki CupertinoApp ostida joylashadi. MaterialApp Navigator va mavzuni yaratadi, Scaffold esa joriy ekran tuzilishini belgilaydi. Har bir ekran o‘zining noyob AppBar, Drawer va BottomNavigationBari bilan o‘z Scaffoldiga ega bo‘lishi mumkin, bu interfeysni muayyan sahifa uchun moslashuvchan sozlash imkonini beradi.

Chuqur moslashtirish uchun Scaffold NestedScrollView bilan birlashtirilishi mumkin — bu parallaks effekti bilan yo‘qoladigan AppBar kabi murakkab aylantirish effektlarini amalga oshirish imkonini beradi. Biroq ko‘p hollarda standart Scaffold o‘z xususiyatlari bilan ishlab chiqarishga tayyor ekran qurish uchun yetarli.

Scaffold tuzilishi: ramkaning asosiy qismlari

Scaffold bir necha majburiy va ixtiyoriy zonalardan iborat bo‘lib, har biri interfeysning ma’lum bir qismi uchun javobgardir. Ularning bir-biri bilan qanday o‘zaro aloqada ekanligini tushunish uchun har bir qismni alohida ko‘rib chiqaylik.

AppBar — yuqori panel

AppBar — bu sarlavha, navigatsiya tugmasi va harakatlarni ko‘rsatadigan ekranning yuqori paneli. U avtomatik ravishda 56dp to‘g‘ri balandlikni oladi va ‘‘chuqurchali’‘ qurilmalar uchun SafeAreani hisobga oladi. AppBarga bottom xususiyatidan foydalanib varaqlarni almashtirish uchun TabBar o‘rnatilishi mumkin.

Drawer — yon menyu

Drawer — bu chap tomondan chiqadigan va ilova bo‘limlari bo‘yicha navigatsiyani ta’minlaydigan panel. drawer xususiyati o‘rnatilgan bo‘lsa, Scaffold avtomatik ravishda AppBarga gamburger belgisini qo‘shadi. Drawer DrawerHeader, menyu elementlari bilan ListView va foydalanuvchi ma’lumotlarini o‘z ichiga olishi mumkin.

BottomNavigationBar — pastki navigatsiya

BottomNavigationBar — bu asosiy bo‘limlar o‘rtasida o‘tish uchun ekranning pastki qismidagi panel. U 2 dan 5 gacha yorliqli belgilarni o‘z ichiga oladi va NavigationBar orqali faol indikatsiya bilan Material 3 ni qo‘llab-quvvatlaydi. Scaffold uni ekranning pastki qismida joylashtiradi, tarkibning yopilmasligi uchun tanani avtomatik ravishda yuqoriga siljitadi.

FloatingActionButton — suzuvchi tugma

FloatingActionButton — bu ekranning pastki o‘ng burchagida joylashtiriladigan dumaloq tugma. U ekrandagi asosiy harakat uchun ishlatiladi, masalan, yangi yozuv qo‘shish yoki xabar yuborish. Scaffold extended xususiyatlari orqali kengaytirilgan animatsiya bilan bir nechta FABni qo‘llab-quvvatlaydi.

Body — asosiy tarkib

Body — bu asosiy tarkib joylashtiriladigan ekranning markaziy maydoni. Body sifatida har qanday vidjet bo‘lishi mumkin: Column, ListView, GridView, Stack yoki moslashtirilgan kompozitsiya. Scaffold AppBar, BottomNavigationBar va SafeAreani hisobga olgan holda tananing balandligini avtomatik hisoblaydi, bu o‘lchamlarni qo‘lda sozlash zaruratini yo‘qotadi.

Scaffoldning asosiy xususiyatlari

Scaffold ekranning ko‘rinishi va harakatini sozlash uchun 30 dan ortiq xususiyatlarni taqdim etadi. Ular orasida ham majburiy (body), ham bo‘shliqlar, fon va klaviatura holatini boshqaradigan ixtiyoriy xususiyatlar mavjud. Har bir xususiyatni tushunish interfeysni dizayn talablariga muvofiq aniq sozlashga yordam beradi.

resizeToAvoidBottomInset xususiyati ayniqsa formalar bilan ishlashda muhim: true (standart) ga o‘rnatilganda, Scaffold klaviatura paydo bo‘lganda tanani avtomatik siqadi, shunda kiritish maydoni ko‘rinadigan bo‘lib qoladi. Bu maxsus klaviatura tinglovchilarini yozish zaruratini yo‘qotadi. SingleChildScrollView bilan maxsus stsenariylar uchun xususiyatni o‘chirish mumkin.

Ilovada Scaffolddan foydalanish namunasi

Material komponentlarining to‘liq to‘plami bilan Scaffoldning amaliy namunasini ko‘rib chiqaylik. Kod AppBar, Drawer, BottomNavigationBar, FloatingActionButton va SnackBar bilan ekran yaratadi — Flutterdagi mobil ilovaning odatiy tuzilishi.

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mening Ilovam'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menyu')),
            ListTile(title: const Text('Sozlamalar'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Amaliyot tugallandi')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Namunada eskirgan BottomNavigationBar o‘rniga Material 3 dan NavigationBar ishlatilgan. Scaffold barcha qismlarni avtomatik bog‘laydi: Drawer ochilganda SnackBar yashiriladi, varaqlar almashtirilganda tana yangilanadi, FloatingActionButton esa joyida qoladi. ScaffoldMessenger iyerarxiyada bir nechta Scaffold bo‘lsa ham SnackBarning ko‘rsatilishini kafolatlaydi.

Scaffold va Material 3: sozlash xususiyatlari

Material 3 (M3) — bu Google tomonidan 2023 yilda taqdim etilgan Material Designning evolyutsiyasi. M3dagi Scaffold bir qator o‘zgarishlarni oldi: BottomNavigationBar o‘rniga yangi NavigationBar vidjeti, ColorScheme.fromSeed orqali Dynamic Color qo‘llab-quvvatlashi va komponentlarning bo‘shliqlari va balandligi bo‘yicha yangilangan tavsiyalar. M3ga o‘tish Scaffoldni almashtirishni talab qilmaydi — ilova mavzusini yangilash kifoya.

Loyihada Material 3 ni faollashtirish uchun ThemeData da useMaterial3: true ni o‘rnatish kerak. Scaffold vizual ko‘rinishni avtomatik moslashtiradi: bo‘shliqlar kattalashadi (16dp o‘rniga 24dp), ranglar seed rangdan qayta hisoblanadi, FloatingActionButton esa yumaloq burchaklar bilan kattaroq o‘lchamlar oladi. Shu bilan birga, Scaffoldning barcha mavjud xususiyatlari ishlaydi.

Material Design 3 Specification (2026) ma’lumotlariga ko‘ra, BottomNavigationBar o‘rniga uch-besh bandli NavigationBar dan foydalanish tavsiya etiladi. Scaffold ikkala variantni ham qo‘llab-quvvatlaydi, ammo NavigationBar Pixel qurilmalarida moslashuvchanlik va Material You uchun yaxshiroq qo‘llab-quvvatlashni ta’minlaydi.

Scaffoldni Material 3 uchun sozlash

Scaffoldning M3 bilan to‘g‘ri ishlashi uchun mavzuni yangilash va BottomNavigationBar ni NavigationBar bilan almashtirish kifoya. Ranglar ColorScheme.fromSeed orqali avtomatik hisoblanadi, Scaffold esa bo‘shliqlarni yangi standartlarga moslashtiradi. Kerak bo‘lsa, backgroundColor ni to‘g‘ridan-to‘g‘ri bekor qilish mumkin.