Flutter加载覆盖层插件loading_overlay_pro的使用

loading_overlay_pro 是一个为Flutter项目提供简单包装和一系列加载动画的小部件。它允许开发者轻松地在应用中添加加载指示器，以提高用户体验。

快速开始

首先，在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  loading_overlay_pro: ^最新版本号

然后将文件导入到您的项目中：

import 'package:loading_overlay_pro/loading_overlay_pro.dart';

接下来，您可以在需要的地方使用 LoadingOverlayPro 小部件。下面是一个简单的例子，展示了如何使用这个插件：

LoadingOverlayPro({
  Key key,
  @required this.isLoading, // 是否显示加载层
  @required this.child,     // 加载层下的子组件
  this.colorBackground = Colors.black54, // 加载层背景颜色，默认为半透明黑色
  this.progressIndicator = const LoadingBouncingLine.circle(), // 加载时显示的动画，默认为圆形弹跳线动画
});

您可以进一步自定义加载动画，例如：

LoadingBouncingLine.circle(
  borderColor: Colors.cyan,
  borderSize: 3.0,
  size: 120.0,
  backgroundColor: Colors.cyanAccent,
  duration: Duration(milliseconds: 500),
);

还可以添加头部和底部文本：

headerLoading: Text("App Name"),
bottomLoading: Text("Loading..."),

更多定制化选项，请参考加载动画文件中的说明。

注意：所有动画都可以通过调用类似 LoadingBouncingLine.square() 的方法直接使用，并且许多基本动画默认包含 .circle() 和 .square() 变体。

示例代码

这里提供了一个完整的示例应用程序，演示了如何使用 loading_overlay_pro 插件创建带有加载覆盖层的页面。

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:loading_overlay_pro/loading_overlay_pro.dart';

void main() => runApp(LoadingApp());

class LoadingApp extends StatelessWidget {
  const LoadingApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: MyApp(),
      ),
    );
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void _openPage(Widget page) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => page,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Overlay Pro'),
        backgroundColor: Colors.blue,
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            child: Text("Loading overlay"),
            onPressed: () => _openPage(LoadingOverlayPage()),
          ),
          SizedBox(height: 50),
          ElevatedButton(
            child: Text("Loading Percent"),
            onPressed: () => _openPage(PercentPage()),
          ),
        ],
      ),
    );
  }
}

class LoadingOverlayPage extends StatefulWidget {
  @override
  _LoadingOverlayPageState createState() => _LoadingOverlayPageState();
}

class _LoadingOverlayPageState extends State<LoadingOverlayPage> {
  bool _isLoading = false;
  bool _isIOS = false;
  final Duration duration = Duration(seconds: 3);

  void _submit() {
    setState(() {
      _isLoading = true;
    });

    Future.delayed(duration, () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Overlay'),
        backgroundColor: Colors.blue,
      ),
      body: LoadingOverlayPro(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                onPressed: () {
                  _isIOS = false;
                  _submit();
                },
                child: Text('Show Loading BouncingLine'),
              ),
              ElevatedButton(
                onPressed: () {
                  _isIOS = true;
                  _submit();
                },
                child: Text('Show Loading Custom IOS'),
              ),
            ],
          ),
        ),
        backgroundColor: _isIOS ? Colors.white : Colors.black54,
        isLoading: _isLoading,
        progressIndicator: _isIOS
            ? CupertinoActivityIndicator(radius: 100)
            : LoadingBouncingLine.circle(
                backgroundColor: Colors.blue,
                size: 150.0,
                duration: Duration(seconds: 2),
                borderColor: Colors.blue,
              ),
        overLoading: _isIOS
            ? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  FlutterLogo(),
                  SizedBox(width: 10),
                  Text(
                    "Loading Overlay Pro",
                    style: TextStyle(fontSize: 20.0),
                  ),
                ],
              )
            : null,
        bottomLoading: _isIOS
            ? Text("Loading...", style: TextStyle(fontSize: 20.0))
            : null,
      ),
    );
  }
}

class PercentPage extends StatefulWidget {
  @override
  _PercentPageState createState() => _PercentPageState();
}

class _PercentPageState extends State<PercentPage> {
  bool _isLoading = false;
  final Duration duration = Duration(seconds: 10);

  void _submit() {
    setState(() {
      _isLoading = true;
    });

    Future.delayed(duration, () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Percent'),
        backgroundColor: Colors.blue,
      ),
      body: LoadingPercentage(
        timer: duration,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                onPressed: () {
                  _submit();
                },
                child: Text('Show Loading Download 10s'),
              ),
            ],
          ),
        ),
        backgroundColor: Colors.black54,
        isLoading: _isLoading,
      ),
    );
  }
}

此示例展示了两个不同类型的加载页面：“Loading overlay” 使用了标准的 LoadingOverlayPro 组件，而 “Loading Percent” 则展示了带有进度百分比的加载界面。通过点击按钮可以触发加载状态，并在指定时间后自动关闭加载层。