如何在复杂的Flutter应用中实现BottomNavBar

时间:2020-06-08 05:46:20

标签: flutter dart flutter-layout

我有一个复杂的应用程序,只有几十个页面。我有一个自定义的导航器实现。如果可能的话,即使在不是带有导航图标的5个页面之一的页面上,我也希望bottom navbar可见。

我为BottomNavBar看过的所有教程和文章都是针对非常简单的2-5页的应用程序,没有真正的工作要做。我的页面有很多网络调用,图像,繁重的布局处理等。我无法一直在内存中加载30个页面。

我希望有人可以指出我的复杂实施方向。

这是我的main.dart:

void main() async {
  setupLocator();
  runApp(ChangeNotifierProvider<FSAppStateNotifier>(
    create: (context) => FSAppStateNotifier(),
    builder: (context, child) => FSApp(),
  ));
}

class FSApp extends StatefulWidget {
  @override
  _FSAppState createState() => _FSAppState();
}

class _FSAppState extends State<FSApp> {
  final AuthService _auth = locator<AuthService>();
  User _authUser;

  Future<void> waitForUser() async {
    await _auth.getSignedInUser().then((value) => setState(() => _authUser = value));
  }

  @override
  void initState() { 
    super.initState();
    waitForUser();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);

    return MaterialApp(
      builder: (context, child) => Navigator(
        key: locator<DialogService>().dialogNavigationKey,
        onGenerateRoute: (settings) => MaterialPageRoute(
            builder: (context) => DialogManager(child: child)),
      ),
      navigatorKey: locator<NavigationService>().navigationKey,
      theme: Themes.lightTheme,
      debugShowCheckedModeBanner: false,
      themeMode: _authUser.userData.darkMode ? ThemeMode.dark : ThemeMode.light,
      darkTheme: Themes.darkTheme,
      home: StartUp(),
      onGenerateRoute: generateRoute,
    );
  }
}

这是onGenerateRoute方法:

PageRoute _getPageRoute({RouteSettings routeSettings, Widget viewToShow}) {
  return PageRouteBuilder(
    settings: routeSettings,
    transitionDuration: Duration(milliseconds: 90),
    pageBuilder: (context, animation, secondaryAnimation) => viewToShow,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var tween = Tween(begin: begin, end: end);
      var offsetAnimation = animation.drive(tween);
      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
  );
}

viewToShow是我的StatefullStateless页面小部件的实例,该小部件具有自定义Scaffold

0 个答案:

没有答案