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

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

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

Основные случаи использования

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

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

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

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

Строитель виджета в качестве параметра

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

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

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

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

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

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

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

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

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

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

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

Предварительный просмотр виджета

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

Ищете другие НАСТРОЙКИ пользовательского действия?

Чтобы узнать больше о настройках пользовательского виджета, таких как Параметр исключения из компиляции, и другие свойства, такие как Действия обратного вызова, Pub Зависимости, пожалуйста, посетите этот подробный руководство.