Scaffold: bu nədir, strukturu və Flutter vidjetləri

Flutter-də Scaffold nədir

Scaffold — bu Material Design kitabxanasından olan vidjet-kompozitordur, ekranın əsas vizual strukturunu formalaşdırır. O, Material tətbiqinin standart nümunəsini həyata keçirir: yuxarı panel, ekran gövdəsi, yan menyu və üzən düymələr. Sadəcə ölçülər və stil təyin edən Container-dən fərqli olaraq, Scaffold bütöv ekranı vahid sistem kimi idarə edir.

Material Design üzrə qurulmuş hər bir Flutter tətbiqi MaterialApp ilə başlayır, onun daxilində hər bir ekran Scaffold-a bürünür. Məhz Scaffold iPhone X və daha yuxarı modellər üçün SafeArea-ı nəzərə alaraq, bütün cihazlarda AppBar-ın düzgün göstərilməsini təmin edir. O, hççinin z-sırasına cavabdehdir: Drawer body üzərində, SnackBar isə bütün interfeysin üzərində, lakin dialoq pəncərələrindən aşağıda göstərilir.

Rəsmi Flutter API Reference (2026)-yə görə, Scaffold SnackBar, BottomSheet və PersistentBottomSheet kimi vidjetlərin düzgün işləməsi üçün məcburi şərtdir. Bu komponentlər Scaffold kontekstinə daxil olmaq üçün InheritedWidget Scaffold.of-dən asılı olduğundan, Scaffold olmadan istisna atırlar. Buna görə də hər hansı məzmunu Scaffold əvəzinə birbaşa Container-də yerləşdirmək, Material funksionallığının itirilməsinə səbəb olan yeni başlayanların ümumi səhvdir.

Vidjet iyerarxiyasında Scaffold

Tipik bir Flutter tətbiqində Scaffold MaterialApp daxilində, adətən cross-platform inkişafda WidgetsApp və ya CupertinoApp altında yerləşir. MaterialApp Navigator və tematik yaradır, Scaffold isə cari ekranın strukturunu müyənləyir. Hər bir ekran özünün unikal AppBar, Drawer və BottomNavigationBar ilə öz Scaffold-ına sahib ola bilər, bu da interfeysi müəyyən bir səhifəyə uyğun şəkildə çevik şəkildə konfiqurasiya etməyə imkan verir.

Dərin fərdiləşdirmə üçün Scaffold NestedScrollView ilə birləşdirilə bilər — bu, parallaks effekti ilə yox olan AppBar kimi mürəkkəb sürüşdürmə effektlərini həyata keçirməyə imkan verir. Lakin əksər hallarda standart Scaffold öz xassələri ilə istehsal-ready ekran qurmaq üçün kifayətdir.

Scaffold strukturu: çərçivənin əsas hissələri

Scaffold bir neçe məcburi və isteğə bağlı zonalardan ibarətdir, hər biri interfeysin müəyyən bir hissəsinə cavabdehdir. Onların bir-biri ilə necə qarşılıqlı əlaqədə olduğunu anlamaq üçün hər bir hissəni ayrıca nəzərdən keçirək.

AppBar — yuxarı panel

AppBar — bu başlıq, naviqasiya düyməsi və hərəkətləri göstərən ekranın yuxarı panelidir. O, avtomatik olaraq 56dp düzgün hündürlüyü alır və çərtməli cihazlar üçün SafeArea-nı nəzərə alır. AppBar-a bottom xassəsindən istifadə edərək vərəqləri dəyişmək üçün TabBar daxil edilə bilər.

Drawer — yan menyu

Drawer — bu soldan çıxan və tətbiqin bölmələri üzrə naviqasiyanı təmin edən paneldir. drawer xassəsi təyin olunarsa, Scaffold avtomatik olaraq AppBar-a hamburger içarəsi əlavə edir. Drawer DrawerHeader, menyu elementləri ilə ListView və istifadəçi məlumatlarını ehtiva edə bilər.

BottomNavigationBar — aşağı naviqasiya

BottomNavigationBar — bu əsas bölmələr arasında keçid üçün ekranın aşağı hissəsindəki paneldir. 2-dən 5-ə qədər etiketli içarələr ehtiva edir və NavigationBar vasitəsilə aktiv göstərici ilə Material 3-ü dəstəkləyir. Scaffold onu ekranın aşağısında yerləşdirir, məzmunun örtülməməsi üçün body-ni avtomatik olaraq yuxarı sürüşdürür.

FloatingActionButton — üzən düymə

FloatingActionButton — bu ekranın sağ aşağı küncündə yerləşdirilən dairəvi düymədir. Ekranda əsas hərəkət üçün istifadə olunur, məsələn, yeni qeyd əlavə etmək və ya mesaj göndərmək. Scaffold extended xassələri vasitəsilə genişləndirilmiş animasiya ilə bir neçə FAB-ı dəstəkləyir.

Body — əsas məzmun

Body — bu əsas məzmunun yerləşdirildiyi ekranın mərkəzi sahəsidir. Body kimi hər hansı vidjet çıxış edə bilər: Column, ListView, GridView, Stack və ya fərdi kompozisiya. Scaffold AppBar, BottomNavigationBar və SafeArea-nı nəzərə alaraq body hündürlüyünü avtomatik hesablayır, bu da ölçülərin əl ilə tənzimlənməsinə ehtiyacı aradan qaldırır.

Scaffold-un əsas xassələri

Scaffold ekranın görünüşünü və davranışını konfiqurasiya etmək üçün 30-dan çox xassə təmin edir. Onların arasında həm məcburi (body), həm də boşluqları, fonu və klaviatura vəziyyətini idarə edən isteğə bağlı xassələr var. Hər bir xassəni başa düşmək interfeysi dizayn tələblərinə uyğun şəkildə dəqiq tənzimləməyə kömək edir.

resizeToAvoidBottomInset xassəsi formalarla işlərkən xüsusilə vacibdir: true (standart) olaraq təyin edildikdə, Scaffold klaviatura görünəndə body-ni avtomatik sıxır ki, daxiletmə sahƏsi görünür qalsın. Bu, fərdi klaviatura dinləyiciləri yazmaq ehtiyacını aradan qaldırır. SingleChildScrollView ilə fərdi ssenarilər üçün xassə söndürülə bilər.

Tətbiqdə Scaffold istifadəsi nümunəsi

Material komponentlərinin tam dəsti ilə Scaffold-un praktiki nümunəsini nəzərdən keçirək. Kod AppBar, Drawer, BottomNavigationBar, FloatingActionButton və SnackBar ilə ekran yaradır — Flutter-də mobil tətbiqin tipik strukturu.

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('Mənim Tətbiqim'),
        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('Parametrlər'), 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('Əməliyyat tamamlandı')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Nümunədə köhnəlmiş BottomNavigationBar əvəzinə Material 3-dən NavigationBar istifadə olunur. Scaffold bütün hissələri avtomatik birləşdirir: Drawer açılanda SnackBar gizlədir, vərəqlər dəyişdiriləndə body yenilənir, FloatingActionButton isə yerində qalır. ScaffoldMessenger iyerarxiyada bir neçə Scaffold olsa belə SnackBar-ın göstərilməsinə zəmanət verir.

Scaffold və Material 3: konfiqurasiya xüsusiyyətləri

Material 3 (M3) — bu Google tərəfindən 2023-cü ildə təqdim edilmiş Material Design-in təkamülüdür. M3-də Scaffold bir sıra dəyişikliklər aldı: BottomNavigationBar əvəzinə yeni NavigationBar vidjeti, ColorScheme.fromSeed vasitəsilə Dynamic Color dəstəyi və komponentlərin boşluqları və hündürlüyü üzrə yenilənmiş tövsiyələr. M3-ə keçid Scaffold-un dəyişdirilməsini tələb etmir — tətbiqin mövzusunu yeniləmək kifayətdir.

Layihədə Material 3-ü aktivləşdirmək üçün ThemeData-da useMaterial3: true təyin etmək lazımdır. Scaffold vizual görünüşü avtomatik uyğullaşdırır: boşluqlar böyüyür (16dp əvəzinə 24dp), rənglər seed-rəngdən hesablanır, FloatingActionButton isə yuvarlaq köşələrlə daha böyük ölçülər alır. Bununla belə, Scaffold-un bütün mövcud xassələri işlək qalır.

Material Design 3 Specification (2026)-ya görə, BottomNavigationBar əvəzinə üç-beş bəndli NavigationBar istifadə etmək tövsiyə olunur. Scaffold hər iki variantı dəstəkləyir, lakin NavigationBar Pixel cihazlarında adaptivlik və Material You üçün daha yaxşı dəstək təmin edir.

Scaffold-un Material 3 üçün konfiqurasiyası

Scaffold-un M3 ilə düzgün işləməsi üçün mövzunu yeniləmək və BottomNavigationBar-ı NavigationBar ilə əvəz etmək kifayətdir. Rənglər ColorScheme.fromSeed vasitəsilə avtomatik hesablanacaq, Scaffold isə boşluqları yeni standartlara uyğunlaşdıracaq. Lazım olduqda backgroundColor birbaşa ləğv edilə bilər.