标签: flutter-navigation

在Flutter的嵌套导航器结构中,如何获得特定的导航器?

当我有Nested时,我遇到了这个问题Navigator。所以像

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/",
      routes: {
        '/': (context) => SomeOneView(),
        '/two': (context) => SomeTwoView(),
        '/three': (context) => SomeThreeView(),
      },
    );
  }
}

class SomeOneView extends StatefulWidget {
  @override
  _SomeOneViewState createState() => _SomeOneViewState();
}

class _SomeOneViewState extends State<SomeOneView> {
  @override
  Widget build(BuildContext context) {
   return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.indigo,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          MaterialButton(
            color: …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-navigation

9
推荐指数
2
解决办法
1456
查看次数

如何删除默认导航路线动画

我在颤振文档中给出的页面路由代码下面

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}
Run Code Online (Sandbox Code Playgroud)

但是它在推送和弹出路由时提供了一些动画。

对于Android,页面的入口过渡将页面向上滑动并淡入。出口过渡相同,但相反。

过渡适应平台,在iOS上,页面从右侧滑入反向退出。当另一个页面进入以覆盖它时,页面也会以视差向左移动。(这些方向在具有从右到左阅读方向的环境中翻转。)

有没有办法在没有任何动画的情况下路由到下一页?

编辑: 请检查整个代码:

class MyApp extends StatelessWidget {
  final routes = <String, WidgetBuilder>{
    SecondRoute.tag: (context) => SecondRoute(),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Routes",
      home: new FirstRoute(),
      routes: routes,
      onGenerateRoute: (routeSettings) {
        if (routeSettings.name == SecondRoute.tag)
          return PageRouteBuilder(pageBuilder: (_, a1, a2) => SecondRoute());

        return null;
      },
    );
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-animation flutter-navigation

9
推荐指数
2
解决办法
7629
查看次数

底部导航栏的 TabBarView 或 IndexedStack - Flutter

在颤动中做底部导航栏的最佳方法是什么?

根据获取到导航的颤振底部扑团队使用IndexedStackOffstage显示当用户更改标签的部件,但是我看到有做这个的另一种方式TabBarView,以简单的幻灯片动画控件之间的变化,也保持每个插件的滚动状态

那么IndexedStack+Offstage和之间有什么区别TabBarView?我应该使用类似的东西flutter_bloc还是只使用setState()?

flutter flutter-navigation

9
推荐指数
1
解决办法
2363
查看次数

在 Flutter 中使用嵌套 Navigator 和 WillPopScope

在我的应用程序中,我想要一个自定义导航(仅更改屏幕的一部分并保留我在其中执行的操作的历史记录)。为此,我使用了一个导航器,它对于简单的导航工作正常。但是,我想处理 Android 的后退按钮。Flutter 中显然存在问题,这迫使我处理导航器的父小部件中的后退按钮:https : //github.com/flutter/flutter/issues/14083

因此,我需要在子代中检索 Navigator 的实例并对其调用 pop()。我正在尝试为此使用 GlobalKey。

我现在正试图让它工作一段时间,并制作了一个示例项目来测试它。这是我的代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(title: 'Navigation Basics', home: MainWidget()));
}

class MainWidget extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: WillPopScope(
            onWillPop: () => navigatorKey.currentState.maybePop(),
            child: Scaffold(
                body: Padding(
              child: Column(
                children: <Widget>[
                  Text("Toto"),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                          child: RaisedButton(
                        child: Text('First'),
                        onPressed: () {
                          navigatorKey.currentState.pushNamed('/first');
                          // Navigator.push(
                          //   context,
                          //   MaterialPageRoute(builder: (context) => SecondRoute()),
                          // …
Run Code Online (Sandbox Code Playgroud)

routes back flutter flutter-navigation

8
推荐指数
1
解决办法
6119
查看次数

Flutter 2.0 PushAndRemoveUntil 不起作用

不知道实现 Flutter 2.0 路由后如何清除堆栈并路由到新页面。

以下内容不起作用:

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => SignInPage()), (route) => false);
Run Code Online (Sandbox Code Playgroud)

[VERBOSE-2:ui_dart_state.cc(186)] Unhandled Exception: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3075 pos 7: '!hasPage || isWaitingForExitingDecision': A page-based route cannot be completed using imperative api, provide a new list without the corresponding Page to Navigator.pages instead.

dart flutter flutter-navigation

8
推荐指数
2
解决办法
7817
查看次数

如何在 flutter web 中使用 Go Router 在浏览器后退按钮或 onReload 页面上显示警报对话框?

我正在开发 Flutter Web并使用go_router进行导航。

期望: 从初始路线开始,当用户尝试使用浏览器后退按钮导航回来或重新加载页面时,应显示一个警告框并询问“您确定要退出吗?” 用户交互页面上的消息类型允许退出或停留在同一页面上。

尝试过的方法:

1.WillPopScope:

我在 HomeRoute Widget 上添加了 WillPopScope 小部件来检测 popCallBack。但不知何故,按下后退按钮时不会触发它,因为我可能使用了 go_router 进行导航。

通过执行下面的语句,我无法在控制台 onBack 事件上打印日志。

return WillPopScope(
      onWillPop: () async {
        print("on Will Pop is Called");
        return false;
      },
      child: PaintScaffold(...)
);
Run Code Online (Sandbox Code Playgroud)

MaterialApp.router 的 BackButtonDispatcher 仅适用于 android,不适用于 web。所以这是行不通的。参考之。

2. onBeforeUnload 监听器

我尝试在index.html 文件中添加脚本来检测onBeforeUnload 事件。但它的行为却出人意料。它在 chrome 浏览器中工作正常,但在 safari 中,按下后退按钮时不会显示警报框。但要努力重新加载页面。

在 iOS safari 浏览器上,当页面卸载时,在任何情况下都不会触发 onBeforeUnload。

  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return …
Run Code Online (Sandbox Code Playgroud)

flutter gorouter flutter-navigation flutter-web flutter-go-router

8
推荐指数
1
解决办法
1142
查看次数

当已经在路由上时,如何使用 go_router 和 Firebase 身份验证处理 Flutter 中的身份验证?

在我的 Flutter 应用程序中,我使用该go_router包来管理路由和Firebase Authentication用户身份验证。我有几个屏幕需要用户经过身份验证才能访问,例如帐户管理、交易和详细信息。

目前,我已经实现了重定向,go_router以确保未经身份验证的用户被正确重定向。但是,当用户已经位于这些屏幕之一并注销或会话过期时,我面临着挑战。

我正在考虑使用 BlocListener 来检测每个屏幕上身份验证状态的变化,但这似乎会导致代码重复。由于 Firebase 身份验证,我还有一个 Stream 通知身份验证状态的更改,并更新变量contex.isUserSignIn

使用 go_router 和 Firebase 身份验证有效处理 Flutter 中的注销或会话过期事件的最佳实践是什么?

firebase-authentication flutter gorouter flutter-navigation flutter-go-router

8
推荐指数
1
解决办法
2293
查看次数

Flutter Navigator 2.0 页面过渡

我正在使用 Navigator 的声明式方法:

Navigator(
      pages: [
        MaterialPage(child: _screen),
      ],
      onPopPage: (route, result) {
        return route.didPop(result);
      },
);
Run Code Online (Sandbox Code Playgroud)

如何在屏幕之间添加过渡?

flutter flutter-navigation

7
推荐指数
1
解决办法
2332
查看次数

从 TabBar 选择更新 URL

我目前正在更新 Flutter Web 应用程序以支持通过 URL 共享页面。我目前有一个使用 的屏幕TabBar,并根据所选选项卡显示不同的视图。我希望能够做两件事:

  • 选择选项卡时更新 URL(例如附加&section=tabName到 URL)
  • 将 URL 粘贴到新的浏览器选项卡中,并在 URL 指定的选项卡上打开应用程序

第二部分非常简单,只需接受&section=...参数并使用它来设置选项initialIndex卡控制器。然而更新 URL 似乎相当困难。

我尝试使用RouteInformationParser从参数列表生成新路由,但这会触发回调onGenerateRoute,并且似乎只是重新导航到具有initialIndex从新 URL 更新的页面。TabBarView我可以通过用导航到所选选项卡内容的嵌套导航器替换 来解决这个问题,但如果您想导航到比所选选项卡更深的位置,这似乎很快就会变得相当笨重。

我见过提到的一个更简单的选项是window.history.replaceState,它看起来简单得多,但感觉有点混乱。有没有我错过的方法可以做到这一点?

谢谢!

flutter flutter-navigation flutter-web

7
推荐指数
1
解决办法
545
查看次数

go_router - 有没有办法将同一页面推送两次?

我正在使用go_router构建一个执行“虚拟”路由推送的应用程序(有点像 Twitter)。可以从一个页面开始/a,推送/b,然后/c,...然后再次推送/a

当页面被推送两次时,会assert失败:assert(!keyReservation.contains(key));这确保了密钥在Navigator.

有没有办法能够使用 go_router 推送两次同一页面?

这是一个小代码片段:

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(const MyApp());
}

final router = GoRouter(
  initialLocation: '/a',
  routes: [
    GoRoute(
      path: '/a',
      builder: (_, __) => const MyWidget(path: '/a'),
    ),
    GoRoute(
      path: '/b',
      builder: (_, __) => const MyWidget(path: '/b'),
    ),
  ],
);

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

  // This widget is …
Run Code Online (Sandbox Code Playgroud)

dart flutter flutter-navigation flutter-routes

7
推荐指数
1
解决办法
2268
查看次数