Шейдеры

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

Два виджета

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

ShaderFill

ShaderFill — самостоятельный прямоугольник с эффектом. Потомков у него нет, размер задаётся свойствами ширины и высоты. Это фон: живые градиенты, процедурные текстуры, движущиеся подложки.

Типичный случай — анимированный фон приветственного экрана.

ShaderWrapper

ShaderWrapper накладывает эффект на существующий виджет: он оборачивает потомка и меняет то, как тот выглядит. Отсюда рябь, выгорание и растворение картинок, контейнеров и любых других элементов.

Например, вместо того чтобы элемент просто исчез, оберните его в ShaderWrapper — и он растворится, объясняя пользователю, что произошло.

Shader Mode

У каждого шейдерного виджета есть настройка Shader Mode — откуда берётся сам эффект.

• Preset — готовый эффект из встроенной библиотеки. У каждого свои параметры: цвета, скорость, интенсивность; все они настраиваются в панели свойств.
• Custom — свой файл .frag. Входные значения объявляются как uniform-переменные и превращаются во FlutterFlow в ползунки. На холсте редактора такой шейдер выглядит шахматной заглушкой, а реально рисуется только в Test или Run.

Пресеты

Готовые эффекты, которые применяются и настраиваются без кода.

Пресеты ShaderFill

Градиенты

Градиентные пресеты смешивают переход цвета с процедурным шумом. У каждого есть линейный и радиальный вариант, а набор настраиваемых параметров общий.

Тип	Что даёт	Пример
Gritty Gradient	Зернистый градиент с крупной фактурой
Perlin Gradient	Мягкий естественный шум поверх градиента
Simplex Gradient	Похож на Perlin, но резче и структурнее
FBM Gradient	Многослойный шум, похожий на облака
Turbulence Gradient	Более хаотичная и подвижная версия FBM
Voronoi Gradient	Чёткие ячейки на основе геометрических областей
Voronoise Gradient	Смесь ячеистой структуры и плавного шума

Marble Smear

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

Пресеты ShaderWrapper

Ripple и Clickable Ripple

Волновое искажение по виджету, как круги на воде. Обычный вариант идёт постоянно, «кликабельный» пускает волну из точки касания.

Burn, Radial Burn, Tappable Burn

Виджет выгорает со светящейся кромкой. Эффект идёт в заданном направлении, расходится от центра или начинается от касания.

Smoke, Radial Smoke, Tappable Smoke

Мягкая версия выгорания: виджет уходит дымкой. Варианты те же — направленный, радиальный и по касанию.

Pixel Dissolve и его варианты

Виджет рассыпается на пиксельные блоки. Направленный, радиальный и по касанию.

Tappable Slurp

Виджет затягивает в точку касания, как в воронку.

Implicit Animated

С включённым Implicit Animated изменение параметров шейдера — цветов, значений ползунков — происходит плавно, а не рывком. Особенно полезно, когда параметры берутся из состояния приложения: градиент перетекает в новые цвета вместо мгновенной подмены.

Поведение во времени

Time Animation Behavior определяет, как шейдер анимируется: сам по себе, вручную или по заданному сценарию.

Continuous

Значение по умолчанию: анимация идёт бесконечным циклом, настраивать ничего не нужно. Это для фонов и прочего постоянного движения.

Implicit

Анимацией управляете вы — ползунком Time в диапазоне 0–10. Нужно, когда эффект привязан к состоянию приложения: к позиции прокрутки, к действию пользователя, либо когда его надо остановить на конкретном кадре.

Explicit

Полный контроль над таймлайном: длительность, задержка, кривая, зацикливание, направление. Такую анимацию запускают и останавливают действием Shader Animation.

Интерактивный режим

Часть пресетов реагирует на касания. С включённым Interactive пользователь может вызвать рябь, прожог, искажение или размазывание прямо пальцем.

Интерактивные пресеты:

• ShaderFill: Marble Smear — размазывание перетаскиванием.
• ShaderWrapper: Clickable Ripple, Tappable Burn, Tappable Smoke, Tappable Pixel Dissolve, Tappable Slurp.

Persist Taps

Доступно у пресетов ShaderWrapper с откликом на касание. Когда включено, след от касания остаётся после того, как палец убран; когда выключено — постепенно исчезает.

Tap Animation

Отдельная настройка того, как анимируется отклик на каждое касание: кривая, длительность, задержка, поведение при проигрывании. С основной анимацией во времени она не связана.

Кеш

Настройка Cache сохраняет отрисованный результат: шейдер рисуется один раз и переиспользуется, пока не изменятся его параметры. У ShaderFill включена по умолчанию.

Свои шейдеры

Свой эффект пишется фрагментным шейдером — файлом .frag, который целиком определяет, как отрисовывается каждый пиксель.

Порядок такой:

1. Подготовьте .frag, совместимый с Flutter. Его можно сгенерировать нейросетью по описанию эффекта или взять существующий и доработать. Пример запроса:

   Create a Flutter-compatible GLSL .frag shader for a soft animated onboarding background using Flutter runtime effect format. {describe your effect here} Return complete shader code and a downloadable .frag file.

2. Загрузите файл через Shader Asset.

3. Кнопкой Add Uniform объявите входные значения — каждое станет ползунком от 0 до 10.

На холсте редактора свой шейдер выглядит шахматной заглушкой; настоящую картинку видно в Test или Run.

Uniform-переменные

Uniform — это входной параметр шейдера. Во FlutterFlow он превращается в ползунок, как настройки скорости и цвета у готовых пресетов.

Порядок важнее имён

Значения передаются не по именам, а строго в порядке объявления: первый объявленный uniform получает первое значение из интерфейса, второй — следующее.

Пример:

uniform float speed;   // 1-й
uniform vec4 color;    // 2-й

В интерфейсе значения задаются в том же порядке:

• Uniform 1 → speed
• Uniform 2 → color (это vec4, то есть четыре числа)

Всё превращается в float

Такое объявление в файле шейдера:

uniform vec4 color;

FlutterFlow видит как четыре отдельных числа:

float r
float g
float b
float a

Обязательные uniform

Эти два FlutterFlow передаёт всегда и первыми, даже если вы их не написали:

uniform vec2 uSize;
uniform float uTime;

Поэтому файл шейдера должен начинаться именно с них:

uniform vec2 uSize;
uniform float uTime;

uniform float speed;
uniform vec4 color;

Шейдеры с Shadertoy

На Shadertoy лежат тысячи готовых фрагментных шейдеров — фоны, свечения, симуляции жидкости. Flutter умеет работать со своими фрагментными шейдерами через API FragmentProgram, но напрямую шейдер с Shadertoy не запустится: у него другая точка входа, другие имена uniform-переменных и встроенные функции, которых во Flutter нет.

Для конвертации есть навык Shadertoy to Flutter: он переписывает структуру шейдера, сопоставляет uniform-переменные, по возможности разбирается с текстурными каналами и выдаёт готовый .frag.

Шаг 1. Скачать навык

Навык называется shadertoy-to-flutter и лежит в репозитории на GitHub.

Что внутри:

• SKILL.md — основной файл с правилами и порядком конвертации.
• references/flutter_glsl_constraints.md — ограничения GLSL во Flutter, неподдерживаемые возможности, правила по uniform-переменным и текстурам.
• references/uniform_mapping.md — соответствие переменных Shadertoy и Flutter (iTime → uTime и прочие).
• references/templates.md — шаблоны fill- и wrap-шейдеров с примерами конвертации.
• references/noise_library.md — функции шума на замену текстурам шума из Shadertoy.
• scripts/package-skill.sh — сборка навыка в zip-архив.

Шаг 2. Установить навык

Навык понимает любой ИИ-агент, который умеет читать SKILL.md и следовать инструкциям, — Claude, Codex и другие.

В Claude

1. Откройте приложение Claude Desktop.
2. Перейдите в Customize и выберите Skills в меню слева.
3. Нажмите + вверху панели и выберите Upload a skill.
4. Загрузите навык — zip-архивом или папкой.

В нём обязательно должен быть SKILL.md; папки references/ и scripts/ — по желанию.

В Codex

1. Откройте приложение Codex Desktop.
2. Введите в поле сообщения /sk.
3. Выберите Skill Installer из подсказок.
4. Попросите установить навык прямо из GitHub:

Install this skill https://github.com/FlutterFlow/shadertoy_to_flutter_skill

Codex установит навык в локальную папку. После установки перезапустите Codex.

Шаг 3. Конвертация

Работает и по ссылке на Shadertoy, и с локальным файлом.

Вариант А — по ссылке

[invoke shadertoy-to-flutter skill] convert this Shadertoy shader into a Flutter .frag file:
[shadertoy-url]

Вариант Б — из файла .glsl

Откройте шейдер на Shadertoy, скопируйте код и сохраните его в файл .glsl. Приложите файл к запросу:

[invoke shadertoy-to-flutter skill] convert this file into a Flutter .frag file

Use the /shadertoy-to-flutter skill and convert this shader to a Flutter .frag file:

[paste shader code]

Шаг 4. Загрузить .frag в проект

Загрузите полученный файл через Shader Asset и запустите приложение. При необходимости объявите uniform-переменные.

Что учесть

• Не правьте сгенерированный .frag руками, если не знаете GLSL.
• Всегда сверяйте порядок uniform-переменных, прежде чем подставлять значения.
• По возможности берите fill-шейдеры: с ними меньше подводных камней.
• Wrap-шейдеры нужны только тогда, когда эффекту нужна картинка или содержимое интерфейса под ним.
• Не добавляйте лишние uniform-переменные без необходимости — каждая из них становится ползунком, за которым нужно следить.