Flutter masaüstü tətbiqlərinin inkişafı üçün hansı…

Dizaynın adaptiv olması üçün Flutter aşağıdakı imkanları təqdim edir:

LayoutBuilder: Valideyn widget-inin cari ölçülərinə əsasən müxtəlif widget-lər qurmağa imkan verir.

// LayoutBuilder nümunəsi
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Böyük ekran'));
    } else {
      return Center(child: Text('Kiçik ekran'));
    }
  },
)

MediaQuery: Ekran ölçüsü və cihazın istiqaməti haqqında məlumatlara çıxış imkanı verir və adaptiv layoutların yaradılmasına kömək edir.

// MediaQuery nümunəsi
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Geniş ekran üçün layout
} else {
  // Dar ekran üçün layout
}

Adaptiv layout widgetləri: Flutter-də ListView, GridView, CustomScrollView, ExpansionTile və s. kimi təbii olaraq adaptiv olan widgetlər mövcuddur.

// Adaptiv tənzimləmələrlə GridView nümunəsi
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible və Expanded: Row və Column daxilində adaptiv layoutlar yaratmaq üçün istifadə olunur və widgetlərin mövcud sahəni nisbət və ya sabit ölçülərlə tutmasına imkan verir.

// Flexible və Expanded nümunəsi
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // Mövcud sahənin 2/3-ünü tutur
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // Mövcud sahənin 1/3-ünü tutur (minimum minWidth-ə qədər)
      child: Container(color: Colors.blue),
    ),
  ],
)

Material Design adaptiv komponentləri: Flutter-də Material Design widgetləri müxtəlif form-faktorlar üçün daxili adaptivlik xüsusiyyətlərinə malikdir.

// Naviqasiya üçün Drawer nümunəsi
Scaffold(
  appBar: AppBar(title: Text('Tətbiq')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Menu'),
        ),
        ListTile(
          title: Text('Maddə 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Məzmun')),
)

Breakpoints: Ekran genişliyinə əsasən müxtəlif layout-lar arasında keçid üçün breakpoints təyin etmək. Bu çox vaxt MediaQuery və ya LayoutBuilder istifadə edilərək həyata keçirilir.

// Breakpoints istifadə nümunəsi
if (MediaQuery.of(context).size.width < 600) {
  // Mobil layout
} else if (MediaQuery.of(context).size.width < 1200) {
  // Planşet layout
} else {
  // Desktop layout
}

Scroll davranışını tənzimləmək: Desktop üçün scroll davranışını tənzimləmək imkanı (məsələn, siçan tekerleyi dəstəyi).

// ScrollBehavior tənzimləməsi nümunəsi
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Tətbiq:

// ListView-ə tətbiq
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Bu imkanlar desktop tətbiqlər üçün tək bir kod bazası yaradılmasına imkan verir və pəncərə və cihaz ölçülərinə uyğunlaşır.

Flutter masaüstü tətbiqlərinin inkişafı üçün hansı uyğunlaşma imkanlarını təqdim edir?