flutter 弹窗用跳转的方式实现背景全透明

参考
一般是用下面这种,带有背景颜色

class Loading {
    
    

  static void show(BuildContext context, {
    
    bool mateStyle}) {
    
    
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
    
    
        return WillPopScope(
            child: LoadingDialog(),
            onWillPop: () async {
    
    
              return Future.value(false);
            });
      },
    );
  }

  static void hide(BuildContext context) {
    
    
    Navigator.of(context).pop();
  }
}

class LoadingDialog extends Dialog {
    
    

  @override
  Widget build(BuildContext context) {
    
    
    return Material(
      //创建透明层
      type: MaterialType.transparency, //透明类型
      child: Center(
        //保证控件居中效果
        child: CupertinoActivityIndicator(
          radius: 18,
        ),
      ),
    );
  }

可用下面代码实现

class Loading {
    
    

  static void show(BuildContext context, {
    
    bool mateStyle}) {
    
    
    Navigator.of(context)
        .push(DialogRouter(LoadingDialog()));
  }

  static void hide(BuildContext context) {
    
    
    Navigator.of(context).pop();
  }
}

class LoadingDialog extends Dialog {
    
    

  @override
  Widget build(BuildContext context) {
    
    
    return WillPopScope(
        child: Material(
          //创建透明层
          type: MaterialType.transparency, //透明类型
          child: Center(
            //保证控件居中效果
            child: CupertinoActivityIndicator(
              radius: 18,
            ),
          ),
        ),
        onWillPop: () async {
    
    
          return Future.value(false);
        });
  }

import 'package:flutter/material.dart';

class DialogRouter extends PageRouteBuilder{
    
    

  final Widget page;

  DialogRouter(this.page)
      : super(
    opaque: false,
    barrierColor: Color(0x00000001),
    pageBuilder: (context, animation, secondaryAnimation) => page,
    transitionsBuilder: (context, animation, secondaryAnimation, child) => child,
  );
}
//打开
Loading.show(context);

//关闭
Loading.hide(context);

猜你喜欢

转载自blog.csdn.net/weixin_44911775/article/details/129465195
今日推荐