М — манёвренность

Это наш первый дайджест по фреймворку Flutter. Значимые новости, полезные туториалы, интересные статьи и события. Let’s make Flutter great again!

Штатная анимация диалогов

Flutter «из коробки» умеет анимировать диалоги. В целом, диалог можно рассматривать, как виджет, требующий реакции пользователя. Это может быть или ответ в самом диалоге, или его закрытие. 

Помните сказку про Кащея у которого смерть была спрятана внутри нескольких сущностей? Тут такой же принцип. У нас есть пустое Dart-приложение. Мы хотим, чтобы диалоговое окно анимировалось вращением при появлении и скрытии. Создадим элемент управления, например, кнопку и добавим функцию OnPressed, отвечающую за действия при нажатии. 

Теперь внутрь функции мы можем определить метод, управляющий диалогом. Пускай это будет _rotateDialog(). В этом методе добавляется функция показа диалога showGeneralDialog(). Далее зададим контекст и параметры, такие как pageBuilder, transitionBuilder и transitionDuration. Возвращая в transitionBuilder метод Transform.rotate(), можно указать угол поворота. Ну а с помощью transitionDuration задаётся время в миллисекундах, отводимое на выполнение анимации.

void _rotateDialog() {
 showGeneralDialog(
   context: context,
   pageBuilder: (ctx, a1, a2) {
     return Container();
   },
   transitionBuilder: (ctx, a1, a2, child) {
     return Transform.rotate(
       angle: math.radians(a1.value * 360),
       child: _dialog(ctx),
     );
   },
   transitionDuration: const Duration(milliseconds: 300),
 );
}

 

Вращение — это лишь один из возможных вариантов. Автор статьи «Learn How To Animate Dialogs In Your Flutter Apps» в качестве примера приводит вариант анимации с масштабированием. Выглядит не менее эффектно. Если же штатных возможностей анимации вам не хватило, то подключите сторонний плагин, например, flutter_animated_dialog.

Пишем асинхронный код

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

Во многих языках поддержка асинхронного программирования заложена изначально. Dart не исключение. Реализуется через библиотеку dart:async с двумя фундаментальными классами — Future и Stream. Привычные конструкции async/await строятся как раз при помощи класса Future. Второй класс Stream заведует управлением потоками, то есть асинхронными последовательностями данных.

Теперь о работе с ошибками. Обработка состоит из двух этапов: перехват и действие. Используются обратные вызовы then и catchError. Можно создавать кастомные обработчики для разных ошибок. Чтобы перейти от теории к практике, изучите примеры в туториале «Dart: Futures and Streams». Автор собрал множество образцов кода для самых распространённых сценариев использования. В качестве отправной точки— идеально.

Кодинг в RADость

Flutter самый популярный, но не единственный фреймворк для языка Dart. Когда нужна разработка веб-приложения, то стоит обратить внимание на фреймворк Rad. Он взял лучшее от Flutter и React и был создан на чистом Dart. Этот фреймворк стал ещё одной возможностью писать код для фронтенда.

Как рассказывает автор Rad, он создавал его безотносительно других фреймворков. Так что говорить о каких-то специфических преимуществах будет некорректно. Rad разделяет ту же парадигму, что и Flutter. По производительности сравним с React. Документация не блещет подробностями, но вполне достаточна, чтобы быстро разобраться в использовании.

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

Строим замки из песка

Настроить окружение на одной машине разработчика несложно. Но что делать, если таких машин десятки, например, в студенческой аудитории? А если совсем нет времени на настройку? Все эти вопросы имеют одно простое решение — IDE и среду исполнения непосредственно в браузере.

Две недели назад на Reddit появился анонс Zapp. Это IDE для разработки на Flutter и Dart, запускаемая прямо в браузере. Она максимально похожа на Visual Studio Code. Пока что находится в стадии закрытого бета-теста, но уже сейчас заявлены следующие фичи:
 

• Использование любого пакета из Pub. Каждый пакет, имеющий поддержку веб-платформы Flutter или Dart может быть добавлен в pubspec.yaml и запущен непосредственно в браузере.
• IntelliSense. Привычная подсветка синтаксиса и автодополнение кода — всё по-взрослому и работает точно также, как и в VSCode.
• Просмотр и шаринг. Всё, что вы сделали можно расшарить друзьям или коллегам. Каждый проект получает уникальный URL и становится доступным. Удобно для код-ревью и парного программирования.
• Палитра команд. Собственно то, за что любят VSCode. Скоростной поиск и запуск разных команд из единой строки.

 

Мы надеемся, что проект получится крутым и будет по достоинству оценён Flutter-разработчиками. А пока что вы можете начать отслеживать репозиторий проекта, куда в дальнейшем будет выложен исходный код.

Конкурсы для разработчиков

Вакансии