Обзор пакетов для Flutter: media_query_preview 📊

1. Device Preview 📱
Пакет для эмуляции работы приложения на разных устройствах! Позволяет предварительно просмотреть приложение на любом устройстве, изменить ориентацию устройства и динамически настроить конфигурацию системы.
👍 Лайки: 4.02К, 📥 Скачиваний: 153К
Последнее обновление 📅: 10 месяцев назад
https://pub.dev/packages/device_preview

2. Screenshot 📸
Пакет для Flutter, позволяющий легко делать скриншоты виджетов! Захватывает виджеты как изображения, даже если они не отображаются на экране.
👍 Лайки: 1.47К, 📥 Скачиваний: 449К
Последнее обновление 📅: 10 месяцев назад
https://pub.dev/packages/screenshot

3. Device Frame 📺
Пакет для создания мокапов для различных устройств, включая смартфоны, планшеты и компьютеры! Позволяет протестировать свой интерфейс на разных экранах и устройствах.
👍 Лайки: 152, 📥 Скачиваний: 488К
Последнее обновление 📅: 10 месяцев назад
https://pub.dev/packages/device_frame

4. Davinci 📸
Преобразуйте любой виджет в изображение и сохраните его локально или поделитесь им в приложениях и чатах! Поддерживает Android, iOS и Web.
👍 Лайки: 179, 📥 Скачиваний: 684
Последнее обновление 📅: 6 месяцев назад
https://pub.dev/packages/davinci

5. Screen Protector 🛡
Пакет для защиты данных в ваших мобильных приложениях! Предотвращает утечку данных через скриншоты и запись экрана на Android и iOS.
👍 Лайки: 262, 📥 Скачиваний: 12.1К
Последнее обновление 📅: 7 месяцев назад
https://pub.dev/packages/screen_protector

6. Widgets To Image 📸
Пакет для Flutter, позволяющий легко экспортировать ваши виджеты в изображения!
👍 Лайки: 180, 📥 Скачиваний: 16.7К
Последнее обновление 📅: 10 месяцев назад
https://pub.dev/packages/widgets_to_image

#device_preview #screenshot #device_frame #davinci #screen_protector #widgets_to_image #flutter #dart #pubdev #flutterpulse

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