CODEWITHSUNDEEP
flutter
user11568600
user11568600

Reputation: 33

Widget won't pop when tapping barrier

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

Upvotes: 1

Views: 116

Answers (1)

Hugo Passos
Hugo Passos

Reputation: 8437

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.

Upvotes: 1

Related Questions