在Flutter中显示透明对话框

t3psigkw  于 2023-03-03  发布在  Flutter
关注(0)|答案(5)|浏览(193)

我想在一个透明的对话框中用flutter显示一个图像。我把opaque设置为false并使用了MaterialType.transparency。当我打开对话框时,背景是黑色的。

class ShowProfileImage extends ModalRoute<void> {
  final String url;

  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black;

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  VoidCallback onDeleteImage;

  ShowProfileImage(String this.url);

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: InkWell(
            onTap: () => Navigator.of(context).pop(),
            child: Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors.transparent,
                child: Center(
                    child: Container(
                        width: 300,
                        child: Image(image: NetworkImageWithRetry(url)))))),
      ),
    );
  }
}
tmb3ates

tmb3ates1#

试试这个,这里我展示了一个来自资产的图像,如果你是从网络获取的,你也可以添加你的代码

showDialog(
                context: context,
                builder: (_) => new Dialog(
                  backgroundColor: Colors.transparent,
                  child: new Container(
                    alignment: FractionalOffset.center,
                    height: 80.0,
                    padding: const EdgeInsets.all(20.0),
                    child:  new Image.asset(
                      'assets/images/image.jpg',
                      fit: BoxFit.cover,
                    )
                  ),
                ));
wfauudbj

wfauudbj2#

给予showDialog一个透明的屏障颜色不是颜色。透明的,像颜色(0x00ffffff)

4zcjmb1e

4zcjmb1e3#

打电话吧

_showTransparentDialog(context);

实施:

Future<T> _showTransparentDialog<T>(BuildContext context) async {
  return await showDialog<T>(
    context: context,
    builder: (_) {
      return AlertDialog(
        backgroundColor: Colors.transparent,
        content: Image.asset('your_image_asset'),
      );
    },
  );
}
g6ll5ycj

g6ll5ycj4#

@TomaVista是正确的,如果您将屏障颜色设置为透明,将导致错误,请尝试颜色(0x 00 ffffff):

showDialog(context: context,
    //It doesnt work: barrierColor: Colors.transparent,
    barrierColor: Color(0x00ffffff), //this works
    builder: (_) {
      ////
    }
    );
c9qzyr3d

c9qzyr3d5#

您可以使用:

Dialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: ...
)

必须将高度设置为0,否则对话框下方会出现阴影。

相关问题