如何为Android平台的Flutter应用添加Loading Overlay？

一、处理启动阶段的白屏（原生层） #

如果是点击应用图标后，Flutter引擎初始化完成前的空白屏，这部分属于原生启动阶段，需要分别在Android和iOS端配置：

• Android：修改android/app/src/main/res/drawable/launch_background.xml，替换原有空白布局，添加ProgressBar或者Lottie动画组件，实现启动时的加载效果。
• iOS：编辑ios/Runner/Assets.xcassets/LaunchImage.imageset替换启动图，或者在LaunchScreen.storyboard中添加加载控件。

二、Flutter内部页面加载的Overlay #

如果是Flutter初始化完成后，首页加载数据时的空白，可以用以下两种方式实现加载Overlay：

1. 自定义简易Loading Overlay #

无需依赖第三方包，用Stack和Opacity就能快速实现：

class LoadingOverlay extends StatelessWidget {
  final bool isLoading;
  final Widget child;

  const LoadingOverlay({super.key, required this.isLoading, required this.child});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        if (isLoading)
          Opacity(
            opacity: 0.7,
            child: ModalBarrier(dismissible: false, color: Colors.grey[800]),
          ),
        if (isLoading)
          const Center(
            child: CircularProgressIndicator(color: Colors.white),
          ),
      ],
    );
  }
}

用法示例：在首页外层包裹该组件，通过加载状态控制显示：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟数据加载流程
    Future.delayed(const Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return LoadingOverlay(
      isLoading: _isLoading,
      child: Scaffold(
        appBar: AppBar(title: const Text('首页')),
        body: const Center(child: Text('首页内容')),
      ),
    );
  }
}

2. 使用第三方包简化实现 #

Flutter生态有现成的加载Overlay包可以直接用，比如loading_overlay：

• 先在pubspec.yaml添加依赖：

dependencies:
  loading_overlay: ^0.4.0

• 用法示例：

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return LoadingOverlay(
      isLoading: _isLoading,
      opacity: 0.7,
      color: Colors.grey[800],
      progressIndicator: const CircularProgressIndicator(color: Colors.white),
      child: Scaffold(
        appBar: AppBar(title: const Text('首页')),
        body: const Center(child: Text('首页内容')),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Abdi G