Resize scaffold in flutter

Question

Project

Hi, I'm trying to make some custom transition in flutter between two simple screen. My goal is to use Navigator.push(context, MyRoute(..)) to call another the second screen on top of the first one. My problem is that I want the second screen to be only half size of the height of the device. The rest of the screen should only display the old page, maybe with some kind of blur. I'm searching for a BottomSheet style effect but without using the actual widget.

Problem

No matter what I try, when Navigator.push is called, the new screen will always be resized to fill the entire screen and I'm unable to get a smaller scaffold on top with some transparency to hide the old page.

Thanks

Answer 1

I think you can do something like the following. First create a transparent page route. Here is a class that extends the PageRoute class to create transparent page route so you can see what is behind it. It overrides the "opaque" value and sets it to false.

import 'package:flutter/widgets.dart';

/// Creates a route that leaves the background behind it transparent
///
///
class TransparentRoute extends PageRoute<void> {
  TransparentRoute({
    @required this.builder,
    RouteSettings settings,
  })  : assert(builder != null),
        super(settings: settings, fullscreenDialog: false);

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  Color get barrierColor => null;

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 350);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    final result = builder(context);
    return FadeTransition(
      opacity: Tween<double>(begin: 0, end: 1).animate(animation),
      child: Semantics(
        scopesRoute: true,
        explicitChildNodes: true,
        child: result,
      ),
    );
  }
}

Use that as your page route.

In the Scaffold that you want to navigate to you can do the following. This will make it so it only takes up half of the screen and shows the previous page behind it:

Navigator.of(context).push(
      TransparentRoute(
          builder: (context) => Scaffold(
                appBar: null,
                backgroundColor: Colors.transparent,
                body: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: MediaQuery.of(context).size.height / 2,
                    color: Colors.red,
                  ),
                ),
              )
      ),
);

If I understand your problem correctly I think this should do the trick!