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'),
),
),
),
);
}
}
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.
User contributions licensed under CC BY-SA 3.0