Пользовательские виджеты

Пользовательские виджеты позволяют создавать уникальные и повторно используемые компоненты пользовательского интерфейса, выходящие за рамки стандартного набора виджетов в FlutterFlow. Используя пользовательские виджеты, вы можете достичь более высокого уровня настройки и контроля над пользовательским интерфейсом вашего приложения.

В большинстве случаев вы можете создать повторно используемый компонент с помощью базового набора виджетов, доступного в FlutterFlow. Однако, когда вы хотите включить пакет пользовательского интерфейса из pub.dev, пользовательские виджеты — лучший выбор.

Основные сценарии использования

• Уникальные элементы UI: Создавайте сложные компоненты пользовательского интерфейса, которые недоступны в стандартном наборе виджетов FlutterFlow.

• Интеграции с третьими сторонами: Интегрируйте внешние пакеты UI из pub.dev для улучшения функциональности и внешнего вида вашего приложения.

Создание нового пользовательского виджета

Чтобы создать новый пользовательский виджет, добавьте новый фрагмент пользовательского кода и следуйте краткому руководству ниже. В этом примере мы создадим виджет ProductRatingBar, который использует зависимость pub.dev для отображения UI панели рейтинга. Он также примет действие обратного вызова, чтобы передать значение рейтинга обратно вызывающему коду.

Widget Builder как параметр

Вы также можете использовать Widget Builders, которые позволяют передавать виджеты для использования внутри дерева пользовательского виджета. Это особенно полезно, когда вы хотите динамически заменять содержимое для какой-либо части пользовательского виджета — например, отображать элемент во всплывающем окне пользовательского виджета.

Свойства: Ширина и высота

Для пользовательских виджетов обязательно указывать ширину и высоту. Эти свойства необходимы для правильного размера пользовательского виджета. Без установки этих размеров пользовательский виджет не будет отображаться корректно в вашем приложении.

Добавление зависимости к пользовательским виджетам

В этом примере мы используем зависимость flutter_rating_bar для создания виджета ProductRatingBar для наших страниц продуктов. Посмотрите, как мы используем пример кода из pub.dev и добавляем настроенный виджет в FlutterFlow:

Выбор зависимости Pubspec

Для подробного руководства по навигации по внешним пакетам с использованием pub.dev, оценке пакетов и выбору лучших вариантов для вашего приложения следуйте руководству.

Использование пользовательского виджета

Чтобы добавить пользовательский виджет на вашу страницу, вы можете перетащить его из раздела Components палитры виджетов или через раздел Widget Tree. Вот демонстрация:

Предоставление действий обратного вызова

Поскольку мы создали действие обратного вызова onRating в нашем пользовательском виджете, мы должны предоставить действие при установке виджета на странице. В этом примере мы устанавливаем ratingValue в переменную состояния страницы userRating.

Просмотр виджета

FlutterFlow также позволяет просматривать ваш пользовательский виджет после успешной компиляции.

Ищете другие свойства пользовательских действий?

Чтобы узнать больше о настройках пользовательских виджетов, таких как переключатель Exclude From Compilation, и других свойствах, таких как Callback Actions, Pub Dependencies, пожалуйста, ознакомьтесь с этим подробным руководством.