Flutter десктоп колдонмолорду иштеп чыгууда кандай…

Десктоп үчүн адаптивдүү дизайн үчүн Flutter төмөнкү мүмкүнчүлүктөрдү сунуштайт:

LayoutBuilder: Ата-энендин учурдагы өлчөмдөрүнө жараша ар кандай виджеттерди курууга мүмкүндүк берет.

// LayoutBuilder мисалы
LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) {
      return Center(child: Text('Үлкен экран'));
    } else {
      return Center(child: Text('Кичинекей экран'));
    }
  },
)

MediaQuery: Экрандын өлчөмү жана түзмөктүн багыты жөнүндө маалыматка жетүү үчүн колдонулат.

// MediaQuery мисалы
double screenWidth = MediaQuery.of(context).size.width;
if (screenWidth > 800) {
  // Кең экран үчүн макет
} else {
  // Тесик экран үчүн макет
}

Адаптивдүү макет үчүн виджеттер: Flutter ар түрдүү адаптивдүү виджеттерди сунуштайт, мисалы ListView, GridView, CustomScrollView, ExpansionTile жана башка.

// Адаптивдүү орнотуулары бар GridView мисалы
GridView.count(
  crossAxisCount: (MediaQuery.of(context).size.width / 150).floor(),
  children: List.generate(20, (index) {
    return Card(child: Center(child: Text('Item $index')));
  }),
)

Flexible жана Expanded: Row жана Column ичинде адаптивдүү макет түзүү үчүн колдонулат, виджеттерге жеткиликтүү кеңдикти пропорционалдуу же так өлчөмдө алууга мүмкүндүк берет.

// Flexible жана Expanded мисалы
Row(
  children: <Widget>[
    Expanded(
      flex: 2, // 2/3 орун алат
      child: Container(color: Colors.red),
    ),
    Flexible(
      flex: 1, // 1/3 орун алат (азырынча minWidth менен)
      child: Container(color: Colors.blue),
    ),
  ],
)

Material Design адаптивдүү компоненттери: Flutterдеги Material Design виджеттери көбүнесе ар кандай форма-факторлорго ылайыкташкан.

// Навигация үчүн Drawer мисалы
Scaffold(
  appBar: AppBar(title: Text('Кушымта')),
  drawer: Drawer(
    child: ListView(
      children: const <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Меню'),
        ),
        ListTile(
          title: Text('Тизмек 1'),
        ),
      ],
    ),
  ),
  body: Center(child: Text('Мазмун')),
)

Breakpoints: Экрандын кеңдигине жараша макеттерди которуу үчүн бөлүү чекиттерин аныктоо. Бул көбүнесе MediaQuery же LayoutBuilder колдонуу менен ишке ашырылат.

// Breakpoints колдонуу мисалы
if (MediaQuery.of(context).size.width < 600) {
  // Мобилдик макет
} else if (MediaQuery.of(context).size.width < 1200) {
  // Планшеттик макет
} else {
  // Десктоп макет
}

ScrollBehaviour настройкасы: Десктоп үчүн скроллинг жүрүм-турумун конфигурациялоо мүмкүнчүлүгү (мисалы, мышь дөңгөлөгүнүн колдоосу).

// ScrollBehavior настройкасынын мисалы
class MyCustomScrollBehavior extends ScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
  };
}

Колдонуу:

// ListView үчүн колдонуу
ScrollConfiguration(
  behavior: MyCustomScrollBehavior(),
  child: ListView(...),
)

Бул мүмкүнчүлүктөр дестопту колдонмолор үчүн бирдиктүү код базасын түзүүгө мүмкүндүк берет, ал терезе өлчөмдөрүнө жана түзмөктөргө ылайыкташтырылган.

Flutter десктоп колдонмолорду иштеп чыгууда кандай адаптация мүмкүнчүлүктөрүн сунуштайт?