Widget won't pop when tapping barrier

1

I'm trying to create a floating Widget which has a modal barrier behind it. If user taps the barrier, the Widget should be popped. I have barrierDismissable set as true. I've also tied to look at Flutter ModalBottomSheets and Dialogs without luck.

I'm pretty much stuck here, I have no idea what I'm doing wrong.

import 'package:flutter/material.dart';

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

  @override
  // TODO: implement barrierColor
  Color get barrierColor => const Color(0x80000000);

  @override
  // TODO: implement barrierDismissible
  bool get barrierDismissible => true;

  @override
  // TODO: implement barrierLabel
  String get barrierLabel => null;

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return Material(
      type: MaterialType.transparency,
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return GestureDetector(
      onTap: () => print('t'),
      child: Align(
        alignment: Alignment.center,
        child: Container(
          color: Colors.red,
          height: 200,
          width: 200,
        ),
      ),
    );
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}

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'),
          ),
        ),
      ),
    );
  }
}
flutter
asked on Stack Overflow Jul 12, 2019 by user11568600

1 Answer

0

You cannot use a Material in your buildPage() method, since Material is opaque and will be rendered over the barrier, so you won't be able to tap on it.

answered on Stack Overflow Jul 12, 2019 by Hugo Passos

User contributions licensed under CC BY-SA 3.0