How to create Filter while using Getx

Question

My goal is to change the data from the API after the user clicks on the filter. So filter 1 will always be on and after clicking on 2 or filter 3 only the data in filter 3 will be sorted.

So instead of selecting all filters, they will only select one filter and the FilterChip color will turn green and the others will turn gray.

I couldn't find any documentation on this topic. What I need to do is to create a new page and redirect those who click on FilterChip to the page I created or is there another way?

ModalBottomSheet:

Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              FilterChip(
                                  label: Text(
                                    "Filter 1",
                                    style: fAppNavBarTextStyle,
                                  ),
                                  checkmarkColor: Colors.white,
                                  selectedColor: cGetFreeColor,
                                  backgroundColor: const Color(0xFF878787),
                                  //disabledColor: Color(0xFF878787),
                                  selected: true,
                                  onSelected: (bool value) {}),
                              FilterChip(
                                  label: Text(
                                    "Filter 2",
                                    style: fAppNavBarTextStyle,
                                  ),
                                  selectedColor: cGetFreeColor,
                                  backgroundColor: const Color(0xFF878787),
                                  //disabledColor: Color(0xFF878787),
                                  selected: false,
                                  onSelected: (bool value) {}),
                              FilterChip(
                                  label: Text(
                                    "Filter 3",
                                    style: fAppNavBarTextStyle,
                                  ),
                                  selectedColor: cGetFreeColor,
                                  backgroundColor: const Color(0xFF878787),
                                  //disabledColor: Color(0xFF878787),
                                  selected: false,
                                  onSelected: (bool value) {}),
                            ],

Homepage:

ApiController apiController = Get.put(ApiController());

 body: Obx(
        () => loading1Sec.isLoading.value
            ? const Center(
                child: LoadingWidget(),
              )
            : GridView.builder(
                // shrinkWrap: true,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 1.26 / 1.03,
                  crossAxisCount: 1,
                ),
                scrollDirection: Axis.vertical,
                itemCount: apiController.apiList.length,
                itemBuilder: (BuildContext context, int index) {
                  var api = apiController.apiList[index];
                return Container();...

Controller:

class ApiController extends GetxController {
  var apiList = [].obs;

  final url = Uri.parse(
      "Link");

  Future callApi() async {
    try {
      final response = await http.get(url);

      if (response.statusCode == 200) {
        List<dynamic> values = [];
        values = apiFromJson(response.body);
        apiList.assignAll(values);

        if (values.isNotEmpty) {
          for (int i = 0; i < values.length; i++) {
            if (values[i] == null) {
              apiList.add(values[i]);
            }
          }
        }
        return apiList;
      }
    } catch (e) {
      throw "Error";
     
    }
  }

  @override
  void onInit() {
    callApi();
    super.onInit();
  }
}

The models of the data in the filters are all the same. The only thing that needs to be changed is the url but I have no idea how to do it.

score 0 · Answer 1 · answered Feb 21 '22 at 03:08

On selecting FilterChip, the API needs to be called which would update the data. As I can see here, the API has been called only once which is at the initialization of the controller.

Kindly follow this,

                          FilterChip(
                              label: Text(
                                "Filter 3",
                                style: fAppNavBarTextStyle,
                              ),
                              selectedColor: cGetFreeColor,
                              backgroundColor: const Color(0xFF878787),
                              //disabledColor: Color(0xFF878787),
                              selected: false,
                              onSelected: (bool value) { 
                                 callApi(); 
                              }),

Make sure the pass the required params or body to the backend in order to get the filtered data

How to create Filter while using Getx

1 Answers1