В этой статье мы используем Flutter для реализации отзывчивости, если вы не знаете, что такое Flutter.

Flutter — это пакет разработки программного обеспечения пользовательского интерфейса с открытым исходным кодом, созданный Google, который превосходно подходит для создания красивых, высококачественных приложений благодаря единой базе кода для iOS и Android, настраиваемым виджетам, быстрой разработке с горячей перезагрузкой и надежной поддержке сообщества.

Существует два основных подхода к созданию приложений Flutter с адаптивным дизайном:

Использование класса LayoutBuilder

Конструктор макетов полностью зависит от пользовательских определений, пользователь должен решить логику, когда обновлять пользовательский интерфейс. Простым примером является отображение панели навигации в сжатом или увеличенном виде.

Логика будет реализована в Scaffold конкретного виджета.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },
      ),
    );
  }

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

Использование класса MediaQuery.

MediaQuery создает поддерево, в котором медиа-запросы выполняют операции изменения размера в соответствии с текущими размерами экрана.

Например, чтобы узнать размер текущего носителя (например, окна, содержащего ваше приложение), вы можете использовать MediaQuery.sizeOf(context). Это поможет компоненту перестроиться при изменении размера экрана.

// Child component
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    final double width = screenSize.width * 0.8;
    final double height = screenSize.height * 0.5;

    return Container(
      width: width,
      height: height,
      color: Colors.blue,
      child: Center(
        child: Text(
          'My Widget',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

//Parent component

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

Если в области действия нет MediaQuery, то ряд методов, таких как MediaQuery.of и MediaQuery.sizeOf, выдаст исключение. В качестве альтернативы можно использовать методы варианта может быть- (такие как MediaQuery.maybeOf и MediaQuery.maybeSizeOf), которые возвращают значение null вместо выдачи, если в области действия нет MediaQuery.

Я надеюсь, что эта статья оказалась для вас полезной и вы смогли узнать хотя бы на 1 % больше об отзывчивости. Я очень признателен, если у вас есть какие-либо вопросы, пожалуйста, используйте раздел комментариев, чтобы получить их разъяснения.