Flutter项目如何在页面绘制完成后自动弹出弹框

270 阅读1分钟

Flutter项目如何在页面绘制完成后自动弹出弹框

代码片段

class _PageState extends State<Page> {
  @override
  void initState(){
    super.initState();
    Future.delayed(const Duration(seconds: 1), _modal);
  }
  
 
  Widget _modal(BuildContext context) {
    return showDialog(
      context: context,
      barrierColor: Colors.white.withAlpha(0),
      builder: (_) => const Dialog(
        backgroundColor: Colors.transparent,
        shadowColor: Colors.transparent,
      ),
    );
  }
}

这样写的话还是会有问题,因为我们只是延迟了执行,并不是页面真正渲染完成执行的,下面我们看看另一种方法

代码片段

class _PageState extends State<Page> {
  @override
  void initState(){
    super.initState();
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        showDialog(
          context: context,
          barrierColor: Colors.white.withAlpha(100),
          builder: _modal,
        );
     });
  }
  
 
  Widget _modal(BuildContext context) {
    return const Dialog(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
    );
  }
}

通过addPostFrameCallback,做一下安全操作,会在当前绘制完成之后回调。