0

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?

BigPP
  • 522
  • 2
  • 8
  • 18

1 Answers1

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.

Nisanth Reddy
  • 5,967
  • 1
  • 11
  • 29
  • Dear Nisanth, Thank you for your answer. I changed to `controller.posts.value`, but now it gives me another error: `[Get] the improper use of a 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` Basically, It's saying the observer can't update? – BigPP Jun 08 '21 at 05:13
  • I'm confused that after I hot reloaded, the error was gone. But if I build it again with flutter run, then the same getx error still pops up... – BigPP Jun 08 '21 at 07:06
  • 1
    This is happening because your widget structure is a bit misshpen. You are using `child: GetX(` but inside the builder, you have a looot of widget that don't depend on the `obs`. So your builder method of `GetX<>()` should be as small as possible. Move all the wigets that dont depend on the `obs` outside of the builder and this will be resolved. The error text is saying that you basically have to remove the `HeavyWidget` from inside your `GetX` and just have `GetX => variableObservable` – Nisanth Reddy Jun 08 '21 at 07:22