widget doesn't update when another controller state changed using getx

Question

Describe the bug I have two controllers ,the first one is LoginController which is to save user login state , the second is settingsController to manage app settings , I have a switcher button in the Settings widget to change user status (available,not available) , to do this i user Get.put , and it's worked to show the user status but the problem issued when i try to change the status , the settings widget doesn't changed it's status

**Reproduction code

class AppPages {
static const INITIAL = AppRoutes.RootURL;

static final routes = [

//Simple GetPage
GetPage(
  name: AppRoutes.HomePageURL,
  page: () => HomePage(),
  binding: BindingsBuilder(() => Get.lazyPut(() => HomeController())),
  transition: Transition.fade,
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.LoginPageURL,
  page: () => LoginPage(),
  binding: BindingsBuilder (() => Get.put<LoginController>(LoginController(), permanent: true)),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.RegisterPageURL,
  page: () => RegisterPage(),
  binding: BindingsBuilder(() => Get.lazyPut(() => RegisterController())),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.SettingsPageURL,
  page: () => SettingsPage(),
  binding: BindingsBuilder (() => Get.put<SettingsController>(SettingsController(), permanent: true)
  ),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.NotifiesPageURL,
  page: () => NotifiesPage(),
  binding: BindingsBuilder(
      () => Get.lazyPut(() => NotifiesController())
  ),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.OrdersPageUrl,
  page: () => OrdersPage(),
  binding: BindingsBuilder(
    () => Get.lazyPut(() => OrdersController())
  ),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.OrdersPageUrl,
  page: () => OrderContainerPage(),
  binding: BindingsBuilder(
    () => Get.lazyPut(() => OrdersController())
  ),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.OrderDetailsPageUrl,
  page: () => OrderDetailsPage(),
  binding: BindingsBuilder(() => Get.lazyPut(() => OrderDetailsController())),
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.ContactPageURL,
  page: () => ContactPage(),
  binding: BindingsBuilder(() => Get.lazyPut(() => ContactController())),
  transition: Transition.fade,
  parameter: {},
  middlewares: [],
  children: [],
),
GetPage(
  name: AppRoutes.PagesUrl,
  page: () => PostsPage(),
  binding: BindingsBuilder(() => Get.lazyPut(() => PostsController())),
  transition: Transition.fade,
  parameter: {},
  middlewares: [],
  children: [],
),
];
}

class SettingsPage extends GetView<SettingsController> {
  final user = Get.put(LoginController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body:  Obx(
    () => Container(
      height: 70,
      decoration: BoxDecoration(
        color: AppColors.primaryColor,
        backgroundBlendMode: BlendMode.softLight,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(
            "change status",
            style: AppStyles.primaryMediumTextStyle,
          ),
          _buildAvailableButton('Available', 1),
          _buildAvailableButton('Not Available', 0),
        ],
      ),
    ),
        )
    );
  }


  _buildAvailableButton(text, btnStatus) {
    return Container(
      alignment: Alignment.center,
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: 100, height: 35),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
              primary: user.userData.value.status ==  btnStatus
                  ? AppColors.primaryColor
                  : AppColors.secondaryColor,
              // AppColors.primaryColor, AppColors.secondaryColor
              shape: RoundedRectangleBorder(
                  side: BorderSide(
                      color: AppColors.primaryColor,
                      width: 1,
                      style: BorderStyle.solid),
                  borderRadius: BorderRadius.circular(65))),
          child: Text(text,
              style: user.userData.value.status ==  btnStatus
                  ? AppStyles.primaryCardText
                  : AppStyles.secondaryCardText),
          //  AppStyles.primaryCardText AppStyles.secondaryCardText
          // AppStyles.secondaryCardText
          onPressed: () async {
            user.userData.value.status =  btnStatus ;
          },
        ),
      ),
    );
  }
}

To Reproduce Steps to reproduce the behavior:

Click on _buildAvailableButton
user status does not changed

The Expected Behaviour When Change user status , Widget should rebuild to affect this change

Flutter Version: Flutter 2.0.5 Getx Version: get: ^4.1.4

Describe on which device you found the bug: ex: xiaomi Android.

Minimal reproduce code

     onPressed: () async {
        user.userData.value.status =  btnStatus ;
      },

Can you share your relevant Getx class? It's not clear if you properly implemented `user` to be observable. — Loren.A, May 01 '21 at 17:51
And the part of your UI you actually want updated because it appears you're only sharing the button and the settings page. The status you want updated is somewhere else in the app, is that correct? — Loren.A, May 01 '21 at 18:00

score 1 · Answer 1 · answered Apr 29 '21 at 09:33

Just wrap your ElevatedButton with Obx :

_buildAvailableButton(text, btnStatus) {
return Container(
  alignment: Alignment.center,
  child: ConstrainedBox(
    constraints: BoxConstraints.tightFor(width: 100, height: 35),
    child: Obx(()=> ElevatedButton(
      style: ElevatedButton.styleFrom(
          primary: user.userData.value.status ==  btnStatus
              ? AppColors.primaryColor
              : AppColors.secondaryColor,
          // AppColors.primaryColor, AppColors.secondaryColor
          shape: RoundedRectangleBorder(
              side: BorderSide(
                  color: AppColors.primaryColor,
                  width: 1,
                  style: BorderStyle.solid),
              borderRadius: BorderRadius.circular(65))),
      child: Text(text,
          style: user.userData.value.status ==  btnStatus
              ? AppStyles.primaryCardText
              : AppStyles.secondaryCardText),
      //  AppStyles.primaryCardText AppStyles.secondaryCardText
      // AppStyles.secondaryCardText
      onPressed: () async {
        user.userData.value.status =  btnStatus ;
      },
    ),
   ),
  ),
 );
}

i already do that man , but it removed accidently ,code updated — user1080247, Apr 29 '21 at 11:06
But you may have used Obx on the wrong place! Please do as suggested first and let me know the result. — S. M. JAHANGIR, Apr 30 '21 at 12:17
as i tell above i already updated the code in the question , the problem not with obx , i already use it and you can see the code — user1080247, Apr 30 '21 at 14:32
Oh! I think the user.userData.value.status (status) variable isn't observable. Is userData also a controller? It would be useful if you include code of your LoginController. — S. M. JAHANGIR, Apr 30 '21 at 17:44

widget doesn't update when another controller state changed using getx

1 Answers1