Using flutter GetX controller for setState()

Question

I want to call the value of the string in my controller, here's my controller:

class SplashScreenController extends GetxController {
  late String one = _setImage();

  @override
  void onInit() {
    _initPackageInfo();
    _setImage();
    Timer(Duration(seconds: 5), () => Get.offNamed(Routes.DASHBOARD));
    super.onInit();
  }

  @override
  void onClose() {}

  PackageInfo _packageInfo = PackageInfo(
    appName: 'Unknown',
    packageName: 'Unknown',
    version: 'Unknown',
    buildNumber: 'Unknown',
    buildSignature: 'Unknown',
  );

  Future<void> _initPackageInfo() async {
    _packageInfo = await PackageInfo.fromPlatform();
  }

  String _setImage() {
    print(_packageInfo.packageName);

    ///main package
    if (_packageInfo.appName == 'x1') {
      return Images.x1;
    } else if (_packageInfo.packageName == 'com.package.package1') {
      return Images.package1;
    } else {
      return Images.x1;
    }
  }
}

I want to call function setImage() in my widget, but there is an issue after I call it, you can see it on here:

[Get] the improper use of a GetX has been detected. You should only use GetX or Obx for the specific widget that will be updated. If you are seeing this error, you probably did not insert any observable variables into GetX/Obx or insert them outside the scope that GetX considers suitable for an update (example: GetX => HeavyWidget => variableObservable). If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.

And here is the view, where I call the controller function:

Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          body: Container(
              color: const Color.fromARGB(255, 255, 255, 255),
              alignment: AlignmentDirectional.center,
              child: Image.asset(controller.one)),
        ));
  }

is there any way to fix it so I can access _setImage() on my view?

Answer 1

You have this error because you wrap your code with Obx but you don't use an observable variable inside.

Change your code like this:

class SplashScreenController extends GetxController {
  late String one = ''.obs; // This is the observable variable that you need

  @override
  void onInit() {
    _initPackageInfo();
    _setImage();
    Timer(Duration(seconds: 5), () => Get.offNamed(Routes.DASHBOARD));
    super.onInit();
  }

  @override
  void onClose() {}

  PackageInfo _packageInfo = PackageInfo(
    appName: 'Unknown',
    packageName: 'Unknown',
    version: 'Unknown',
    buildNumber: 'Unknown',
    buildSignature: 'Unknown',
  );

  Future<void> _initPackageInfo() async {
    _packageInfo = await PackageInfo.fromPlatform();
  }

  void _setImage() {
    print(_packageInfo.packageName);

    ///main package
    if (_packageInfo.appName == 'x1') {
       one = Images.x1;
    } else if (_packageInfo.packageName == 'com.package.package1') {
       one = Images.package1;
    } else {
       one = Images.x1;
    }
  }
}

And for the Widget:

Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      body: Container(
        color: const Color.fromARGB(255, 255, 255, 255),
        alignment: AlignmentDirectional.center,
        child: controller.one.isNotEmpty 
          ? Image.asset(controller.one)) 
          : const SizedBox.shrink(),
    ));
}