Flutter Layout Cheat Sheet

Flutter uchun oddiy tartib namunalari kerakmi?
Men sizga Flutter joylashuv kodi parchalarini to'plamini taqdim etaman. Men uni qisqa, shirin va sodda, ko'plab vizual misollar bilan saqlayman.
Shunday bo'lsa-da, u davom etmoqda - namunalar katalogi o'sadi. Men tarkibiy qismlarni namoyish etish o'rniga Flutter vidjetlaridan foydalanishga ko'proq e'tibor qarataman (Flutter Galereya bu juda yaxshi!).
Agar siz Flutter-ni "joylashtirish" bilan bog'liq muammolarga duch kelsangiz yoki o'zingizning parchalaringizni boshqalar bilan baham ko'rmoqchi bo'lsangiz, marhamat qilib chiziq qoldiring!

Agar siz Animatsiyalar haqida shunga o'xshash maqolani qiziqtirmoqchi bo'lsangiz, Flutter Animations Cheat Sheet sahifasiga tashrif buyuring.

Mundarija

  • Qator va ustun
  • Ichki kenglik va ichkiHeight
  • Stek
  • Kengaytirilgan
  • CheklanganBox
  • Idish
     bezatish: BoxDecoration
     • rasm: DekoratsiyaImage
     • chegara: chegara
     • borderRadius: BorderRadius
     • shakli: BoxShape
     • boxShadow: ro'yxat
     • gradient: RadialGradient
     • backgroundBlendMode: BlendMode
  • Materiallar
     • shakli: BeveledRectangleBorder
  • Slivers Yangi!
     • SliverFillRemaining
  • SizedBox
  • SafeArea

Qator va ustun

AsosiyAxisAlignment

Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.start,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.center,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.end,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),

Agar siz turli xil matnlarning asosini tekislashni talab qilsangiz, siz CrossAxisAlignment.baseline-dan foydalanishingiz kerak.

Satr (
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  bolalar:  [
    Matn (
      "Boshlang'ich",
      uslub: Theme.of (kontekst) .textTheme.display3,
    ),
    Matn (
      "Boshlang'ich",
      uslub: Theme.of (kontekst) .textTheme.body1,
    ),
  ],
),

CrossAxisAlignment

Satr / * yoki ustun * / (
  crossAxisAlignment: CrossAxisAlignment.start,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 200),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  crossAxisAlignment: CrossAxisAlignment.center,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 200),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  crossAxisAlignment: CrossAxisAlignment.end,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 200),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  crossAxisAlignment: CrossAxisAlignment.stretch,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 200),
    Belgi (Icons.star, hajmi: 50),
  ],
),

MainAxisSize

Satr / * yoki ustun * / (
  mainAxisSize: MainAxisSize.max,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),
Satr / * yoki ustun * / (
  mainAxisSize: MainAxisSize.min,
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),

Ichki kenglik va ichkiHeight

Qator yoki ustun ichidagi barcha vidjetlar eng uzun / enli vidjet kabi uzun / enli bo'lishini xohlaysizmi? Boshqa qidirish kerak emas!

Agar sizda bunday tartib mavjud bo'lsa:

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('IntrinsicWidth')),
    tanasi: Markaz (
      bola: ustun (
        bolalar:  [
          Raised tugmasi (
            onPressed: () {},
            bola: Matn ('Qisqa'),
          ),
          Raised tugmasi (
            onPressed: () {},
            bola: Matn ('Bir oz uzoqroq'),
          ),
          Raised tugmasi (
            onPressed: () {},
            bola: Matn ('Eng uzun matn tugmasi'),
          ),
        ],
      ),
    ),
  );
}

Ammo siz hamma tugmalarni eng kengligiga qadar olishni xohlaysiz, faqat IntrinsicWidth-dan foydalaning:

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('IntrinsicWidth')),
    tanasi: Markaz (
      bola: Ichki kenglik (
        bola: ustun (
          crossAxisAlignment: CrossAxisAlignment.stretch,
          bolalar:  [
            Raised tugmasi (
              onPressed: () {},
              bola: Matn ('Qisqa'),
            ),
            Raised tugmasi (
              onPressed: () {},
              bola: Matn ('Bir oz uzoqroq'),
            ),
            Raised tugmasi (
              onPressed: () {},
              bola: Matn ('Eng uzun matn tugmasi'),
            ),
          ],
        ),
      ),
    ),
  );
}

Agar sizda shunga o'xshash muammo bo'lsa, lekin siz barcha vidjetlarni baland bo'yli bo'lishini xohlasangiz, eng balandlari IntrinsicHeight va Row vidjetlaridan foydalaning.

Stek

Vidjetlarni bir-birining ustiga yopish uchun juda mos keladi

@ sayohat
Vidjetlarni yaratish (BuildContext konteksti) {
  Vidjet asosiy = Iskala (
    appBar: AppBar (sarlavha: Matn ('Stack')),
  );

  return Stack (
    muvofiqligi: StackFit.expand,
    bolalar:  [
      asosiy,
      Banner (
        xabar: "Top Boshlash",
        manzil: BannerLocation.topStart,
      ),
      Banner (
        xabar: "Top End",
        manzil: BannerLocation.topEnd,
      ),
      Banner (
        xabar: "Pastki boshlang'ich",
        manzil: BannerLocation.bottomStart,
      ),
      Banner (
        xabar: "Pastki uchi",
        manzil: BannerLocation.bottomEnd,
      ),
    ],
  );
}

O'zingizning vidjetlaringiz bilan ularni Widget Widget-ga joylashtirishingiz kerak

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Stack')),
    tanasi: suyakka (
      muvofiqligi: StackFit.expand,
      bolalar:  [
        Material (rang: Colors.yellowAccent),
        Joylashgan (
          yuqori: 0,
          chap: 0,
          bola: Nishon (Icons.star, hajmi: 50),
        ),
        Joylashgan (
          yuqori: 340,
          chap: 250,
          bola: Nishon (Icons.call, size: 50),
        ),
      ],
    ),
  );
}

Agar siz yuqori yoki pastki qiymatlarni bilishni istamasangiz, ularni olish uchun LayoutBuilder-dan foydalanishingiz mumkin

Vidjetlarni yaratish (BuildContext konteksti) {
  const iconSize = 50;
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('LayoutBuilder bilan birikma')),
    tanasi: LayoutBuilder (
      quruvchi: (kontekst, cheklovlar) =>
        Stek (
          muvofiqligi: StackFit.expand,
          bolalar:  [
            Material (rang: Colors.yellowAccent),
            Joylashgan (
              yuqori: 0,
              bola: Nishon (Icons.star, hajmi: iconSize),
            ),
            Joylashgan (
              yuqori: cheklovlar.maxHeight - iconSize,
              chap: cheklovlar.maxWidth - iconSize,
              bola: Nishon (Icons.call, size: iconSize),
            ),
          ],
        ),
    ),
  );
}

Kengaytirilgan

Kengaytirilgan Flex \ Flexbox tartibi bilan ishlaydi va bir nechta elementlar orasidagi bo'sh joyni taqsimlash uchun juda yaxshi.

Satr (
  bolalar:  [
    Kengaytirilgan (
      bola: konteyner (
        bezatish: const BoxDecoration (rang: Colors.red),
      ),
      moslashuvchan: 3,
    ),
    Kengaytirilgan (
      bola: konteyner (
        bezatish: const BoxDecoration (rang: Colors.green),
      ),
      moslashuvchan: 2,
    ),
    Kengaytirilgan (
      bola: konteyner (
        bezatish: const BoxDecoration (rang: Colors.blue),
      ),
      moslashuvchan: 1,
    ),
  ],
),

CheklanganBox

Odatiy bo'lib, vidjetlarning ko'pi iloji boricha kam joy sarflaydi:

Karta (bola: const Text ('Salom Dunyo!'), Rang: Colors.yellow)

ConstrainedBox vidjetga qolgan joyni xohlagancha ishlatishga imkon beradi.

ConstrainedBox (
  cheklovlar: BoxConstraints.expand (),
  bola: const Card (
    bola: const Text ('Salom Dunyo!'),
    rang: Colors.yellow,
  ),
),

BoxConstraints-dan foydalanib, siz vidjetda qancha joy bo'lishi mumkinligini aniqlaysiz - min / maksimal balandlik / kenglikni belgilaysiz.

BoxConstraints.expand cheksiz (mavjud bo'lgan barcha) bo'sh joydan foydalanadi, agar quyidagilar ko'rsatilmagan bo'lsa:

ConstrainedBox (
  cheklovlar: BoxConstraints.expand (balandligi: 300),
  bola: const Card (
    bola: const Text ('Salom Dunyo!'),
    rang: Colors.yellow,
  ),
),

Va xuddi shunday:

ConstrainedBox (
  cheklovlar: BoxConstraints (
    minWidth: double.infinity,
    eng kengligi: qo'shaloqlik,
    minHight: 300,
    maksimalHight: 300,
  ),
  bola: const Card (
    bola: const Text ('Salom Dunyo!'),
    rang: Colors.yellow,
  ),
),

Idish

Eng ko'p ishlatiladigan vidjetlardan biri - va yaxshi sabablarga ko'ra:

Konteyner joylashtirish vositasi sifatida

Idishning balandligi va kengligini ko'rsatmasangiz, u bolaning o'lchamiga mos keladi

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Layout sifatida konteyner')),
    tanasi: konteyner (
      rang: Colors.yellowAccent,
      bola: Matn ("Salom"),
    ),
  );
}

Agar siz Konteynerni ota-onasiga mos kelishini xohlasangiz, bo'y va kenglik xususiyatlari uchun double.infinity-dan foydalaning

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Layout sifatida konteyner')),
    tanasi: konteyner (
      balandligi: juftlik.
      kengligi: double.infinity,
      rang: Colors.yellowAccent,
      bola: Matn ("Salom"),
    ),
  );
}

Konteyner bezatish sifatida

Konteynerning foniga ta'sir qilish uchun rang xususiyatlaridan foydalanishingiz mumkin, ammo bezatish va oldingi bezatish. (Ikkala xususiyat bilan siz konteynerning ko'rinishini butunlay o'zgartira olasiz, ammo men keyinroq turli xil bezaklar haqida gaplashaman, chunki bu juda katta mavzu)
bezatish har doim bolaning orqasida bo'ladi, old tomonda esa Dekoratsiya uning ustiga qo'yilgan

bezatish
Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Konteyner.decoration')),
    tanasi: konteyner (
      balandligi: juftlik.
      kengligi: double.infinity,
      bezatish: BoxDecoration (rang: Colors.yellowAccent),
      bola: Matn ("Salom"),
    ),
  );
}
bezatish va oldingi bezak
Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Konteyner.foregroundDecoration')),
    tanasi: konteyner (
      balandligi: juftlik.
      kengligi: double.infinity,
      bezatish: BoxDecoration (rang: Colors.yellowAccent),
      old tomoniDecoration: BoxDecoration (rang: Ranglar.red.withOpacity (0,5)),
      bola: Matn ("Salom"),
    ),
  );
}

Transformatsiya sifatida konteyner

Agar siz tartibingizni o'zgartirish uchun Transform vidjetidan foydalanishni istamasangiz, to'g'ridan-to'g'ri konteynerdan transform xususiyatidan foydalanishingiz mumkin

Vidjetlarni yaratish (BuildContext konteksti) {
  return Scaffold (
    appBar: AppBar (sarlavha: Matn ('Konteyner.transform')),
    tanasi: konteyner (
      balandligi: 300,
      kengligi: 300,
      o'zgartirish: Matrix4.rotationZ (pi / 4),
      bezatish: BoxDecoration (rang: Colors.yellowAccent),
      bola: Matn (
        "Salom",
        textAlign: TextAlign.center,
      ),
    ),
  );
}

BoxDecoration

Bezatish odatda konteyner ko'rinishini o'zgartirish uchun konteyner vidjetida qo'llaniladi.

rasm: DekoratsiyaImage

Tasvirni fon sifatida joylashtiradi:

Iskala (
  appBar: AppBar (sarlavha: Matn ('rasm: DekoratsiyaImage')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        rang: Colors.yellow,
        rasm: DekoratsiyaImage (
          sig'ishi: BoxFit.fitWidth,
          rasm: NetworkImage (
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
    ),
  ),
);

chegara: chegara

Konteyner chegarasi qanday ko'rinishini belgilaydi.

Iskala (
  appBar: AppBar (sarlavha: Matn ('chegara: chegara')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        rang: Colors.yellow,
        chegara: Border.all (rang: Colors.black, kenglik: 3),
      ),
    ),
  ),
);

borderRadius: BorderRadius

Chegara burchaklarni yaxlitlash imkonini beradi.

Agar bezatish shakli BoxShape.circle bo'lsa, borderRadius ishlamaydi

Iskala (
  appBar: AppBar (sarlavha: Matn ('borderRadius: BorderRadius')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        rang: Colors.yellow,
        chegara: Border.all (rang: Colors.black, kenglik: 3),
        borderRadius: BorderRadius.all (Radius doirasi (18)),
      ),
    ),
  ),
);

shakli: BoxShape

Qutini bezatish to'rtburchaklar / kvadrat yoki ellips / doira bo'lishi mumkin.

Boshqa har qanday shakl uchun siz BoxDecoration o'rniga ShapeDecoration-dan foydalanishingiz mumkin

Iskala (
  appBar: AppBar (sarlavha: Matn ('shakli: BoxShape')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        rang: Colors.yellow,
        shakli: BoxShape.circle,
      ),
    ),
  ),
);

boxShadow: ro'yxat

Konteynerga soya qo'shadi.

Ushbu parametr ro'yxatdir, chunki siz bir nechta turli xil soyalarni belgilashingiz va ularni birlashtirishingiz mumkin.

Iskala (
  appBar: AppBar (sarlavha: Matn ('boxShadow: ro'yxat ')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        rang: Colors.yellow,
        boxShoya: const [
          BoxShadow (bladiRadius: 10),
        ],
      ),
    ),
  ),
);

gradient

Uch xil gradient mavjud: LinearGradient, RadialGradient va SweepGradient.

LinearGradient
Iskala (
  appBar: AppBar (sarlavha: Matn ('gradient: LinearGradient')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        gradient: LinearGradient (
          ranglar: const [
            Colors.red,
            Ranglar.blue,
          ],
        ),
      ),
    ),
  ),
);
RadialGradient
Iskala (
  appBar: AppBar (sarlavha: Matn ('gradient: RadialGradient')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        gradient: RadialGradient (
          ranglar: const [Colors.yellow, Colors.blue],
          to'xtaydi: const [0.4, 1.0],
        ),
      ),
    ),
  ),
);
SweepGradient
Iskala (
  appBar: AppBar (sarlavha: Matn ('gradient: SweepGradient')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      bezatish: BoxDecoration (
        gradient: SweepGradient (
          ranglar: const [
            Ranglar.blue,
            Colors.green,
            Ranglar
            Colors.red,
            Ranglar.blue,
          ],
          to'xtaydi: const [0.0, 0.25, 0.5, 0.75, 1.0],
        ),
      ),
    ),
  ),
);

backgroundBlendMode

backgroundBlendMode bu BoxDecoration-ning eng murakkab xususiyatidir.
BoxDecoration-ning ranglari / gradientlarini va BoxDecoration-ning yuqori qismidagi narsalarni aralashtirish uchun javobgardir.

BackgroundBlendMode bilan BlendMode enum-da ko'rsatilgan algoritmlarning uzun ro'yxatidan foydalanishingiz mumkin.

Birinchidan, qutichaning bolasi ustiga chizilgan BoxDecoration-ni oldingi o'ringa qo'ying (bezak bolaning orqasida joylashgan).

Iskala (
  appBar: AppBar (sarlavha: Matn ('backgroundBlendMode')),
  tanasi: Markaz (
    bola: konteyner (
      balandligi: 200,
      kengligi: 200,
      old tomoniDecoration: BoxDecoration (
        backgroundBlendMode: BlendMode.exclusion,
        gradient: LinearGradient (
          ranglar: const [
            Colors.red,
            Ranglar.blue,
          ],
        ),
      ),
      bola: Image.network (
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
    ),
  ),
);

backgroundBlendMode faqat joylashgan konteynerga ta'sir qilmaydi.

backgroundBlendMode konteynerdan vidjet daraxtiga mos keladigan har qanday rangni o'zgartiradi.
Quyidagi kodda rasm chizadigan ota-ona konteyneri va backgroundBlendMode-dan foydalanadigan bola konteyneri mavjud. Shunday bo'lsa-da, siz avvalgiday samaraga erishasiz.

Iskala (
  appBar: AppBar (sarlavha: Matn ('backgroundBlendMode')),
  tanasi: Markaz (
    bola: konteyner (
      bezatish: BoxDecoration (
        rasm: DekoratsiyaImage (
          rasm: NetworkImage (
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
      bola: konteyner (
        balandligi: 200,
        kengligi: 200,
        old tomoniDecoration: BoxDecoration (
          backgroundBlendMode: BlendMode.exclusion,
          gradient: LinearGradient (
            ranglar: const [
              Colors.red,
              Ranglar.blue,
            ],
          ),
        ),
      ),
    ),
  ),
);

Materiallar

Kesilgan burchaklar bilan chegara

Iskala (
  appBar: AppBar (sarlavha: Matn ('shakli: BeveledRectangleBorder')),
  tanasi: Markaz (
    bola: Material (
      shakli: const BeveledRectangleBorder (
        borderRadius: BorderRadius.all (Radius doirasi (20)),
        yon: BorderSide (rang: Colors.black, kenglik: 4),
      ),
      rang: Colors.yellow,
      bola: konteyner (
        balandligi: 200,
        kengligi: 200,
      ),
    ),
  ),
);

Slivers

SliverFillRemaining

Tarkibingizda etarli joy bo'lmasa ham, ushbu vidjet o'rnini bosa olmaydi. Interfaol misol

Vertikal bo'sh joy etarli
Iskala (
  appBar: AppBar (sarlavha: Matn ('SliverFillRemaining')),
  tanasi: CustomScrollView (
    qaymoq: [
      SliverFillRemaining (
        hasScrollBody: yolg'on,
        bola: ustun (
          mainAxisAlignment: MainAxisAlignment.center,
          bolalar: const [
            FlutterLogo (hajmi: 200),
            Matn (
              'Bu markazga joylashtirilishi kerak bo'lgan eng uzun matn'
              "logotip bilan birga",
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ],
  ),
);

Agar markazlashtirilgan tarkib uchun etarli joy bo'lmasa, SliverFillRemaining aylantirilishi mumkin:

Vertikal joy yetarli emas

Agar u SliverFillRemaining bo'lmaganda edi, tarkib quyidagicha oshib ketardi:

SliverFillRemainingsiz joy yetarli emas

Qolgan bo'sh joyni to'ldirish

Tarkibni markazlashtirish uchun foydali bo'lishdan tashqari, SliverFillRemaining qolgan qismi uchun ko'rinishni bo'sh joyini to'ldiradi. Buning uchun ushbu vidjet CustomScrollView-ga joylashtirilishi kerak va oxirgi dasturchi bo'lishi kerak

Agar joy yetarli bo'lmasa, vidjet aylantirilishi mumkin:

Iskala (
  appBar: AppBar (sarlavha: Matn ('SliverFillRemaining')),
  tanasi: CustomScrollView (
    qaymoq: [
      SliverList (
        delegat: SliverChildListDelegate (const [
          ListTile (sarlavha: Matn ('Birinchi element')),
          ListTile (sarlavha: Matn ('Ikkinchi element')),
          ListTile (sarlavha: Matn ('Uchinchi element')),
          ListTile (sarlavha: Matn ('To'rtinchi element')),
        ]),
      ),
      SliverFillRemaining (
        hasScrollBody: yolg'on,
        bola: konteyner (
          rang: Colors.yellowAccent,
          bola: ustun (
            mainAxisAlignment: MainAxisAlignment.center,
            bolalar: const [
              FlutterLogo (hajmi: 200),
              Matn (
                'Bu markazga joylashtirilishi kerak bo'lgan eng uzun matn'
                "logotip bilan birga",
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

SizedBox

Bu eng oddiy, ammo eng foydali vidjetlardan biri

SizedBox ConstrainedBox sifatida

SizedBox shunga o'xshash tarzda ConstrainedBox-da ishlashi mumkin

SizedBox.expand (
  bola: karta (
    bola: Matn ('Salom Dunyo!'),
    rang: Colors.yellowAccent,
  ),
),

SizedBox to'ldiruvchi sifatida

Padding yoki margin qo'shish zarurati tug'ilsa, plagin yoki konteyner vidjetlarini tanlashingiz mumkin. Ammo ular Sizedbox-ni qo'shishdan ko'ra ko'proq og'zaki va kam o'qilishi mumkin

Ustun (
  bolalar:  [
    Belgi (Icons.star, hajmi: 50),
    const SizedBox (balandligi: 100),
    Belgi (Icons.star, hajmi: 50),
    Belgi (Icons.star, hajmi: 50),
  ],
),

SizedBox ko'rinmas ob'ekt sifatida

Ko'pincha siz boulga qarab vidjetni yashirish / ko'rsatishni xohlaysiz

Vidjetlarni yaratish (BuildContext konteksti) {
  bool isVisible = ...
  return Scaffold (
    appBar: AppBar (
      sarlavha: Matn ('isVisible = $ isVisible'),
    ),
    tana: ko'rinadigan
      ? Belgi (Icons.star, hajmi: 150)
      : const SizedBox (),
  );
}

SizedBox-da const konstruktori mavjud bo'lganligi sababli, const SizedBox () dan foydalanish haqiqatan ham arzon **.

** Bitta arzon echim - Opacity vidjetidan foydalanish va shaffoflikni 0.0 ga o'zgartirish. Ushbu echimning salbiy tomoni shundaki, berilgan vidjet faqat ko'rinmas, bo'sh joyni egallashi mumkin.

SafeArea

Turli xil platformalarda, Android-dagi Status Bar yoki iPhone X-dagi Notch kabi maxsus joylar mavjud bo'lib, biz ularni chizishdan saqlanishimiz mumkin.

Ushbu muammoning echimi SafeArea vidjetidir (masalan, SafeArea bilan).

Vidjetlarni yaratish (BuildContext konteksti) {
  Qaytish Material (
    rang: Colors.blue,
    bola: SafeArea (
      bola: SizedBox.expand (
        bola: karta (rang: Colors.yellowAccent),
      ),
    ),
  );
}

Agar sizda muhim bo'lgan savol bo'lsa va uni o'tkazib yuborishni istamasangiz, siz menga twitter orqali shaxsiy xabarni yuborishingiz mumkin.