Flutter kompyuter ilovalari ishlab chiqishda qanday…

Desktop uchun moslashuvchan dizayn uchun Flutter quyidagi imkoniyatlarni taqdim etadi:

LayoutBuilder: Ota widgetning hozirgi o'lchamlariga bog'liq holda turli widgetlarni qurishga imkon beradi.

// LayoutBuilder misoli
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Katta ekran'));
    } else {
      return Center(child: Text('Kichik ekran'));
    }
  },
)

MediaQuery: Ekran o'lchami va qurilma orientatsiyasi haqida ma'lumot olish uchun imkon beradi, shuningdek, moslashuvchan maketlar yaratish uchun.

// MediaQuery misoli
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Keng ekran uchun maket
} else {
  // Tor ekran uchun maket
}

Moslashuvchan maket uchun widgetlar: Flutter ListView, GridView, CustomScrollView, ExpansionTile kabi o'z tabiatida moslashuvchan widgetlarni taklif qiladi.

// Moslashuvchan GridView misoli
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible va Expanded: Row va Column ichida moslashuvchan maketlar yaratish uchun ishlatiladi, bu widgetlar mavjud bo'sh joyni nisbatan yoki statik o'lchamlarda egallash imkonini beradi.

// Flexible va Expanded misoli
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // 2/3 mavjud bo'sh joyni egallaydi
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // 1/3 mavjud bo'sh joyni egallaydi (lekin minimal minWidth bilan)
      child: Container(color: Colors.blue),
    ),
  ],
)

Material Design uchun moslashuvchan komponentlar: Flutter'dagi Material Design widgetlari ko'pincha turli formatlarga moslashuvchanlikni o'z ichiga oladi.

// Navigatsiya uchun Drawer misoli
Scaffold(
  appBar: AppBar(title: Text('Ilova')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Item 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Kontent')),
)

Breakpoints: Ekran kengligi asosida turli maketlar o'rtasida o'tishni belgilash uchun, odatda MediaQuery yoki LayoutBuilder yordamida amalga oshiriladi.

// Breakpointsdan foydalanish misoli
if (MediaQuery.of(context).size.width < 600) {
  // Mobil maket
} else if (MediaQuery.of(context).size.width < 1200) {
  // Planshet maketi
} else {
  // Desktop maketi
}

Skroll qilish xulqini sozlash: Desktop uchun skroll qilish xulqini sozlash imkonini beradi (masalan, sichqoncha g'ildiragini qo'llab-quvvatlash).

// ScrollBehavior ni sozlash misoli
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Qo'llash:

// ListView ga qo'llash
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Ushbu imkoniyatlar, turli oyna o'lchamlari va qurilmalarga mos keladigan yagona kod bazasini yaratishga imkon beradi.

Flutter kompyuter ilovalari ishlab chiqishda qanday moslashuvchanlik imkoniyatlarini taqdim etadi?