Адаптивный конструктор одного виджета с помощью DeviceSizeBuilder

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

@override
Widget build(BuildContext context) {
  return DeviceSizeBuilder(
    builder: (device) => Column(
      children: [
        switch (device) {
          DeviceType.small => const Spacer(),
          // игнорируем остальные случаи
        },
        ElevatedButton(
          onTap: () {},
          child: Text('tap me'),
        ),
      ],
    ),
  );
}

Чтобы иметь доступ к методу didChangeMetrics, нам нужно использовать WidgetsBinding:

class DeviceSizeBuilder extends StatefulWidget {
  const DeviceSizeBuilder({
    super.key,
    required this.builder,
  });

  @override
  State<DeviceSizeBuilder> createState() => _DeviceSizeBuilderState();
}

class _DeviceSizeBuilderState extends State<DeviceSizeBuilder> with WidgetsBindingObserver {
  late DeviceType _lastSize;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _lastSize = widget.builder;
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    final newSize = DeviceType.fromWidth(viewportWidth);
    if (_lastSize != newSize) {
      setState(() {});
    }
  }

  double get viewportWidth => MediaQuery.of(context).size.width;

  @override
  Widget build(BuildContext context) {
    _lastSize = DeviceType.fromWidth(viewportWidth);
    return widget.builder(_lastSize);
  }
}

Мы хотим перестроить дочерний элемент только при изменении типа устройства.
Наши точки останова:

enum DeviceType {
  small(0),
  medium(600),
  large(1024),
  Xlarge(2200);

  final double breakpoint;

  const DeviceType(this.breakpoint);

  static DeviceType fromWidth(double width) {
    return switch (width) {
      < 600 => DeviceType.small,
      < 1024 => DeviceType.medium,
      < 2200 => DeviceType.large,
      _ => DeviceType.Xlarge,
    };
  }
}

Оцените новую рубрику и напишите нам о своих впечатлениях! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #ResponsiveDesign #UI #UX #Widgets #CodingTips

🚫 Перестаньте использовать MediaQuery для адаптивности в Flutter
В 2025 году пора пересмотреть подход к созданию адаптивных интерфейсов во Flutter! Если вы всё ещё используете MediaQuery для responsive design, то пришло время изменить свой подход.

В статье рассматривается, почему использование MediaQuery для адаптивности является устаревшим и неэффективным подходом, особенно при разработке для различных устройств, таких как мобильные телефоны, веб, планшеты и складные устройства. Вы узнаете о новых инструментах и приёмах, которые предлагает Flutter для создания по-настоящему адаптивных интерфейсов.

В частности, в статье обсуждаются такие темы, как:
- Почему дробное масштабирование (fractional sizing) не подходит для создания адаптивных интерфейсов.
- Как использовать LayoutBuilder для создания адаптивных интерфейсов, основанных на доступном пространстве.
- Как использовать встроенные точки останова (breakpoints) во Flutter и пакеты, такие как flutter_responsive_framework.
- Как создавать адаптивные интерфейсы, которые не только масштабируются, но и меняют свою структуру в зависимости от устройства.

Читайте полную статью по ссылкам ниже:
🇷🇺Читать на русском языке
🇬🇧Читать на английском языке
🌐Оригинал

Все подобные новости ищите по хэштегу #FlutterPulseMedium ✨ Оцените новую рубрику!

FlutterPulse — канал о мире Flutter!

#flutter #dart #flutterpulse #FlutterPulseMedium #responsiveDesign #adaptiveUI #mobileDevelopment #webDevelopment #FlutterDev #programmingTips