The getter "some variable" isn't defined for the type 'Rx<some class>' while using getx controller

Question

I am trying to implement reactive getx for my project to achieve cleaner code.

In the controller dart file, I have:

class ReadSinglePostController extends GetxController {
  var posts = Post(
          postID: 1,
          userID: 0,
          thumbnail: 'some base64string',
          imageList: 'some base64string',
          title: 'title',
          description: 'description',
          createdTime: DateTime.now())
      .obs;//initialization and make the class Post observable
  var postid = 0.obs; //initialize postid and make it observable
  void updateID(var postID) {
    postid = postID;
  } //update the postid variable when a specific post is clicked in the post list

  @override
  void onInit() {
    super.onInit();
    readPost(postid);
  }

  Future readPost(var postID) async {
    var result = await PostsDatabase.instance.readNote(postID);
    posts = result;
  }//function to read the detailed content of that specific post from database passing in the postid
}

Then on the homepage of the UI, where I have all posts in a grid, I implement this controller to update the postid when a specific post is clicked. When a post is clicked, it navigates into the post detail page, and in that UI file, the error comes in:

Error:The getter "thumbnail" isn't defined for the type 'Rx<Post>'. and the same error comes up when I use getter 'title', 'description' and etc.

Here is the code:

class PostBody extends StatelessWidget {
  PostBody({
    Key? key,
  }) : super(key: key);

  final readSinglePostController = Get.put(ReadSinglePostController());

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.bodyText2!,
      child: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: GetX<ReadSinglePostController>(
                builder: (controller) {
                  return ...
                              ...
                                ...
                                child: FadeInImage(
                                  placeholder: MemoryImage(kTransparentImage),
                                  image:
                                      Utility.imageFromBase64String(
                                              controller.posts.thumbnail)//Error:The getter "thumbnail" isn't defined for the type 'Rx<Post>'. and the same error comes up when I use getter 'title', 'description' and etc.
                                          .image,
                                ),...

Any clue, guys?

Answer 1

IN Getx, Rx<T> is a wrapper on T.

Which means when you call controller.posts you are getting an instance of the reactive type that is Rx<Post>.

Now, Rx<Post> wouldn't directly know what members are present inside of Post and that is why you are unable to access them directly.

Instead you must first obtain the value from the reactive object which gives you the actual Post instance that the Rx is wrapping. From that you can access your instance variables.

controller.posts.value.thumbnail

Here, controller.posts.value is of type Post.