如何在活动之上创建一个透明的全屏对话框 - Flutter [英] How to create a transparent full screen dialog on top of activity - Flutter

问题描述

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

简而言之，我需要的是:

• 全屏对话框.
• 除了我用于对话框的小部件之外的透明背景

这是我的代码:

<块引用>

打开对话框

void onNextBtnClick(){var route = new MaterialPageRoute(builder: (BuildContext 上下文) =>新的流派对话UI()，全屏对话:真);Navigator.of(context).push(route);}

<块引用>

对于对话框视图

import 'package:flutter/widgets.dart';类 HolePuncherPainter 扩展 CustomPainter {静态最终 clearPaint = new Paint()..color = 颜色.透明，..blendMode = BlendMode.clear;常量 HolePuncherPainter();@覆盖无效油漆(帆布画布，尺寸大小){画布.drawRect(new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);}@覆盖bool shouldRepaint(CustomPainter oldDelegate) {返回真；}}类 GenreDialogUI 扩展 StatefulWidget {@覆盖_GenreDialogUI createState() =>新的 _GenreDialogUI();}class _GenreDialogUI 扩展了 State{@覆盖小部件构建(BuildContext 上下文){返回新的脚手架(appBar: addAppbar(),正文:新的自定义油漆(画家:HolePuncherPainter()，孩子:新容器(颜色:颜色.透明，对齐:对齐中心，child: UtilCommonWidget.addText('透明对话框', Colors.red, 22.0, 1),),),);}}

解决方案

Navigator.of(context).push(PageRouteBuilder(不透明:假，pageBuilder: (BuildContext 上下文, _, __) {返回 YourFullScreenAlertDialog()}));

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

I am trying to create a transparent full screen dialog on top of activity. I have tried following this thread but solution doesn't work.

In short , what I need is:

• full screen dialog.
• transparent background except for the widget I use for the dialog

here's my code:

To open dialog

void onNextBtnClick(){
    var route = new MaterialPageRoute(
        builder: (BuildContext context) =>
        new GenreDialogUI(),fullscreenDialog: true
    );
    Navigator.of(context).push(route);
}

For Dialog view

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 could be a widget that has a background color, Colors.transparent, like @creativecreatorormaybenot mentioned earlier.

这篇关于如何在活动之上创建一个透明的全屏对话框 - Flutter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！