🚀 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

Делегирование дизайна виджета с помощью Фабрик
Delegate widget design with Factories

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

Когда это полезно?
Вы создаете выбираемый список элементов. Вы можете создать фабрику радиокнопок или чекбоксов.

Пример реализации:

1. Определите абстрактный класс фабрики, например, SelectableFactory:

abstract class SelectableFactory {
  const SelectableFactory();

  @factory
  Widget create({
    final String title,
    final bool selected
  });
}

2. Создайте конкретные реализации фабрики, такие как SelectableRadioFactory:

class _SelectableRadioFactory extends SelectableFactory {
  @override
  Widget create({
    final String title,
    final bool selected
  }) {
    // Создайте ваш виджет здесь
    return ListTile(...);
  }
}

3. Определите статические экземпляры фабрик для дальнейшего использования:

abstract class SelectableFactory {
  static const SelectableFactory radio = _SelectableRadioFactory();
  static const SelectableFactory checkbox = _SelectableCheckBoxFactory();
  ...
}

4. Используйте фабрику для построения части вашего виджета:

AnchoredHelper(
  title: const Text(
    'Нажми чтобы увеличить',
    textAlign: TextAlign.center,
    style: TextStyle(
      color: Colors.white,
      fontSize: 32,
    ),
  ),
  widgetFactory: AnchoredCircleHoleHelper.anchorFactory,
);

Это позволяет создавать готовые функции построения. Разработчики могут создавать свои собственные фабрики, а также использовать предустановленные.

Оцените новую рубрику и напишите своё мнение! 🤔💬

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

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #WidgetDesign #Factories #Refactoring #CodingTips #UI/UX