Hotel Filter

filter_example.dart

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

  @override
  State<HotelView> createState() => _HotelViewState();
}

class _HotelViewState extends State<HotelView> {
  final List<HotelModel> hotelList = [
    const HotelModel(howManyPeople: 1, howManyRooms: 1, hotelTypes: {HotelType.relaxRoom}),
    const HotelModel(howManyPeople: 2, howManyRooms: 1, hotelTypes: {HotelType.businessRoom}),
    const HotelModel(howManyPeople: 3, howManyRooms: 1, hotelTypes: {HotelType.familyRoom}),
    const HotelModel(howManyPeople: 4, howManyRooms: 2, hotelTypes: {HotelType.vipRoom}),
    const HotelModel(howManyPeople: 5, howManyRooms: 3, hotelTypes: {HotelType.bigRoom}),
    const HotelModel(howManyPeople: 6, howManyRooms: 4, hotelTypes: {HotelType.relaxRoom, HotelType.businessRoom}),
    const HotelModel(howManyPeople: 7, howManyRooms: 5, hotelTypes: {HotelType.relaxRoom, HotelType.familyRoom}),
    const HotelModel(howManyPeople: 8, howManyRooms: 6, hotelTypes: {HotelType.relaxRoom, HotelType.vipRoom}),
  ];

  final List<int> peopleButtonData = [1, 2, 3, 4, 5, 6, 7, 8];
  List<int> selectedPeopleData = List<int>.empty(growable: true);

  final List<HotelType> hotelTypeList = HotelType.values;

  List<HotelType> selectedHotelTypeList = List<HotelType>.empty(growable: true);

  void _onPeopleButtonPressed(int value) {
    if (selectedPeopleData.contains(value)) {
      selectedPeopleData.remove(value);
    } else {
      selectedPeopleData.add(value);
    }
    setState(() {});
  }

  void _onHotelTypeButtonPressed(HotelType value) {
    if (selectedHotelTypeList.contains(value)) {
      selectedHotelTypeList.remove(value);
    } else {
      selectedHotelTypeList.add(value);
    }

    setState(() {});
  }

  List<HotelModel> get filteredHotelList {
    if (selectedPeopleData.isEmpty && selectedHotelTypeList.isEmpty) {
      return hotelList;
    } else if (selectedPeopleData.isEmpty && selectedHotelTypeList.isNotEmpty) {
      return hotelList.where((element) => element.hotelTypes.containsAll(selectedHotelTypeList)).toList();
    } else if (selectedPeopleData.isNotEmpty && selectedHotelTypeList.isEmpty) {
      return hotelList.where((element) => selectedPeopleData.contains(element.howManyPeople)).toList();
    } else {
      return hotelList.where((element) => selectedPeopleData.contains(element.howManyPeople) && element.hotelTypes.containsAll(selectedHotelTypeList)).toList();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        minimum: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('How many people'),
            Wrap(
              children: peopleButtonData
                  .map(
                    (e) => Padding(
                      padding: context.paddingLowLeft,
                      child: TextButton(
                        style: TextButton.styleFrom(
                          side: const BorderSide(),
                          backgroundColor: selectedPeopleData.contains(e) ? Colors.blue : Colors.white,
                        ),
                        onPressed: () => _onPeopleButtonPressed(e),
                        child: Text(
                          '$e\t\tPeople',
                          style: const TextStyle(color: Colors.black),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            ),
            const SizedBox(height: 16),
            const Text('Room types'),
            Wrap(
              children: hotelTypeList
                  .map(
                    (e) => Padding(
                      padding: context.paddingLowLeft,
                      child: TextButton(
                        style: TextButton.styleFrom(
                          side: const BorderSide(),
                          backgroundColor: selectedHotelTypeList.contains(e) ? Colors.blue : Colors.white,
                        ),
                        onPressed: () => _onHotelTypeButtonPressed(e),
                        child: Text(
                          e.name,
                          style: const TextStyle(color: Colors.black),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            ),
            const SizedBox(height: 16),
            GridView.builder(
              shrinkWrap: true,
              itemCount: filteredHotelList.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8),
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    color: Colors.primaries[index % Colors.primaries.length],
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text(
                        'People :  ${filteredHotelList[index].howManyPeople}',
                        style: const TextStyle(color: Colors.white),
                      ),
                      Text(
                        'Rooms :  ${filteredHotelList[index].howManyRooms}',
                        style: const TextStyle(color: Colors.white),
                      ),
                      Text(
                        filteredHotelList[index].hotelTypes.map((e) => e.name).join(', '),
                        style: const TextStyle(color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

final class HotelModel {
  const HotelModel({
    required this.howManyPeople,
    required this.howManyRooms,
    required this.hotelTypes,
  });
  final int howManyPeople;
  final int howManyRooms;
  final Set<HotelType> hotelTypes;
}

enum HotelType {
  relaxRoom,
  businessRoom,
  familyRoom,
  vipRoom,
  bigRoom,
}