Why is my updated data not reflecting on my flutter UI except i hot restart my app while using GetX state management?

Question

I am using getx as my statemanagment for my flutter app. After updating a field from my update profile page, i am fetching the records and displaying it, but it's does not reflect on my UI unless I use the hot restart to restart the app.

I am using getx as my statemanagment for my flutter app. After updating a field from my update profile page, i am fetching the records and displaying it, but it's does not reflect on my UI unless I use the hot restart to restart the app.

Model

part 'user.g.dart';

@JsonSerializable()
class User {
  String? id;
  String? fullName;
  String? phoneNumber;
  String? password;
  String? profileImg;

  User(
      {this.id,
      this.fullName,
      this.phoneNumber,
      this.password,
      this.profileImg});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

Controller

class UserController extends GetxController {
  final networkHandler = NetworkHandler().obs;
  var circular = true.obs;
  var checkImg = false.obs;
  var isLoading = false.obs;
  var userModel = User().obs;

  @override
  void onInit() {
    fetchData();
  }

  void fetchData() async {
    try {
      isLoading(true);
      var response = await networkHandler.value.get("getProfileData");
      userModel.value = User.fromJson(response["data"]);
      circular(false);

      if (userModel.value.profileImg == '') {
        checkImg(true);
      }
    } catch (ex) {
      print({ex, 'An error occured while fetching user data'});
    } finally {
      isLoading(false);
    }
  }
}

NetworkHandler Class

class NetworkHandler{

//get method
  Future get(String url) async {
    String? token = await storage.read(key: "token");
    url = formater(url);
    var response = await http.get(
      Uri.parse(url),
      headers: {"Authorization": "Bearer $token"},
    );
    if (response.statusCode == 200 || response.statusCode == 201) {
      log.i(response.body);

      return json.decode(response.body);
    }
    log.i(response.body);
    log.i(response.statusCode);
  }

}

View

import 'package:flutter/material.dart';
import 'package:customer/src/controllers/UserController.dart';
import 'package:customer/src/views/widgets/home/grid_content.dart';
import 'package:customer/src/views/widgets/home/icon_badge.dart';

import 'package:get/get.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final userController = Get.put(UserController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 2.0,
        backgroundColor: Colors.white,
        actions: <Widget>[
            Obx(() {
            if (userController.isLoading.value) {
              return Center(child: CircularProgressIndicator());
            } else {
              return Container(
                child: Text(
                  userController.userModel.value.fullName!,
                  style: TextStyle(color: Colors.pinkAccent),
                ),
                child: CircleAvatar(
                  backgroundColor: Colors.grey,
                  radius: 20.0,
                  backgroundImage: userController.checkImg.value
                      ? AssetImage('assets/images/user.png')
                      : NetworkHandler().getImage(
                              userController.userModel.value.profileImg!)
                          as ImageProvider,
                ),
              );
            }
          }),
          SizedBox(
            width: 300.0,
          ),
          IconButton(
            icon: IconBadge(
              icon: Icons.notifications_none,
              color: Colors.black54,
              size: 30,
            ),
            onPressed: () {},
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Material(
          color: Colors.grey[300],
          child: Column(
            children: [
              GridContent(),
            ],
          ),
        ),
      ),
    );
  }

}

Answer 1

If you have a list in viewModel and want to update that list, just use the list.refresh() when the list updated

RxList<Models> myList = <Models>[].obs;

when add or insert data act like this:

myList.add(newItem);
myList.refresh();