Flutter Getx如何在StreamBuilder中导航到其他页面

Question

我正在使用firebase_auth进行注册和登录。我正面临Streambuilder的问题。

我想显示页面取决于用户是否登录。它似乎运行良好。但是，问题是我不能使用Get.off("/app"(；在StreamBuilder和FutureBuilder中。如果我不能使用Getx.off('/app'(；用户只需按下后退按钮即可返回，并且我想避免这种情况，所以我尝试使用Get.off页面路由。

但是，正如vs代码所示，FutureBuilder和StreamBuilder的构建器返回Widget，我不知道如何编码。

对这件事有什么建议吗？

// main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return GetMaterialApp(
debugShowCheckedModeBanner: false,
title: 'Karrot Market Clone',
theme: ThemeData(
primaryColor: Colors.black,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
appBarTheme: AppBarTheme(
color: Colors.white,
),
),
initialBinding: InitBinding(),
initialRoute: '/',
getPages: [
GetPage(
name: '/',
page: () => BridgeFirebase(),
),
GetPage(
name: '/bridge_page',
page: () => BridgePage(),
),
GetPage(
name: '/app',
page: () => App(),
transition: Transition.rightToLeft,
),
GetPage(
name: '/start',
page: () => Start(),
),
GetPage(
name: '/login',
page: () => Login(),
transition: Transition.rightToLeft,
),
GetPage(
name: '/signup',
page: () => SignUp(),
transition: Transition.rightToLeft,
),
],
);
}
}

class BridgeFirebase extends StatelessWidget {
const BridgeFirebase({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return FutureBuilder(
future: Firebase.initializeApp(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(child: Text('Firebase load fail'));
}
if (snapshot.connectionState == ConnectionState.done) {
return BridgePage();
}
return Center(
child: CircularProgressIndicator(
color: ColorsKM.primary,
),
);
},
);
}
}

class BridgePage extends StatelessWidget {
const BridgePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (BuildContext context, AsyncSnapshot<User?> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Splash();
}
if (snapshot.hasData) {
return App();
} else {
return Start();
}
},
);
}
}

// app.dart
class App extends GetView<AppController> {
const App({Key? key}) : super(key: key);
Widget _bodyWidget() {
switch (RouteName.values[controller.currentIndex.value]) {
case RouteName.HOME:
return Home();
break;
case RouteName.MYLOCAL:
return MyLocal();
break;
case RouteName.NEARBY:
return Nearby();
break;
case RouteName.CHATS:
return Chats();
break;
case RouteName.MYKARROT:
return MyKarrot();
break;
}
return Container();
}
BottomNavigationBarItem _bottomNavigationBarItem(
String iconName, String label) {
return BottomNavigationBarItem(
icon: Padding(
padding: EdgeInsets.only(bottom: 5.0),
child: SvgPicture.asset('assets/svg/${iconName}_off.svg', width: 22),
),
activeIcon: Padding(
padding: EdgeInsets.only(bottom: 5.0),
child: SvgPicture.asset('assets/svg/${iconName}_on.svg', width: 22),
),
label: label,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Obx(
() {
return _bodyWidget();
},
),
bottomNavigationBar: Obx(
() => BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: controller.currentIndex.value,
selectedFontSize: 12.0,
showSelectedLabels: true,
selectedItemColor: Colors.black,
selectedLabelStyle: TextStyle(color: Colors.black),
onTap: controller.changePageIndex,
items: [
_bottomNavigationBarItem('home', 'home'),
_bottomNavigationBarItem('notes', 'neighbor'),
_bottomNavigationBarItem('location', 'nearby'),
_bottomNavigationBarItem('chat', 'chat'),
_bottomNavigationBarItem('user', 'my karrot'),
],
),
),
);
}
}

// app_controller.dart
enum RouteName {
HOME,
MYLOCAL,
NEARBY,
CHATS,
MYKARROT,
}
class AppController extends GetxService {
static AppController get to => Get.find();
late RxInt currentIndex = 0.obs;
void changePageIndex(int index) {
currentIndex(index);
}
}

Answer 1

因为在Streambuilder中导航时构建方法尚未完成，所以您可以延迟一段时间以完成构建方法，然后再导航。当您想在Streambuilder:中导航时，请执行此操作

Future.delayed(Duration.zero).then((value) => Get.off('/app'));

或者只是在控制器或群组类中导航。