Getx Controller not fetching data

Question

So i have an implementation where i pass the id of a parent category and it fetches its child category from the database and displays them in another screen (view).

When i click on the parent, it sends the its category ID to the screen whose code is below and the it suppose to get the data from the database to be used in the screen. However, it says null when you click from the previous page to this new screen. If you directly do a hot reload, the data gets displayed.

Does it mean the below code doesn't get run when the screen is first loaded?

Note that all controllers and repositories have been set in the dependecies class and initialised in the main.

var childCatItem =
        Get.find<ChildCategoriesController>().getChildCategory(childCatId);

Parent Category Screen Function to Pass ID. The below code gets the ID from the already loaded data.

onTapLeftService: (){
                      int childCatId = randomController.isLoaded ? randomController.randomServicesList[0].children[0].id : 0;
                      Get.toNamed(RouteHelper.getChildCategoryServicesPage(childCatId));
                    },

The below code is the route where it is gotten and passed to the screen

//This is the route implementation. This is called in the above code.
static String getChildCategoryServicesPage(int childCatId) =>
      '$childCategoryServicesPage?childCatId=$childCatId';

GetPage(
        name: childCategoryServicesPage,
        page: () {
          var childCatId = Get.parameters['childCatId'];
          return ChildCategoryServicesScreen(
              childCatId: int.parse(childCatId!));
        },
        transition: Transition.fadeIn),

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:personal_start/controller/nonemergency_services/child_categories_controller.dart';
import 'package:personal_start/helper/app_styles.dart';
import 'package:personal_start/widget/title_text.dart';

class ChildCategoryServicesScreen extends StatelessWidget {
  int childCatId; //Here I receive the ID of the parent category into this screen

  ChildCategoryServicesScreen({Key? key, required this.childCatId})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    var childCatInstance = Get.find<ChildCategoriesController>(); // I create an instance of the controller
    var childCatItem =
        Get.find<ChildCategoriesController>().getChildCategory(childCatId); //Here I make an API call to the database, passing the parent category ID.

    print(childCatItem);
    print(childCatInstance.childCategory!.title); //I receive a null value here.

    return Scaffold(
      appBar: AppBar(
        title: TitleTextWidget(titleText: 'Child Cat Title'),
        leading: GestureDetector(
          onTap: () {
            Get.back();
          },
          child: const Icon(Icons.arrow_back_outlined),
        ),
        backgroundColor: AppStyles.appPrimaryColor,
      ),
      // body: !childCatItem.isLoaded
      //     ? const CustomLoader()
      //     : Center(child: TitleTextWidget(titleText: 'It has Loaded')),
    );
  }
}

Answer 1

Try this way

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:personal_start/controller/nonemergency_services/child_categories_controller.dart';
import 'package:personal_start/helper/app_styles.dart';
import 'package:personal_start/widget/title_text.dart';

class ChildCategoryServicesScreen extends GetView<ChildCategoriesController> {
ChildCategoryServicesScreen({Key? key}): super(key: key);

@override
ChildCategoriesController controller = Get.put(ChildCategoriesController());



@override
  Widget build(BuildContext context) {
    ...//TODO: YOUR CODE HERE

  }

ChildCategoriesController

class ChildCategoriesController extends GetxController {
late int childCatId;
...//TODO: YOUR CODE HERE

  @override
  void onInit() {
    int childCatId = Get.arguments[0];
    ...//TODO: YOUR CODE HERE
    super.onInit();
  }

  @override
  void onClose() {}

...//TODO: YOUR CODE HERE
}