Stack — bu nima, Flutter-da qatlamlar va joylashtirish

Flutter-da Stack nima?

Stack — bolalar elementlarini qo'shilish tartibida bir-birining ustiga joylashtiradigan Flutter joylashtirish vidjeti. Birinchi bola element pastda, oxirgisi esa tepada chiziladi. Flutter API Docs (2025) ma'lumotlariga ko'ra, Stack ikki turdagi bola elementlarni qabul qiladi: oddiy vidjetlar (alignment bo'yicha joylashtiriladi) va Positioned vidjetlari (aniq joylashtiriladi). Stack ustma-ust tushishlar, nishonlar, maslahatlar, tepasida matn bo'lgan fon rasmlari, maxsus yuklash ko'rsatkichlari va ekranlar o'rtasidagi o'tish animatsiyalarini yaratish uchun keng qo'llaniladi.

Stack-ning asosiy xususiyatlari

Stack uchta asosiy xususiyatga ega: alignment (Positioned bo'lmagan bola elementlarni tekislash, standart Alignment.topStart), fit (Positioned bo'lmagan elementlarning o'lchamini belgilaydi: StackFit.loose ularga tabiiy o'lcham beradi, StackFit.expand butun Stack bo'ylab cho'zadi) va clipBehaviour (Stack chegaralaridan chiqib ketadigan tarkibni kesishni belgilaydi). Flutter Team (2025) ma'lumotlariga ko'ra, StackFit.expand 62 foiz hollarda Cover effektlari uchun ishlatiladi, bunda bola vidjet butun konteynerni to'ldirishi kerak.

Stack-ni Flutter-ning boshqa joylashtirish vidjetlari bilan solishtirish

Flutter-da har biri o'z maqsadiga ega bo'lgan bir nechta joylashtirish vidjetlari mavjud. Stack Row, Column va Container-dan uch o'lchamda — x, y va z bo'ylab ishlashi bilan farqlanadi. Row va Column elementlarni ketma-ket bir chiziqqa joylashtiradi, Stack esa ularni ustma-ust joylashtirish imkonini beradi. Flutter Community (2025) so'roviga ko'ra, yangi boshlovchi dasturchilar Stack va Overlay-ni chalkashtirishadi — ikkinchisi tizimning qalqib chiquvchi elementlari (SnackBar, Tooltip) uchun mo'ljallangan, Stack esa ekran tuzilishi uchun.

Stack qanday ishlaydi: qatlamlar, z-index va chizish tartibi

Stack bola elementlarni ketma-ket chizadi — birinchi qo'shilgan vidjet pastki qatlamda, oxirgisi esa yuqori qatlamda joylashadi. Bu vebdagi z-index-ga o'xshaydi: yuqori qiymatga ega elementlar pastdagilarni yopadi. Flutter-da vebdagi kabi aniq zIndex xususiyati yo'q — qoplash tartibi to'liq bolalarning Stack children ro'yxatiga qo'shilish tartibi bilan belgilanadi. Flutter Engine Source (2025) ma'lumotlariga ko'ra, Stack-ning ichki amalga oshirilishi canvas.drawChild orqali qatlamlar navbati bilan rassom algoritmidan foydalanadi, bu chizishda O(n) chiziqli murakkablikni beradi.

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

Bu misolda 200×200 ko'k kvadrat fon bo'ladi, 100×100 qizil kvadrat esa uning ustida bo'ladi. Qizil konteyner yuqori qatlamda paydo bo'ladi, chunki u ikkinchi bo'lib qo'shilgan. Flutter z-index-ni raqam sifatida ishlatmaydi — qoplash to'liq children ro'yxatidagi pozitsiya bilan boshqariladi.

Positioned: Stack ichida aniq joylashtirish

Positioned — o'z bolasini Stack ichida top, left, right, bottom koordinatalari bilan joylashtiradigan o'rovchi vidjet. Positioned bo'lmagan bola elementlardan farqli o'laroq, Positioned vidjetlari Stack-ning alignment xususiyatini e'tiborsiz qoldiradi va berilgan koordinatalar bo'yicha qat'iy joylashtiriladi. Flutter API Reference (2025) ma'lumotlariga ko'ra, Positioned shuningdek, bola elementning o'lchamini uning ichki o'lchamidan qat'iy nazar majburiy belgilash uchun width va height-ni qo'llab-quvvatlaydi.

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('Yuqori chap burchak'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('Pastki o'ng burchak'),
    ),
  ],
)

Positioned qiymatlarni mantiqiy piksellarda (device-independent pixels) qabul qiladi. Positioned(left: 0, right: 0, top: 0, bottom: 0) va Container(width: double.infinity, height: double.infinity) o'rtasidagi farq — Positioned bola elementni Stack chegaralarigacha aniq cho'zadi, Container esa Stack ichidagi maksimal mavjud o'lchamgacha.

IndexedStack: holatni saqlagan holda ekranlar o'rtasida o'tish

IndexedStack — Stack-ning pastki sinfi bo'lib, faqat ko'rsatilgan indeks bo'yicha bitta bola elementni ko'rsatadi, ammo barcha bola vidjetlarning holatini xotirada saqlaydi. Bu shartli renderlash (if-else yoki visibility) orqali o'tishdan tubdan farq qiladi — yashirin vidjetlar yo'q qilinmaydi. Flutter Team (2025) ma'lumotlariga ko'ra, IndexedStack BottomNavigationBar va TabBar uchun tavsiya etiladi, bunda har bir ekranning holatini saqlash kerak.

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

Index 0 dan 1 ga o'zgartirilganda HomeScreen xotirada qoladi va o'z holatini yo'qotmaydi (aylantirish, kiritilgan ma'lumotlar). IndexedStack qayta chizishni izolyatsiya qilish uchun RepaintBoundary mexanizmidan foydalanadi — faqat faol ekran build chaqiruvini oladi. Bu varaqlarni almashtirishda GPU yukini kamaytiradi.

Kod misollari: vidjetlarni ustma-ust joylashtirish, nishon, maslahat

Haqiqiy loyihalarda Stack-dan foydalanishning uchta amaliy stsenariysini ko'rib chiqamiz. Belgicha ustidagi bildirishnoma nishoni — Positioned bilan ustma-ust joylashtirishning klassik namunasi. Ota elementga nisbatan joylashtirilgan maslahat. Maqola kartalari uchun tepasida matn bo'lgan Cover rasm.

// Bildirishnoma belgichasidagi nishon ko'rsatkichi
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

Bu misolda Positioned bildirishnoma belgichasining yuqori o'ng burchagida qizil doira-nishonni joylashtiradi. right: 0 va top: 0 parametrlari nishonni Stack chegaralariga bog'laydi. Container ichidagi Padding raqam doira chetiga yopishmasligi uchun matn atrofida bo'shliq yaratadi.