Рубрика: Flutter

Flutter 3.27 — важное обновление фреймворка в конце 2024 года. Команда Google сделала акцент на производительности и веб-разработке. Рассмотрим ключевые изменения.

Impeller renderer по умолчанию

Самое важное изменение — Impeller теперь включён по умолчанию для iOS и macOS.

Что это значит?

Impeller — это новый рендер-движок, который заменяет Skia. Он решает проблему джанков (микро-лагов) при анимации.

Раньше Skia компилировала шейдеры во время первой анимации, что вызывало пропуски кадров. Impeller использует предкомпилированные шейдеры и работает напрямую через GPU (Metal, Vulkan, OpenGL).

Результат: стабильные 60 FPS даже на средних устройствах.

WebAssembly поддержка

Flutter 3.27 делает большой шаг в направлении WebAssembly. Ветка wasmGC теперь merged в main.

Что это даёт?

Раньше Flutter Web компилировался в JavaScript: — Медленная загрузка (~2-5 MB) — Долгий запуск

С WebAssembly: — Быстрая загрузка (~500 KB) — Мгновенный запуск — Производительность близка к нативной

Как включить:

flutter build web --wasm
flutter run -d chrome --wasm

Новые виджеты

SelectionArea — улучшенная работа с выделением текста:

SelectionArea(
  child: Column(
    children: [
      Text('Строка 1'),
      Text('Строка 2'),
      Text('Строка 3'),
    ],
  ),
)

Теперь можно выделить любой текст внутри контейнера, не оборачивая каждый в SelectableText.

Material 3 — полная поддержка Material Design 3:

MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
    ),
  ),
  home: MyApp(),
)

Улучшения производительности

Оптимизация ListView

ListView.builder теперь автоматически кеширует виджеты. Это значит на 30% меньше памяти для больших списков.

Lazy Image

Изображения загружаются более эффективно:

Image.network(
  'https://example.com/image.jpg',
  gaplessPlayback: false,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
)

Улучшенный GC

Потребление памяти снижено на 20% для типичных приложений.

Улучшения в инструментах

DevTools 2.30

• New Performance Page — детальный профайлинг
• Network Profiler — отслеживание запросов
• Memory Profiler — поиск утечек памяти
• Enhanced Logging — фильтрация логов

Flutter Fix

Автоматическое исправление устаревшего API:

flutter fix --apply

Breaking Changes

Удалены deprecated виджеты:

// ❌ Больше не работает
RaisedButton(...)
FlatButton(...)
OutlineButton(...)

#### ✅ Используйте
ElevatedButton(...)
TextButton(...)
OutlinedButton(...)

Миграция на Flutter 3.27

Шаг 1: Обновите pubspec.yaml

environment:
  sdk: '>=3.4.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

Шаг 2: Обновите зависимости

flutter pub get
flutter pub upgrade --major-versions

Шаг 3: Примените исправления

flutter fix --apply

Шаг 4: Протестируйте

flutter test

Советы по обновлению

1. Проверьте совместимость пакетов

Некоторые сторонние пакеты могут быть несовместимы. Проверьте pub.dev для обновлений.

2. Тестируйте на старых устройствах

Особенно iOS 12+ для Impeller.

3. Проверьте кастомные шейдеры

Если используете кастомные шейдеры, они могут потребовать адаптации.

Заключение

Flutter 3.27 — важный этап развития фреймворка:

• Impeller по умолчанию = плавные анимации
• WebAssembly = быстрые веб-приложения
• Новые виджеты = лучший UX
• Оптимизации = выше производительность

Когда обновляться?

• Новые проекты — сразу используйте 3.27
• Существующие проекты — планируйте миграцию в 2025 году
• Критические проекты — тестируйте тщательно

Риски:

• Некоторые сторонние пакеты могут быть несовместимы
• WebAssembly ещё experimental
• Требуется Android NDK 25+

Обновляйтесь постепенно. Начните с нового проекта, протестируйте, затем мигрируйте существующие приложения.

1. Dart: Язык программирования Dart является основой для разработки на Flutter. Хороший разработчик на Flutter должен знать основные концепции Dart, такие как типы данных, функции, классы, наследование, миксины, асинхронное программирование, потоки и исключения.
2. Widget: Flutter является библиотекой для создания пользовательского интерфейса, и все визуальные элементы в Flutter являются виджетами (Widgets). Хороший разработчик должен знать основные типы виджетов и как их использовать, а также уметь создавать свои собственные виджеты.
3. State Management: Управление состоянием является одним из наиболее сложных аспектов разработки приложений на Flutter. Хороший разработчик должен знать различные подходы к управлению состоянием, такие как setState(), BLoC, Provider, MobX, Redux, Riverpod и GetX.
4. Архитектура: Хороший разработчик должен иметь хорошие знания общей архитектуры приложения, которую он создает. В Flutter существует много архитектурных паттернов, таких как MVP, MVVM, Clean Architecture, и разработчик должен уметь выбрать наиболее подходящую для конкретной задачи.
5. Верстка: Хороший разработчик должен иметь хорошие навыки верстки пользовательского интерфейса с помощью Flutter. Это включает в себя знание различных виджетов, макетов, анимаций, градиентов, теней, текстур и пр.
6. Animations: Flutter предоставляет широкий спектр инструментов для создания анимации. Хороший разработчик должен знать, как создавать анимации с помощью Tween, AnimatedBuilder, AnimatedContainer, Hero, Flare и других инструментов.
7. Networking: Большинство приложений взаимодействуют с сервером, поэтому хороший разработчик должен знать, как работать с сетью. Flutter предоставляет инструменты для работы с HTTP-запросами, WebSockets, GraphQL и другими протоколами.
8. Storage: Хороший разработчик должен знать, как хранить данные на устройстве. Flutter предоставляет инструменты для работы с файловой системой

ProxyProvider — это виджет-провайдер из пакета Flutter provider, который позволяет создавать и обновлять объекты и данные, которые используются в приложении.

ProxyProvider предназначен для создания и предоставления новых объектов и данных на основе уже существующих объектов или данных, которые были предоставлены другими провайдерами. Это может быть полезно, когда вы хотите использовать данные из одного провайдера для создания или обновления другого объекта или данных в приложении.

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

Другой пример использования ProxyProvider — это кэширование данных. Вы можете создать провайдер, который получает данные из удаленного источника и кэширует их. Затем вы можете использовать ProxyProvider для создания других провайдеров, которые будут использовать кэшированные данные, вместо того, чтобы получать их снова из удаленного источника.

В целом, ProxyProvider предназначен для упрощения управления состоянием приложения и создания более эффективного и гибкого кода.

ProxyProvider пример работы

Конкретный пример использования ProxyProvider в Flutter может выглядеть так:

Предположим, у нас есть провайдер UserProvider, который предоставляет информацию о текущем пользователе, и мы хотим создать провайдер TaskProvider, который предоставляет список задач пользователя.

Мы можем использовать ProxyProvider, чтобы создать TaskProvider на основе UserProvider. Ниже приведен пример кода:

class UserProvider extends ChangeNotifier {
  String _username = 'John Doe';
  List<String> _tasks = ['Task 1', 'Task 2', 'Task 3'];

  String get username => _username;
  List<String> get tasks => _tasks;

  void addTask(String task) {
    _tasks.add(task);
    notifyListeners();
  }
}

class TaskProvider extends ChangeNotifier {
  List<String> _tasks;

  List<String> get tasks => _tasks;

  void updateTasks(List<String> newTasks) {
    _tasks = newTasks;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
        ProxyProvider<UserProvider, TaskProvider>(
          create: (_) => TaskProvider(),
          update: (_, userProvider, taskProvider) {
            taskProvider.updateTasks(userProvider.tasks);
            return taskProvider;
          },
        ),
      ],
      child: MaterialApp(
        title: 'My App',
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<TaskProvider>(
      builder: (context, taskProvider, _) {
        return ListView.builder(
          itemCount: taskProvider.tasks.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(taskProvider.tasks[index]),
            );
          },
        );
      },
    );
  }
}

При запуске приложения, Flutter создаст экземпляр UserProvider и TaskProvider и передаст их в MultiProvider. Затем Flutter создаст виджеты, которые используют эти провайдеры и вставит их в дерево виджетов приложения.

В MyHomePage мы используем Consumer<TaskProvider>, чтобы получить доступ к TaskProvider. Внутри Consumer, мы создаем виджет ListView.builder, который отображает список задач пользователя. Когда UserProvider обновляет список задач, он автоматически вызывает метод notifyListeners(), который уведомляет ProxyProvider, что нужно обновить TaskProvider. ProxyProvider вызывает функцию update, которая обновляет список задач в TaskProvider, и затем уведомляет все слушатели TaskProvider, что данные были обновлены.

В итоге, мы можем использовать ProxyProvider для создания и обновления объектов и данных, которые используются в приложении. Это позволяет нам управлять состоянием приложения более эффективно и гибко.

Существует несколько основных правил логирования кода мобильного приложения:

• Определите цель и формат логирования: перед началом разработки приложения определите, какие данные необходимо логировать, какой формат логов использовать и какие уровни логирования использовать.
• Используйте уровни логирования: уровни логирования помогают отделить критические сообщения от информационных. Например, можно использовать уровни Fatal, Error, Warning, Info, Debug, Trace.
• Используйте правильные сообщения логирования: сообщения логирования должны быть понятными и содержать информацию о происходящем событии. Например, сообщение может содержать информацию об ошибке, идентификатор устройства, дату и время, когда произошла ошибка.
• Логируйте все события: не ограничивайтесь логированием только ошибок. Логируйте все события, которые могут помочь вам отслеживать работу приложения и выявлять проблемы.
• Логируйте в циклах жизни приложения: логируйте события, происходящие в разных циклах жизни приложения, таких как onCreate, onResume, onPause и т.д. Это поможет вам понять, как работает приложение и какие проблемы могут возникнуть.
• Ограничьте количество логов: логирование может занимать много места в памяти, поэтому ограничьте количество логов. Например, можно ограничить количество логов, которые сохраняются на устройстве.
• Обрабатывайте ошибки логирования: не забывайте обрабатывать ошибки, связанные с логированием. Например, если не удалось сохранить логи, необходимо сообщить об этом пользователю и попробовать сохранить логи позже.
• Тестируйте логирование: перед выпуском приложения тщательно протестируйте логирование, чтобы убедиться, что оно работает корректно и не занимает слишком много места в памяти.
• Следите за конфиденциальностью данных: убедитесь, что логи не содержат конфиденциальных данных пользователей, таких как пароли, логины или номера кредитных карт.

Пакеты для ведения логов

Существует множество пакетов логирования для Dart, ниже я перечислю несколько из них:

1. logger — это простой и легковесный пакет логирования, который позволяет выводить логи с разными уровнями. В logger есть поддержка форматирования логов, а также возможность отправки логов на различные источники, такие как файлы или серверы.
2. logging — это официальный пакет логирования Dart, который позволяет выводить логи с разными уровнями и категориями. logging предоставляет широкие возможности для настройки логирования, такие как форматирование логов, фильтрация по уровню и категории и отправка логов на различные источники.
3. flutter_logger — это пакет логирования, который специально разработан для использования с фреймворком Flutter. Он предоставляет удобный API для вывода логов с различными уровнями, а также поддерживает настройку логирования в зависимости от текущего режима приложения (например, разработка или релиз).
4. log4dart — это пакет логирования, основанный на Apache Log4j, который предоставляет мощные возможности для настройки логирования, такие как настраиваемые уровни логирования, категории и аппендеры (используемые для вывода логов на различные источники).
5. pretty_logging — это пакет логирования, который предоставляет удобный API для вывода красивых и читаемых логов. Он предоставляет возможности для настройки формата логов, фильтрации по уровню и категории и отправки логов на различные источники.
6. simple_logger — это еще один простой и легковесный пакет логирования, который позволяет выводить логи с разными уровнями. Он предоставляет настраиваемый формат вывода логов, фильтрацию по уровню и отправку логов на различные источники.
7. stack_trace — это пакет, который предоставляет удобный API для создания и обработки стека вызовов. Он может быть полезен при отладке приложений, так как позволяет выводить информацию о том, как происходит вызов функций в коде.

Каждый из этих пакетов имеет свои преимущества и недостатки, поэтому при выборе пакета логирования для Dart следует оценить свои потребности и выбрать наиболее подходящий пакет. Например, если вам нужно простое и легковесное решение, то можете использовать logger или simple_logger. Если же вам нужны более мощные возможности, то можете обратить внимание на log4dart или logging. Если вы разрабатываете приложение на Flutter, то flutter_logger может быть хорошим выбором.

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

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

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