摆脱 Nested Flutter Navigator 2.0 的提升

Question

尝试将 Navigation 2.0 用于 Web 项目。我添加了嵌套导航器，但我不喜欢嵌套导航器附带的高度。

Ugly elevation

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Router(
        routerDelegate: AuthenticationRouterDelegate(),
        backButtonDispatcher: RootBackButtonDispatcher(),
      ),
    );
  }
}

class AuthenticationRouterDelegate extends RouterDelegate with ChangeNotifier {
  bool isAuthenticated = false;
  final GlobalKey<NavigatorState> navigatorKey;

  AuthenticationRouterDelegate() : navigatorKey = GlobalKey<NavigatorState>();

  @override
  Future<bool> popRoute() async {
    print('popRoute AuthenticationRouterDelegate');
    MoveToBackground.moveTaskToBack();
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      observers: [HeroController()],
      pages: [
        MaterialPage(
          key: ValueKey('MyHomePage'),
          child: MyAuthenticationWidget(
            onPressed: () {
              isAuthenticated = true;
              notifyListeners();
            },
          ),
        ),
        if (isAuthenticated)
          MaterialPage(
            key: ValueKey('NestedNavigatorPage'),
            child: NestedRouterWidget(),
          ),
      ],
      onPopPage: (route, result) {
        print('onPopPage AuthenticationRouterDelegate');
        if (!route.didPop(result)) return false;

        isAuthenticated = false;
        notifyListeners();
        return true;
      },
    );
  }

  // We don't use named navigation so we don't use this
  @override
  Future<void> setNewRoutePath(configuration) async => null;
}

class MyAuthenticationWidget extends StatelessWidget {
  final VoidCallback onPressed;

  MyAuthenticationWidget({required this.onPressed}) : super();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Side block'),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Center(
              child: NestedRouterWidget(),
            ),
          )
        ],
      ),
    );
  }
}

class NestedRouterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final childBackButtonDispatcher =
        ChildBackButtonDispatcher(Router.of(context).backButtonDispatcher!);
    childBackButtonDispatcher.takePriority();
    return Router(
      routerDelegate: NestedRouterDelegate(),
      backButtonDispatcher: childBackButtonDispatcher,
    );
  }
}

final GlobalKey<NavigatorState> _nestedNavigatorKey =
    GlobalKey<NavigatorState>();

class NestedRouterDelegate extends RouterDelegate with ChangeNotifier {
  int selectedIndex = 0;

  @override
  Future<bool> popRoute() async {
    print('popRoute NestedRouterDelegate');
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _nestedNavigatorKey,
      observers: [HeroController()],
      pages: [
        if (selectedIndex == 0)
          MaterialPage(
            key: ValueKey('ProfilePage'),
            child: ProfileWidget(
              onPressed: () {},
            ),
          ),
        if (selectedIndex == 1)
          MaterialPage(
            key: ValueKey('NestedNavigatorPage'),
            child: SettingWidget(),
          ),
      ],
      onPopPage: (route, result) {
        print('onPopPage NestedRouterDelegate');
        return false;
      },
    );
  }

  // We don't use named navigation so we don't use this
  @override
  Future<void> setNewRoutePath(configuration) async => null;
}

class ProfileWidget extends StatelessWidget {
  final VoidCallback onPressed;
  ProfileWidget({required this.onPressed}) : super();

  @override
  Widget build(BuildContext context) {
    // omit
  }
}

class SettingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // omit
  }
}

完整源代码 GitHub 此处 https://github.com/AndrewPiterov/flutter_web_nested_navigator/blob/main/lib/main.dart

如何移除这个高度？谢谢！

Answer 1

最后，想出解决方案是将 fullscreenDialog 设置为 true

MaterialPage(
  key: ValueKey('ProfilePage'),
  fullscreenDialog: true,
  child: ProfileWidget(
    onPressed: () {},
  ),
),

摆脱 Nested Flutter Navigator 2.0 的提升

Rid of elevation of Nested Flutter Navigator 2.0

flutter

flutter-web