Как я могу создать то же самое во флаттере?

Я хочу воссоздать тот же ящик для своих пользователей. Как это называется и как я могу воссоздать его во Flutter? Я хочу такую ​​же функцию, как в тиндере. Мой пользователь должен иметь возможность выбрать как минимум 3 интересы.

Я провел много исследований, но не могу найти способов воссоздать его.

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Документирование API с помощью Swagger на Springboot
Документирование API с помощью Swagger на Springboot
В предыдущей статье мы уже узнали, как создать Rest API с помощью Springboot и MySql .
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Шлюз в PHP
Шлюз в PHP
API-шлюз (AG) - это сервер, который действует как единая точка входа для набора микросервисов.
14 Задание: Типы данных и структуры данных Python для DevOps
14 Задание: Типы данных и структуры данных Python для DevOps
проверить тип данных используемой переменной, мы можем просто написать: your_variable=100
1
0
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать виджет ChoiceChip с Wrap. Воспроизвести этот виджет

class MyThreeOptions extends StatefulWidget {
  const MyThreeOptions({super.key});

  @override
  State<MyThreeOptions> createState() => _MyThreeOptionsState();
}

class _MyThreeOptionsState extends State<MyThreeOptions> {
  List<int> selectedIndex = [];
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: List<Widget>.generate(
        33,
        (int index) {
          return DecoratedBox(
            decoration: BoxDecoration(
                border: selectedIndex.contains(index)
                    ? Border.all(
                        color: Colors.red,
                        width: 23,
                      )
                    : null,
                borderRadius: BorderRadius.circular(24)),
            child: Padding(
              padding: const EdgeInsets.all(3.0),
              child: ChoiceChip(
                elevation: 4,
                selectedColor: Colors.white,
                disabledColor: Colors.grey,
                label: Text(
                  'Item $index',
                  style: selectedIndex.contains(index)
                      ? TextStyle(color: Colors.red)
                      : null,
                ),
                padding: EdgeInsets.zero,
                selected: selectedIndex.contains(index),
                onSelected: (bool selected) {
                  if (selectedIndex.contains(index))
                    selectedIndex.remove(index);
                  else
                    selectedIndex.add(index);

                  setState(() {});
                },
              ),
            ),
          );
        },
      ).toList(),
    );
  }
}

ВОТ ЭТО ДА! Спасибо большое!!! Я новичок в флаттере, и мой спринт заканчивается в пятницу, и я не смог найти решения этой проблемы. Спасибо!!

EA19 20.11.2022 11:32

Другие вопросы по теме