如何在Activity顶部创建一个透明的全屏对话框- Flutter

laximzn5 于 2022-11-30 发布在 Flutter

关注(0)|答案(4)|浏览(155)

我正在尝试在活动顶部创建一个透明的全屏对话框。我已经尝试了这个thread，但解决方案不起作用。
"简而言之，我需要的是“

全屏对话框。
透明背景，但用于对话框的小部件除外

下面是我代码：
打开对话框

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

flutter

来源：https://stackoverflow.com/questions/51258666/how-to-create-a-transparent-full-screen-dialog-on-top-of-activity-flutter

4条答案

按热度按时间

8fq7wneg1#

Navigator.of(context).push(PageRouteBuilder(
    opaque: false,
    pageBuilder: (BuildContext context, _, __) {
        return YourFullScreenAlertDialog()
    }
));

YourFullScreenAlertDialog可以是一个具有背景颜色的小部件，Colors.transparent，如@ creativecreator或可能前面没有提到的。

赞(0）回复(0）举报 2022-11-30

tp5buhyn2#

对我来说，以下是工作：

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

赞(0）回复(0）举报 2022-11-30

cygmwpex3#

屏幕截图（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),),
              ),
            ),
          ),
        );
      },
    ),
  );
}

赞(0）回复(0）举报 2022-11-30

kpbwa7wx4#

这是我的实现。
从第一个屏幕调用此。
导航器.push（上下文，PageRouteBuilder（页面构建器：（，，）=〉const无互联网屏幕（），不透明：false，----〉〉不透明度应为false全屏对话框：真））;
并在下一个屏幕设置背景颜色与不透明度。
返回脚手架（背景颜色：白色，不透明度0.85，
......
result

赞(0）回复(0）举报 2022-11-30

我来回答

如何在Activity顶部创建一个透明的全屏对话框- Flutter

4条答案

相关问题

热门标签

最新问答