Multiple select options in flutter | Hobby selector

 



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

  @override
  State<Page3> createState() => _Page3State();
}

class _Page3State extends State<Page3> {
  List<String> hobbyList = [
    'Shopping',
    'Comedy',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
    'Hiking',
    'Yoga',
    'Volleyball',
    'Craft Beer',
    'Dogs',
    'Cats',
    'Activism',
    'Vlogging',
    'Museum',
    'Dancing',
    'Running',
    'Singing',
    'Make-Up',
    'Concert',
    'Cafe',
    'Theater',
    'Baking',
    'Gardening',
    'Cooking',
    'Video Games',
    'Camping'
  ];
  List<String> selectedHobbies = [];

  // Add elements for Page 3 as needed
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Wrap(
            children: hobbyList.map(
              (hobby) {
                bool isSelected = false;
                if (selectedHobbies!.contains(hobby)) {
                  isSelected = true;
                }
                return GestureDetector(
                  onTap: () {
                    if (!selectedHobbies!.contains(hobby)) {
                      if (selectedHobbies!.length < 5) {
                        selectedHobbies!.add(hobby);
                        setState(() {});
                        print(selectedHobbies);
                      }
                    } else {
                      selectedHobbies!
                          .removeWhere((element) => element == hobby);
                      setState(() {});
                      print(selectedHobbies);
                    }
                  },
                  child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 4),
                      child: Container(
                          padding:
                              EdgeInsets.symmetric(vertical: 5, horizontal: 12),
                          decoration: BoxDecoration(
                            color:
                                isSelected ? Colors.blueAccent : lightDarkColor,
                            borderRadius: BorderRadius.circular(18),
                          ),
                          child: CustomText(
                            size: 19,
                            text: hobby,
                            fontWeight: FontWeight.w400,
                            textColor: isSelected ? whiteColor : Colors.grey,
                          )
                          // Text(
                          //   hobby,
                          //   style: TextStyle(
                          //       color: isSelected ? whiteColor : Colors.grey,
                          //       fontSize: 14),
                          // ),
                          )),
                );
              },
            ).toList(),
          ),
        ],
      ),
    );
  }
}

Comments