如何在Flutter GetX的Obx中实现Google登录后跳转新页面及页面切换

1. Google账号登录后跳转新页面实现 #

你当前的代码逻辑是登录成功后在Obx中返回Avatar组件，所以只会在当前页替换展示内容，不会触发页面跳转，可通过以下两种方案修改：

方案A：在登录方法回调中直接跳转（更推荐） #

找到LoginController中处理谷歌登录的方法，在登录成功赋值googleAccount.value之后直接调用GetX路由跳转即可：

// LoginController 中的谷歌登录方法
Future<void> signInWithGoogle() async {
  try {
    final GoogleSignInAccount? account = await GoogleSignIn().signIn();
    if (account != null) {
      googleAccount.value = account;
      // 登录成功后跳转，offAll会清空之前的路由栈，防止用户手动退回登录页
      Get.offAll(() => const HomePage()); 
      // 若不需要清空路由栈，可替换为 Get.to(() => const HomePage())
    }
  } catch (e) {
    debugPrint(e.toString());
  }
}

该方式无需修改当前页面的Obx逻辑，如果你仍需要保留登录成功后在当前页展示Avatar的逻辑也不受影响。

方案B：在Obx中判断状态触发跳转 #

如果你要在UI层判断状态触发跳转，可修改Obx逻辑如下：

Obx(
  () {
    if (controller.googleAccount.value == null) {
      return buildLoginButton();
    } else {
      // 等待当前渲染帧结束后触发跳转，避免在build过程中执行跳转报错
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Get.offAll(() => const HomePage());
      });
      // 跳转前可自定义加载占位UI
      return const CircularProgressIndicator();
    }
  },
)

2. Obx中完成页面浏览切换操作 #

Obx本身是响应式状态监听组件，不直接负责页面切换，你只需在Obx的builder回调中根据监听的状态变量，触发GetX路由API或者切换当前页面挂载的子组件即可实现页面切换，通用逻辑如下：

• 首先在控制器中定义需要监听的页面状态变量，比如RxInt currentTabIndex = 0.obs
• 在Obx中根据状态值执行对应的跳转逻辑，或者切换当前页面展示的子组件
  示例代码：

// 控制器内定义
RxInt selectedPage = 0.obs;
final pages = [const HomePage(), const ProfilePage(), const SettingPage()];

// 页面中Obx使用
Obx(() => IndexedStack(
  index: controller.selectedPage.value,
  children: controller.pages,
))

后续点击底部导航切换页面时，只需修改selectedPage的值即可自动切换展示的子页面；如果是要跳转到独立的新页面，直接使用和登录跳转一致的Get.to/Get.off系列API即可。

内容的提问来源于stack exchange，提问作者zhyk