Below I have a very simple GetX project that should basically load some data on button press asynchronously. However, I would like the button to change from 'PRESS ME' to 'LOADING' whilst the data is fetched. I cannot get my head around why the widget is not rebuilt when I change the observable status variable. Am I missing a fundamental concept here? The widget clearly does get re-drawn after the async method updateDetails finishes, but not when I change 'status' within the method...? Many thanks.

void main() async {
  runApp(TestApp());
}

class TestApp extends StatelessWidget {
  const TestApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: appTheme,
      home: TestWidget(),
    );
  }
}

class TestController extends GetxController {
  var status = 'PRESS ME'.obs;
    
  updateDetails() async {
    print('Loading');
    status('LOADING');
    sleep(1.seconds);
    print('Finished');
    status('PRESS ME');
  }
}

class TestWidget extends StatelessWidget {
  TestWidget({super.key});
  final TestController controller = Get.put(TestController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            controller.updateDetails();
          },
          child: Obx(() {
            print('Redrawing text');
            return Text(controller.status.value);
          }),
        ),
      ),
    );
  }
}

Below I have a very simple GetX project that should basically load some data on button press asynchronously. However, I would like the button to change from 'PRESS ME' to 'LOADING' whilst the data is fetched. I cannot get my head around why the widget is not rebuilt when I change the observable status variable. Am I missing a fundamental concept here? The widget clearly does get re-drawn after the async method updateDetails finishes, but not when I change 'status' within the method...? Many thanks.

void main() async {
  runApp(TestApp());
}

class TestApp extends StatelessWidget {
  const TestApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: appTheme,
      home: TestWidget(),
    );
  }
}

class TestController extends GetxController {
  var status = 'PRESS ME'.obs;
    
  updateDetails() async {
    print('Loading');
    status('LOADING');
    sleep(1.seconds);
    print('Finished');
    status('PRESS ME');
  }
}

class TestWidget extends StatelessWidget {
  TestWidget({super.key});
  final TestController controller = Get.put(TestController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            controller.updateDetails();
          },
          child: Obx(() {
            print('Redrawing text');
            return Text(controller.status.value);
          }),
        ),
      ),
    );
  }
}

• flutter
• observable
• flutter-getx

Share Improve this question Follow asked Mar 4 at 12:44 PinocchioPinocchio 7566 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

sleep is not the way to wait in Flutter. Use awaiting a Future.delayed instead. So instead of

sleep(1.seconds);

do

await Future.delayed(1.seconds);

instead

As per you imolementation, it is all correct and data ia being updated. But you cannot see the update on the UI, this is happening because you varibales value is being updated too frequently, that is in a very sort time, it changes the value

   print('Loading');
    status('LOADING');
    sleep(1.seconds);
    print('Finished');
    status('PRESS ME');

it will first assign the Loading then i suppose to wait for 1 second which is not correct and the issue is in this line only, since it will not wait for 1 second, so the value of the variable will again change to Finished and this is the reason why you cannot see the UI change.

To make flutter wait for some time you need to use the Future function.

await Future.deleayed(1.second);