Flutter GetX Obs data not showing in first build

Question

Why my UI widget not showing data after the first build? But when navigate to other screen and back to HomeScreen, the widget will show data (User widget at top)? Is there anything I missed?

My app demo video

Here is the Homescreen code:

class HomeScreen extends GetView<HomeController> {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.put(HomeController());
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left: 16, right: 16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 24),
                Obx(() {
                  return SimpleUserProfile(
                      profileImageUrl: 'https://picsum.photos/200',
                      profileUsername:
                      controller.studentData.value.name ?? 'studentName',
                      profileUserID:
                      controller.studentData.value.studentId ?? 'studentId');
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }

And this is homescreen controller I made:

class HomeController extends GetxController {
  late final HomeService _homeService;
  late final AuthController _authController;
  late final StudentMapper _mapper = StudentMapper();

  late Rx<StudentEntity> studentData = StudentEntity().obs;

  @override
  Future<void> onInit() async {
    super.onInit();
    _homeService = Get.put(HomeService());
    _authController = Get.find();
    await getStudent();
  }

  Future<void> getStudent() async {
    var token = _authController.getToken();
    var studentId = _authController.getStudentIdFromBox();

    final response = await _homeService.fetchStudent(
        _authController.getToken(), _authController.getStudentIdFromBox());

    if (response != null) {
      studentData = _mapper.toStudent(response).obs;
      studentData.refresh();
    } else {
      Get.defaultDialog(
          middleText: 'User not found!',
          textConfirm: 'OK',
          onConfirm: () {
            refresh();
            Get.back();
          });
    }

    if (kDebugMode) {
      print(response);
      print(token);
      print(studentId);
      print(studentData.value.studentId);
    }
  }

  @override
  void refresh() {
    studentData.refresh();
  }
}

I tried using Obx, but nothing changed. Is there something I forgot to add to the code?

Answer 1

What I noticed is the studentData, since it is an observable variable so you need to use it like this:

studentData.value = _mapper.toStudent(response);

By assigning the data using studentData.value, it triggers the UI to update when the data changes.