Совсем недавно команда Flutter выпустила новую версию фреймворка — 3.35. Она принесла достаточно много интересных обновлений, о которых подробнее можно ознакомиться в обзорной статье на Medium.
Сегодня рассмотрим новую экспериментальную фичу, выпущенную с версией 3.35 — Flutter Widget Previewer.
Flutter Widget Previewer позволяет отобразить текущий вид конкретного виджета без запуска всего приложения на эмуляторе или реальном устройстве. На сегодня превью доступно только для отображения в Chrome, но команда Flutter планирует в скором будущем поддерживать эту функцию и в IDE, и на веб-сервере.
Как запустить?
В первую очередь вам необходимо установить Flutter версии 3.35.0 или выше.
Для запуска требуется в терминале выполнить команду
flutter widget-preview start
Она запустит локальный сервер и откроет превью виджета в Chrome.
Как использовать?
Flutter новой версии дает доступ к аннотации
@Preview. Эту аннотацию можно подключить к:▪️конструкторам и фабрикам публичных виджетов без обязательных аргументов
▪️ верхнеуровневым методам, возвращающим
Widget или WidgetBuilder▪️ статическим методам внутри класса, которые тоже возвращают Widget или WidgetBuilder
Аннотации можно передать дополнительные параметры, такие как тему, локализацию или размер. Это позволяет легко имитировать те или иные условия системы, которые в дальнейшем могут повлиять на интерфейс приложения.
После запуска превью можно вносить любые изменения в исследуемый виджет. Превью автоматически обновляется, выполнять дополнительные операции для этого не нужно.
Рассмотрим на примере
Создадим простой виджет-карточку с картинкой, заголовком и описанием. Добавим к конструктору этого виджета аннотацию и запустим превью.
class CustomCard extends StatelessWidget {
@Preview()
const CustomCard({super.key});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: const DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1755133314246-2103970d4726?q=80&w=988&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
),
fit: BoxFit.cover,
),
),
),
const SizedBox(width: 16),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Фото #2345',
style: TextStyle(fontSize: 20),
),
SizedBox(width: 16),
Text(
'Описание к фотографии #2345',
style: TextStyle(fontSize: 16),
),
],
),
],
),
),
);
}
}
Вид, который отобразится на выходе в превью, показала на картинке👆
Какие плюсы/минусы?
Лично для себя я нашла и преимущества, и недостатки.
➕ запуск превью очень быстрый, в разы быстрее сборки
➕ так как превью в вебе — легко проверять адаптивность верстки, достаточно поменять размер окна Chrome
➕ можно имитировать разные системные условия, например, тему, локализацию
➕ снижает нагрузку на компьютер разработчика, так как не надо запускать эмуляторы (актуально для слабых устройств)
➕ позволяет детальнее проверять отдельные части интерфейса
➖ фича экспериментальная, а значит еще «сырая»
➖ пока нет поддержки IDE (а было бы очень удобно)
➖ в текущей реализации не может обеспечить полноценный анализ интерфейса, так как хорошо работает только с простыми и статичными виджетами, без анимаций и зависимости от внешних состояний
📎Больше информации можно найти в официальной документации.
А какие у вас впечатления от этой фичи?