Question 75870 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter UI update delayed with Getx

I use the GetX package in my flutter app. However, I’ve noticed that when it comes to updating the UI with new data especially when navigation certain pages, the previous data in the model shows for a few seconds before the new data gets updated. Is this some poor implementation or anissue with GetX.

My issue is with the _workoutDataModel. If i have previously visited a workout and prees the back button, wanting to view another workout, the previous workout still shows for a few seconds before updating to the new data, sometimes up to 5 seconds.

import 'dart:async';

import 'package:fit/models/workout/exercise_model.dart';
import 'package:fit/models/workout/workout_data_model.dart';
import 'package:fit/models/workout/workout_list_model.dart';
import 'package:fit/repositories/workout/workout_repository.dart';
import 'package:get/get.dart';

class WorkoutController extends GetxController {
  final WorkoutRepository workoutRepository;

  WorkoutController({required this.workoutRepository});

  late WorkoutDataModel _workoutDataModel;
  WorkoutDataModel get workoutDataModel => _workoutDataModel;

  bool _isWorkoutData = false;
  bool get isWorkoutData => _isWorkoutData;

 

  Future<void> getWorkoutData(String url) async {
    Response response = await workoutRepository.getWorkoutData(url);
    update();

    if (response.statusCode == 200) {
      _workoutDataModel = WorkoutDataModel.fromJson(response.body);
      _isWorkoutData = true;

      update();
    } else {}
  }

}
Tags:

3

Answers


  1. 0

    I suspect it is because you are using update twice, you could limit to only one.

     Future<void> getWorkoutData(String url) async {
    Response response = await workoutRepository.getWorkoutData(url);
    // update(); // you can comment this out

    if (response.statusCode == 200) {
      _workoutDataModel = WorkoutDataModel.fromJson(response.body);
      _isWorkoutData = true;

      update(); // let this be
    } else {}
  }
    Login or Signup to reply.
  2. 0

    if you are using getx then you must properly apply stateful variables, I gave two examples with type WorkoutDataModel and bool

    it would also be correct to move the marked part of the code to your provider file

    class WorkoutController extends GetxController {
      final WorkoutRepository workoutRepository;

      WorkoutController({required this.workoutRepository});

                  final _workoutDataModel = WorkoutDataModel().obs;
    
        WorkoutDataModel get workoutDataModel => _workoutDataModel.value;
    
        set workoutDataModel(WorkoutDataModel value) => _workoutDataModel.value = value;
    
        RxBool isWorkoutData = true.obs;
     
        Future<void> getWorkoutData(String url) async {
    // { must be in "provider.dart" and return here result in ...Model type
        try {
        Response response = await workoutRepository.getWorkoutData(url);
    
        if (response.statusCode == 200) {
          workoutDataModel = WorkoutDataModel.fromJson(response.body);
          isWorkoutData.value = true;
    
        } else {
          debugPrint("status code ${response.statusCode}");
        }
      } catch(e) {debugPrint("err: $e");}
     }
    }
    Login or Signup to reply.
  3. 0

    Verify in logs that when you press back your controller is deleted. As you wrote, data is visible on revisit means controller is not getting deleted.

    Now, Solution:

    1. You can manually delete the controller on back press and recreate/add on revisit.
    2. You can override backpress or fire an event on revisit; where you can reset WorkoutDataModel with empty constructor, which in turn will display you desired result.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search