Какие возможности адаптивности предоставляет Flutter для разработки приложений на десктопе?

Для адаптивного дизайна на десктопе Flutter предоставляет следующие возможности:

1. LayoutBuilder: Позволяет строить различные виджеты в зависимости от текущих размеров родительского виджета.

   // Пример LayoutBuilder
   LayoutBuilder(
     builder: (BuildContext context, BoxConstraints constraints) {
       if (constraints.maxWidth > 600) {
         return Center(child: Text('Большой экран'));
       } else {
         return Center(child: Text('Маленький экран'));
       }
     },
   )
   

2. MediaQuery: Предоставляет доступ к информации о размере экрана и ориентации устройства для создания адаптивных макетов.

   // Пример MediaQuery
   double screenWidth = MediaQuery.of(context).size.width;
   if (screenWidth > 800) {
     // Макет для широкого экрана
   } else {
     // Макет для узкого экрана
   }
   

3. Виджеты для адаптивного макета: 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')));
     }),
   )
   

4. Flexibel и 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),
       ),
     ],
   )
   

5. Адаптивные компоненты Material Design: Виджеты Material Design во Flutter часто имеют встроенную адаптивность для различных форм-факторов.

   // Пример 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('Контент')),
   )
   

6. Breakpoints: Определение точек останова (breakpoints) для переключения между различными макетами на основе ширины экрана. Это часто реализуется с использованием MediaQuery или LayoutBuilder.

   // Пример использования breakpoints
   if (MediaQuery.of(context).size.width < 600) {
     // Мобильный макет
   } else if (MediaQuery.of(context).size.width < 1200) {
     // Планшетный макет
   } else {
     // Десктопный макет
   }
   

7. Настройка поведения скроллинга: Возможность настраивать поведение скроллинга для десктопа (например, поддержка колеса мыши).

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

   Применение:

   // Применение к ListView
   ScrollConfiguration(
     behavior: MyCustomScrollBehavior(),
     child: ListView(...),
   )
   

Эти возможности позволяют создавать единую кодовую базу для десктопных приложений, которая адаптируется к различным размерам окон и устройствам.