首页 文章

如何在活动之上创建透明的全屏对话框 - Flutter

提问于
浏览 次
3

我试图在活动之上创建一个透明的全屏对话框 . 我试过按照这个thread但解决方案不起作用 .

In short , what I need is:

  • 全屏对话框 .

  • 透明背景，但我用于对话框的小部件除外

这是我的代码：

打开对话框

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),
        ),
      ),
    );
  }
}
dart flutter flutter-layout

2 回答

  • 0

    Scaffold 有一个backgroundColor property . 您还需要将其透明化：

    Scaffold(
  backgroundColor: Colors.transparent,
  ...
);
    回复于
  • 0
    Navigator.of(context).push(PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) {
        return YourFullScreenAlertDialog()
    }
));

    YourFullScreenAlertDialog可以是具有背景颜色的小部件，Colors.transparent，如前面提到的@creativecreatorormaybenot .

    回复于

相关问题