🛠 Кастомные UI компоненты
В этом разделе собраны инструкции по созданию сложных визуальных элементов, которые часто встречаются в современных приложениях.
🕒 Таймлайн (Лента событий)
Для создания вертикальной ленты событий (Timeline) с соединительными линиями:
- Способ 1 (Вертикальный Divider): Используйте
Columnс иконкой (кружком) и вертикальным разделителем. Чтобы линия растягивалась на всю высоту, установите высоту разделителя в100%и используйтеStack. - Способ 2 (Кастомный компонент): Оберните элементы в контейнер с
Expanded. Это позволит элементу занимать разную высоту в зависимости от длины текста.
- Готовый шаблон: В библиотеке FF ищите шаблон
Home 14 - Activity.
🪟 Модальные окна и Bottom Sheets
1. Alert Dialog (В центре экрана)
Используйте для критических уведомлений или подтверждений.
- Настройка: В действиях выберите
Alert Dialog→Custom Dialog. - Выравнивание: Установите
Alignmentв центр. Включите опцию закрытия при нажатии вне окна.
2. Bottom Sheet (Снизу)
Идеально для форм ввода, фильтров и регистрации.
- Настройка: Выберите ваш компонент. По умолчанию он выедет снизу.
- Совет: Не задавайте жесткое выравнивание внутри самого компонента, чтобы он корректно прилипал к низу экрана.
🔘 Раскрывающиеся кнопки (Expandable Menu)
Если нужно скрыть несколько действий за одной основной кнопкой:
- Используйте виджет Expandable или кастомный виджет с анимацией вращения иконки при нажатии.
📺 Полезные видео
Автор контента: @brozaurus