suggestion: Navigator 2.0 / Router support

[cpboyd]

Per https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

It seems that there should be MaterialWithModalsPage to match the new MaterialPage and possibly a simplified Route wrapper... Maybe making _CupertinoBottomSheetContainer or something similar public.

See:

const double _behind_widget_visible_height = 10;

/// Cupertino Bottom Sheet Container
///
/// Clip the child widget to rectangle with top rounded corners and adds
/// top padding(+safe area padding). This padding [_behind_widget_visible_height]
/// is the height that will be displayed from previous route.
class _CupertinoBottomSheetContainer extends StatelessWidget {
  final Widget child;
  final Color backgroundColor;
  final Radius topRadius;

  const _CupertinoBottomSheetContainer(
      {Key key, this.child, this.backgroundColor, @required this.topRadius})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final topSafeAreaPadding = MediaQuery.of(context).padding.top;
    final topPadding = _behind_widget_visible_height + topSafeAreaPadding;

    final shadow =
        BoxShadow(blurRadius: 10, color: Colors.black12, spreadRadius: 5);
    final _backgroundColor =
        backgroundColor ?? CupertinoTheme.of(context).scaffoldBackgroundColor;
    return Padding(
      padding: EdgeInsets.only(top: topPadding),
      child: ClipRRect(
        borderRadius: BorderRadius.vertical(top: topRadius),
        child: Container(
          decoration:
              BoxDecoration(color: _backgroundColor, boxShadow: [shadow]),
          width: double.infinity,
          child: MediaQuery.removePadding(
            context: context,
            removeTop: true, //Remove top Safe Area
            child: child,
          ),
        ),
      ),
    );
  }
}

class BookDetailsPage extends Page {
  final Book book;

  BookDetailsPage({
    this.book,
  }) : super(key: ValueKey(book));

  @override
  Route createRoute(BuildContext context) {
    return CupertinoModalBottomSheetRoute(
      settings: this,
      containerBuilder: (context, _, child) => _CupertinoBottomSheetContainer(
        child: child,
        backgroundColor: Colors.transparent,
        topRadius: const Radius.circular(12),
      ),
      builder: (context, scrollController) {
        return BookDetailsScreen(
          book: book,
          scrollController: scrollController,
        );
      },
      expanded: false, // <-- should probably be default as it is in showCupertinoModalBottomSheet
    );
  }
}

[cpboyd]

This seems to work as a MaterialWithModalsPage, but might be more ideal to create a mixin to reduce duplicate code from MaterialWithModalsPageRoute: https://gist.github.com/cpboyd/fc13020371b71c02502dd4def64e985c

[cpboyd]

I've created a simplified Route wrapper as well: https://gist.github.com/cpboyd/864524e80c80aec9aa400ec09652ca24

[jamesblasco]

Thanks @cpboyd I think is a great idea, I will take a look more in deep as soon as i can

[azverinus]

I made pages according to these examples, but when I try to add a page with a dialog to the pages array, I get an animation error

════════ Exception caught by widgets library ═══════════════════════════════════ The following assertion was thrown building MainNavigatorPage(state: _MainNavigatorPageState#b6409): 'package:flutter/src/animation/animation_controller.dart': Failed assertion: line 246 pos 15: 'vsync != null': is not true.

Page returns SimpleCupertinoModalRoute from example

[cpboyd]

@azverinus Are you using a custom animation transition?

[azverinus]

I don't use custom transitions (TransitionDelegate)

sample page code:

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

class DialogPage extends Page {
  final String name;
  final Widget child;

  DialogPage({this.child, this.name}) : super(key: ValueKey(name));

  @override
  Route createRoute(BuildContext context) {
    return SimpleCupertinoModalRoute(
      builder: (context, scrollController) => child,
    );
  }
}

and SimpleCupertinoModalRoute from example above

maybe I'm doing something wrong?

[cpboyd]

@azverinus I don't see any differences from my code with regards to your Page, but the error was thrown on MainNavigatorPage.

I know that I had seen issues with the Navigator 2.0 example from Medium as it had a custom transitionDelegate, but you don't have the same issue that I did.

Navigator 2.0 is still new, so it might be worth trying to track down the issue and file an issue on Flutter's Github.

[jamesblasco]

Also if you send us a code with the reproducible issue we might help find the problem. But it is quite hard like this

[gibahjoe]

HI, when will support for Nav2.0 be added?

[furaiev]

Hi guys, do we have any working method for Router? Can't make it work with correct background animations using auto_route.

[bartekpacia]

I need this feature as well. Great package, just missing this one crucial thing.