Flutter Widget Previewer

Читать в Telegram

Вышла экспериментальная фича для просмотра виджетов в режиме реального времени в Google Chrome.

💻 Что и как можно смотреть?

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

Доступны к просмотру:

• Функции верхнего уровня: методы, возвращающие Widget или WidgetBuilder.

• Статические методы внутри класса, возвращающие Widget или WidgetBuilder.

• Публичные конструкторы виджетов и фабрики без обязательных аргументов.

Для отображения виджета во Flutter Widget Previewer нужно пометить аннотацией Preview элемент кода, который подходит под один из пунктов списка допустимых компонентов:

import 'package:flutter/widget_previews.dart';
import 'package:flutter/material.dart';

@Preview(name: 'My Sample Text')
Widget mySampleText() {
  return const Text('Hello, World!');
}

Далее из терминала выполняем следующую команду:

flutter widget-preview start

Google Chrome открывается автомитически после сборки. Можно скопировать ссылку и использовать просмотрщик в других совместимых браузерах. Результат будет такой же (в зависимости от виджетов), как и на скриншоте в посте.

Помимо просмотра виджетов, можно так же менять:

• Зум: увеличение и уменьшение виджета в окне предварительного просмотра.

• Сброс масштаба: откат после изменений зума.

• Переключение между темной и светлой темами.

• Hot restart отдельно взятого виджета, без пересборки всего Flutter Widget Previewer.

🛠 Кастомизация

Аннотация Preview позволяет помимо имени виджета задавать следующие параметры для отображения компонента:

• size: размер компонента с использованием класса Size.

• textScaleFactor: собственный скейл для текста внутри отображаемого виджета.

• wrapper: функция, которая врапит ваш виджет в заданное дерево виджетов.

• theme: функция для установки Material или Cupertino темы.

• brightness: параметр brightness, который будет использоваться для отображаемого виджета.

• localizations: локализация для отображаемого виджета.

🚫 Ограничения

На данный момент имеем следующее:

• Публичные константы: все аргументы, которые принимает аннотация Preview, должны быть публичными и константными. Требуется для нормальной работы генератора кода. В будущем часть ограничений будет смягчена.

• Неподдерживаемые API: нативные плагины и любые API из библиотеки dart:io не поддерживаются. Поскольку FWP работает в вэбе, нативные плагины там не работают. Вэб-плагины тоже не получится использовать, так как нет гарантий из работы локально в IDE.

• Пути к ресурсам: при использовании API fromAsset из dart:ui для загрузки ресурсов необходимо использовать пути на основе пакетов вместо прямых локальных путей. Это дает гарантированный и корректный импорт зависимостей.

• Поддержка браузеров: сейчас доступно только в Chrome, поскольку для FWP требуется поддержка горячей перезагрузки. Поддержку IDE обещают в скором времени.

• Unconstrained-виджеты: на данный момент отображаются только на половину экрана. В будущем поведение изменится.