🚀 Flutter Voronezh Meetup: Распространённые ошибки и их решения

🔧 На последнем митапе Flutter Voronezh разработчик Роман из Эстонии поделился опытом работы с Flutter и продемонстрировал, как решать типичные ошибки, которые возникают при разработке мобильных приложений.

Вот что было рассмотрено на воркшопе:

1️⃣ Паддинг и его влияние на отображение — Роман показал, как правильно настроить паддинг, чтобы карточки выглядели корректно и не нарушали интерфейс.

2️⃣ Эффект нажатия — Объяснил, как избежать проблем с отображением эффекта нажатия, переместив инквел внутрь карточки.

3️⃣ Проблемы со скроллингом — Были даны рекомендации по улучшению производительности при скроллинге списков, особенно на iOS.

4️⃣ Оптимизация шейн фрап — Как уменьшить лаги при работе с большими списками, а также альтернативные способы оптимизации.

5️⃣ Кастомный скролл-вью и профайлинг — Роман продемонстрировал, как использовать кастомные решения для лучшей производительности и рассказал, как профилировать приложение на реальном устройстве.

6️⃣ Работа с большими ассетами — Как решить проблемы с загрузкой и кэшированием изображений, чтобы избежать перегрузки памяти.

7️⃣ Проблемы с текстом и темами — Рекомендации по правильному отображению текста в разных темах и контрастности.

8️⃣ Использование анимированных иконок — Рассмотрены инструменты для создания анимаций, такие как Ravi, и их внедрение в приложение для улучшения UX.

9️⃣ Кэширование и его ограничения — Как управлять кэшированием изображений и данных, чтобы избежать проблем с производительностью.

🔍 Дополнительно: Роман поделился своими статьями и опытом работы с кэшированием изображений, оптимизацией интерфейсов и создания анимаций, которые можно применить в реальных проектах.

🗣 Присоединяйтесь к обсуждению: Заходите в видео и задавайте вопросы, Роман будет рад помочь новичкам и опытным разработчикам!

🎥 Смотрите запись митапа: https://www.youtube.com/live/J92zxoULBwc

#Flutter #FlutterPulse #Разработка #Программирование #Ошибки #Митап #Оптимизация #Продуктивность #TechTalk #Voronezh #UX #UI #Анимации #Кэширование #Советы #FlutterDev #CodingLife

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