在 flutter 中显示透明对话框

Question

我想在透明对话框中显示颤振图像。我已设置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)))))),
      ),
    );
  }
}

Answer 1

试试这个，这里我显示了来自资产的图像，如果您从网络获取，您也可以添加代码

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