Карточка с переворотом

Виджет FlippableCard показывает две стороны на одном и том же месте экрана. Сначала видна лицевая сторона; по нажатию карточка переворачивается и открывает обратную. Так делают карточки для заучивания, детали товара, условия купона — всё, что читатель открывает по желанию.

Как добавить

  1. Откройте палитру виджетов и добавьте FlippableCard из раздела Layout Elements.
  2. В Widget Tree выделите Card Front. Настройте стандартный Container или замените его виджетом с тем, что пользователь должен увидеть первым.
  3. Выделите сам FlippableCard. В Properties Panel откройте Flippable Card Properties и включите Edit Back of Card.
  4. В Widget Tree выделите Card Back. Настройте стандартный Container или замените его виджетом с тем, что откроется после переворота.

Настройки

Выделите FlippableCard в Widget Tree и откройте Flippable Card Properties в Properties Panel.

Обратная сторона на холсте

Включите Edit Back of Card — на Canvas появится обратная сторона, и её можно редактировать. Выключите, чтобы вернуться к лицевой. Настройка влияет только на то, какая сторона видна при редактировании; поведение карточки в приложении она не меняет.

Направление переворота

По умолчанию карточка переворачивается по горизонтали. В Flip Direction есть два варианта:

  • Horizontal — слева направо или справа налево.
  • Vertical — сверху вниз или снизу вверх.

Длительность анимации

Переворот длится 400 ms. Хотите быстрее или медленнее — задайте Flip Animation Duration в миллисекундах: 1,000 ms равно одной секунде.

Переворот без нажатия

По умолчанию карточка переворачивается по нажатию. Выключите Flip on Tap, если нажатие не должно переключать стороны.

Рекомендации

  • Делайте лицевую и обратную стороны одного размера и проверяйте на реальных данных, что содержимое не вылезает и не обрезается.
  • Дайте понять, что карточка интерактивна: подпись, иконка, любой видимый намёк.
  • Не прячьте важную информацию только на обратной стороне.
  • Держите анимацию короткой, чтобы отклик казался мгновенным.
перевод официальной документации FlutterFlow

обновлено · перевод от

ESC