我正在尝试在活动之上创建一个透明的全屏对话框。我已尝试遵循此线程,但解决方案不起作用。
总之,我需要的是:
这是我的代码:
打开对话框
void onNextBtnClick(){
var route = new MaterialPageRoute(
builder: (BuildContext context) =>
new GenreDialogUI(),fullscreenDialog: true
);
Navigator.of(context).push(route);
}
对于对话框视图
import 'package:flutter/widgets.dart';
class HolePuncherPainter extends CustomPainter {
static final clearPaint = new Paint()
..color = Colors.transparent,
..blendMode = BlendMode.clear;
const HolePuncherPainter();
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class GenreDialogUI extends StatefulWidget {
@override
_GenreDialogUI createState() => new _GenreDialogUI();
}
class _GenreDialogUI extends State<GenreDialogUI> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: addAppbar(),
body: new CustomPaint(
painter: HolePuncherPainter(),
child: new Container(
color: Colors.transparent,
alignment: Alignment.center,
child: UtilCommonWidget.addText('Transparent Dialog', Colors.red, 22.0, 1),
),
),
);
}
}
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return YourFullScreenAlertDialog()
}
));
YourFullScreenAlertDialog 可以是一个具有背景颜色 Colors.transparent 的小部件,如前面提到的 @creativecreatorormaybenot。
对我来说以下工作有效:
showDialog(
context: context,
builder: (_) => Material(
type: MaterialType.transparency,
child: Center(
// Aligns the container to center
child: Container(
// A simplified version of dialog.
width: 100.0,
height: 56.0,
color: Colors.green,
child: Text('jojo'),
),
),
),
);
这是我的实现。
从第一个屏幕调用此。
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (_, __, ___) => const NoInternetScreen(),
opaque: false, ---->> opacity should be false
fullscreenDialog: true));
并在下一个屏幕中设置不透明度的背景颜色。
return Scaffold(
backgroundColor: white.withOpacity(0.85),
......
截图(
showGeneralDialog
):
代码:
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand(child: FlutterLogo()),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.open_in_new),
onPressed: () {
showGeneralDialog(
context: context,
barrierColor: Colors.black38,
barrierLabel: 'Label',
barrierDismissible: true,
pageBuilder: (_, __, ___) => Center(
child: Container(
color: Colors.white,
child: Material(
color: Colors.transparent,
child: Text('Dialog', style: TextStyle(color: Colors.black, fontSize: 40),),
),
),
),
);
},
),
);
}
万一,如果你想让整个屏幕透明......
return MaterialApp(
theme: ThemeData(
canvasColor: Colors.transparent,
scaffoldBackgroundColor: Colors.transparent,
),
);