flutter透明模态进度框

最新推荐文章于 2024-11-02 09:43:20 发布

原创

最新推荐文章于 2024-11-02 09:43:20 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dart #flutter

本文介绍如何在Flutter中实现一个没有背景阴影的AlertDialog，并提供了一个可选标题及圆形进度条的加载对话框组件。通过自定义PageRouteBuilder和MaterialType.transparency来达到完全透明的效果。

用Dialog本身的backgroundColor: Colors.transparent，总是会有个半透明的黑底，十分难看+恶心，flutter的坑

比如：

AlertDialog dlg = AlertDialog(
  key: _keyProgress,
  backgroundColor: Colors.transparent,
  title: Text(title),
  content: ...

网上找了个，自己修改了下，原来不支持标题，加了可选标题，并且改成了圆形进度条

原帖地址：https://www.jianshu.com/p/421ce2746941

效果如图：标题是可选的，如果不写标题，则只显示圆形进度，你也可以改成自己钟意的样式

用法：

Loading.show(context, title: 'some title');
Loading.close(context);

代码：

import 'package:flutter/material.dart';

class DialogRouter extends PageRouteBuilder{

  final Widget page;

  DialogRouter(this.page) : super(
    opaque: false,
    barrierColor: Color(0x00000001),
    barrierDismissible: false,
    pageBuilder: (context, ani