Адаптивный конструктор одного виджета с помощью 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