dart Flutter persistent sidebar

jhkqcmku  于 2023-11-14  发布在  Flutter
关注(0)|答案(2)|浏览(93)

在我的应用程序中,我希望有一个侧边栏,允许我访问应用程序中任何地方的特定功能。

  • 我想要的:*
  • 当我推送页面时,侧边栏仍然可见
  • 我可以pushNamed route或者用侧边栏函数打开一个modal
  • 我无法在某些页面上显示侧边栏
  • 我做什么:*


的数据
红色表示持久性sidebar,黄色表示my app content



如果我在HomeView中单击我的profil button,则会显示ProfilView,并且我的侧边栏仍然可见,因此没有问题



我的AppView

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

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: AppConfig.kAppName,
      debugShowCheckedModeBanner: false,
      theme: AppTheme().data,
      builder: (context, child) => SidebarTemplate(child: child), // => I create a template 
      onGenerateRoute: RouterClass.generate,
      initialRoute: RouterName.kHome,
    );
  }

字符串
我的SidebarTemplate:(显示侧边栏并使用我的路由器加载页面)

class SidebarTemplate extends StatelessWidget {
  final Widget? child;
  const SidebarTemplate({Key? key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body : Row(
          children: [
            SidebarAtom(), // => My sidebar Widget
            Expanded(
              child: ClipRect(
                  child: child! // => My view
              ),
            )
          ],
        )
      ),
    );
  }
}


我的RouterClass

abstract class RouterClass{

  static Route<dynamic> generate(RouteSettings settings){
    final args = settings.arguments;

    switch(settings.name){

      case RouterName.kHome:
        return MaterialPageRoute(
            builder: (context) => HomeView()
        );

      case RouterName.kProfil:
        return MaterialPageRoute(
            builder: (context) => ProfilView(title: "Profil",)
        );

      default:
        return MaterialPageRoute(
            builder: (context) => Error404View(title: "Erreur")
        );
    }
  }
}

  • 如何做:*
  • 因为我有一个错误,所以要从我的侧边栏用按钮pushNamed或打开一个modal
The following assertion was thrown while handling a gesture:
I/flutter (28519): Navigator operation requested with a context that does not include a Navigator.
I/flutter (28519): The context used to push or pop routes from the Navigator must be that of a widget that is a
I/flutter (28519): descendant of a Navigator widget.

  • 要隐藏侧边栏时,我想像SplashScreen例如
aiazj4mn

aiazj4mn1#

您可以使用NavigatorObserver来监听路由的变化。

class MyNavObserver with NavigatorObserver {
  final StreamController<int> streamController;

  MyNavObserver({required this.streamController});

  @override
  void didPop(Route route, Route? previousRoute) {
    if (previousRoute != null) {
      if (previousRoute.settings.name == null) {
        streamController.add(3);
      } else {
        streamController
            .add(int.parse(previousRoute.settings.name!.split('/').last));
      }
    }
  }

  @override
  void didPush(Route route, Route? previousRoute) {
    if (route.settings.name == null) {
      streamController.add(3);
    } else {
      streamController.add(int.parse(route.settings.name!.split('/').last));
    }
  }
}

字符串
使用StreamController,你可以通过将SidebarTemplate放在StreamBuilder中来修改它。这将满足你在问题中提到的所有要求。
看看here的例子。

xjreopfe

xjreopfe2#

Profil截图中可以看到,侧边栏不是Navigator的小部件子树的一部分(后退按钮只在配置文件小部件上)。这意味着您无法从侧边栏的context中找到Navigator。这是因为您在MaterialApp中使用builder,而inserts widgets above the navigator
这也是为什么你不能隐藏侧边栏时,你想显示一个启动画面。
您真的需要在MaterialApp上使用builder吗?然后您可以全局保存Navigator并从侧边栏. This is the first article when I search on DuckDuckGo访问它,您可以遵循。
要显示闪屏,你需要在AppView中添加一个状态,并更改builder函数。如果你问我,这不是很好。
我建议你重新考虑你的架构,在MaterialApp中去掉builder

相关问题