На большом экране

Июльский дайджест мы посвятили Flutter-разработке под Apple TV, когнитивным искажениям и прибытию Material 3 в фреймворк. Приятного чтения. 

Flutter для Apple TV

Apple TV всегда стояла особняком в экосистеме калифорнийского гиганта. Кажется, что это всего лишь удобный способ доступа к контенту, размещённому в iTunes. Присмотревшись внимательнее на актуальную модель Apple TV 4K, мы увидим мощный ARM-процессор A15 Bionic, созданный в 2021 году по 5 нм техпроцессу. Внутри кристалла находятся 6 ядер, правда одно из них отключено. Тем не менее, оставшийся мощности с лихвой хватает на воспроизведение высококачественного контента.

Де-факто это персональный компьютер с мощным процессором, скоростными сетевыми интерфейсами и выводом изображения на внешний дисплей или телевизор. Работает он под управлением tvOS, модифицированной версии iOS. Есть свой магазин приложений — тот же AppStore, но внутри только те приложения, которые были адаптированы под особенности Apple TV.

Увы, не каждый Flutter-разработчик задумывается над тем, что его приложение прекрасно бы смотрелось на большом экране. Ну а общедоступной информации про Flutter-разработку для встраиваемых систем не так много. Главная проблема в том, что движок Flutter не поддерживает «tvos» в качестве цели для компилятора. Ну а приложения, скомпилированные с целью «ios» на Apple TV не заработают.  Получается замкнутый круг, разорвать который можно с помощью flutter-tvos-demo. Авторы проекта видоизменили движок Flutter таким образом, чтобы при выборе цели «ios» происходила компиляция цели «tvos».

Особенность Apple TV ещё и в устройстве ввода. Если пульт для Android TV, с точки зрения Flutter, представляет собой клавиатуру и поддерживается по-умолчанию, то пульт Apple TV — совершенно другое дело. Это тачпад, а значит придётся поддерживать не только тапы, но и свайпы. Благо, кастомный движок это умеет.

Ограничений, правда, тоже много. Поскольку в tvOS нет вообще никакого веб-браузера, соответствующие API отключены. Некоторые модули, завязанные на веб-просмотр, откажутся компилироваться. Также стоит забыть про дебаг, виртуальную клавиатуру и виджеты Apple. Плюс придётся потратить время на настройку среды разработки. Стоит ли игра свеч? Если вы не делаете приложение-киносервис, то вопрос спорный. Но запустить своё приложение на экране телевизора — прекрасный способ развлечься и удивить коллег.

Особенности setState()

Разработчики подвержены когнитивным искажениям ничуть не меньше, чем все остальные. Расскажем, что бывает, когда программист слишком уверен в своих знаниях. Возьмём к примеру метод setState() из небольшого примера:

class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter = _counter + 1;
    });
  }

   @override
  Widget build(BuildContext context) {
    return Text("The current value is $_counter!");
  }
}

Может показаться, что это работает следующим образом. Есть stateful-поле _counter и виджет Text, который отображает значение _counter. Если мы хотим обновить значение _counter, то его надо обернуть в анонимную функцию, а уже её передать в setState(). Иначе фреймворку ни за что не догадаться, что у _counter новое значение.

Также думал и эстонский разработчик Лиро Кранка (Liro Krankka), пока спустя 4 месяца погружения во Flutter не узнал, что это была лишь его выдумка. Реальность выглядела иначе. Чтобы обновить значение _counter надо действительно вызвать setState(), но делать это через анонимную функцию вовсе не обязательно. Фактически этот фрагмент кода:

setState(() {
  _counter = _counter + 1;
});

полностью идентичен вот такому:

_counter = _counter + 1;
setState(() {});

Flutter не выполняет никаких дополнительных сравнений, видя код, обёрнутый в анонимную функцию. Это исключительно ошибка мышления. Так что когда вы в очередной раз будете писать какой-либо код, попробуйте вспомнить об этом случае. Ну а если хочется узнать почему это работает именно так, загляните в статью Flutter's setState() might not be what you think it is на английском языке. Её можно найти и на русском языке, отличный перевод недавно появился на Хабре.

useMaterial3: true by default

В одном из прошлых дайджестов мы уже рассказывали про новый унифицированный язык дизайна Material 3. Процесс перехода со второй версии завершён и в следующем релизе Flutter он будет работать по-умолчанию. Флаг useMaterial3 после этого будет объявлен deprecated. Пока для включения Material 3 нужно это прямо указывать в ThemeData:

 return MaterialApp(
    theme: ThemeData(useMaterial3: true),
    // ...
  );

Прекращение работы с Material 2 по-умолчанию не означает необходимость мгновенного перехода. Разработчикам будет дан минимум год, чтобы перенести дизайн своих приложений на Material 3. В переходном периоде будет продолжаться поддержка второй версии.

Судя по дорожной карте, впереди ещё много работы. Предстоит доработать компоненты, такие как каскадные меню, боковые листы (side sheets) и всплывающие подсказки. Вместе с этим, придётся уделить много времени документации, создав руководство по миграции на новую версию, а также обновить примеры на Dartpad.dev.

Митапы