modal_bottom_sheet

modal_bottom_sheet copied to clipboard

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
    );
  }
}

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

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

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

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

@azverinus Are you using a custom animation transition?

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?

@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.

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

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

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

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