Карточка

Виджет Card используется для представления некоторой связанной информации. Например, вы можете использовать виджет карточки для отображения визитной карточки, информации о ресторане, информации о фильме и т.д.

Виджет «Карточка» часто используется со списком для отображения информации об элементах для конкретной записи.

Вот пример того, как вы можете использовать виджет Card в своем проекте:

• Сначала перетащите виджет Column с вкладки Layout Elements (в панели виджетов).
• Теперь добавьте сам виджет Card, перетащив его с той же вкладки Layout Elements или добавив его непосредственно из дерева виджетов.
• Снова добавьте виджет Column внутри Card и установите его выравнивание по оси Cross Axis Alignment To Strech.
• Добавьте виджет «Изображение» в столбец карточки и установите его высоту на 200.
• Добавьте виджет «Текст«. Измените его название на Название фильма, а стиль темы на Заголовок 1. Установите значение Left Padding равным 10.
• Добавьте еще один текст. Измените название на «Детали фильма«. Установите левый отступ на 10.

Панель свойств можно использовать для настройки поведения виджета Card.

Здесь приведены инструкции по добавлению подкладок.

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

Чтобы изменить цвет фона карточки:

• Выберите карточку в дереве виджетов или в области холста.
• Перейдите в редактор свойств и перейдите к пункту Цвет в разделе Свойства карточки.
• Нажмите на текст Unset, введите код цвета и нажмите Use Selected Color. Вы также можете изменить цвет, нажав на Палитру или кнопку Простой.

Чтобы изменить высоту (глубину или ось Z) карты:

• Выберите карточку в дереве виджетов или в области холста.
• В редакторе свойств перейдите к текстовому вводу Elevation в свойствах карточки.
• Введите значение, чтобы увидеть эффект падающей тени под карточкой. Чем больше значение, тем больше размер тени.

Чтобы изменить закругленные углы карточки:

• Выберите карточку в дереве виджетов или в области холста.
• В редакторе свойств перейдите к разделу Радиус границы в свойствах карточки.
• Нажмите на значок замка.()
• Введите значение для настройки закругления углов.

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

Чтобы выполнить какое-либо действие по щелчку на карточке, добавьте действие в FlutterFlow. Инструкции по добавлению действия вы можете найти здесь.

Инструкции по отображению/скрытию виджета можно найти здесь.