Support for ModalRoute

[ricksondpenha]

Hi, I've a requirement wherein during web (desktop mode) i want the page to look like a overlay modal instead of a complete page covering up the screen. I've tried using customTransitionPage where i made the barrier color transparent and opaque = false, but i am still not able to see the contents behind this page. It might be because the customPageTransition extends page and page route, we might need a new class for extending ModalRoute to overlay widgets in such cases.

this code for modal route works for me, is there any way to bake in this feature in go_router itself?

class TutorialOverlay extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'This is a nice overlay',
            style: TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Dismiss'),
          )
        ],
      ),
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}

// Example application:
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  void _showOverlay(BuildContext context) {
    Navigator.of(context).push(TutorialOverlay());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: RaisedButton(
            onPressed: () => _showOverlay(context),
            child: Text('Show Overlay'),
          ),
        ),
      ),
    );
  }
}```

[csells]

I'm happy to consider a PR.

On Fri, Oct 29, 2021, 9:39 PM Rickson Dpenha @.***> wrote:

Hi, I've a requirement wherein during web (desktop mode) i want the page to look like a overlay modal instead of a complete page covering up the screen. I've tried using customTransitionPage where i made the barrier color transparent and opaque = false, but i am still not able to see the contents behind this page. It might be because the customPageTransition extends page and page route, we might need a new class for extending ModalRoute to overlay widgets in such cases.

this code for modal route works for me, is there any way to bake in this feature in go_router itself?

class TutorialOverlay extends ModalRoute { @override Duration get transitionDuration => Duration(milliseconds: 500);

@override bool get opaque => false;

@override bool get barrierDismissible => false;

@override Color get barrierColor => Colors.black.withOpacity(0.5);

@override String get barrierLabel => null;

@override bool get maintainState => true;

@override Widget buildPage( BuildContext context, Animation animation, Animation secondaryAnimation, ) { // This makes sure that text and other content follows the material style return Material( type: MaterialType.transparency, // make sure that the overlay content is not cut off child: SafeArea( child: _buildOverlayContent(context), ), ); }

Widget _buildOverlayContent(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Text( 'This is a nice overlay', style: TextStyle(color: Colors.white, fontSize: 30.0), ), RaisedButton( onPressed: () => Navigator.pop(context), child: Text('Dismiss'), ) ], ), ); }

@override Widget buildTransitions( BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) { // You can add your own animations for the overlay content return FadeTransition( opacity: animation, child: ScaleTransition( scale: animation, child: child, ), ); } }

// Example application: void main() => runApp(MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Playground', home: TestPage(), ); } }

class TestPage extends StatelessWidget { void _showOverlay(BuildContext context) { Navigator.of(context).push(TutorialOverlay()); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Test')), body: Padding( padding: EdgeInsets.all(16.0), child: Center( child: RaisedButton( onPressed: () => _showOverlay(context), child: Text('Show Overlay'), ), ), ), ); } }```

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/csells/go_router/issues/118, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATTAPOH5DYILVSLLKN3T43UJNZG5ANCNFSM5HAUDNNA .