Flutter屏幕加载动画插件screen_loader的使用

Flutter 是一个用于开发跨平台移动应用的强大框架，而 screen_loader 插件为 Flutter 应用提供了优雅且高效的屏幕加载动画解决方案。本文将详细介绍如何使用 screen_loader 插件，并提供完整的示例代码。

Why ScreenLoader?

• 无需更新小部件状态：借助 stream_mixin，在不更新小部件状态的情况下显示和隐藏加载器，提高性能。
• 不影响导航栈：不会向导航栈中推送任何小部件，有助于保持导航栈和上下文的整洁。
• 易于使用：只需使用带有 ScreenLoader 混入（mixin）的屏幕，并用 loadableWidget 包装小部件即可。
• 自定义加载器：可以使用任何小部件作为加载器。
• 全局配置：可以一次性为所有屏幕配置相同的加载器，也可以为不同屏幕配置不同的加载器。

Basic Usage

1. 使用 ScreenLoader 混入：将你的屏幕与 ScreenLoader 混入一起使用。
2. 包装小部件：用 loadableWidget 包装你想要添加加载动画的小部件。
3. 执行异步任务：使用 performFuture 函数，在执行异步任务时显示加载器。

配置单个屏幕的不同加载器

通过重写 loader() 方法来自定义每个屏幕的加载器：

loader() {
    // 这里可以是任意小部件
    return AlertDialog(
        title: Text('Wait.. Loading data..'),
    );
}

为所有屏幕一次性配置加载器

在 main() 函数中调用 configScreenLoader() 来设置全局加载器：

void main() {
  configScreenLoader(
    loader: AlertDialog(
      title: Text('Global Loader..'),
    ),
    bgBlur: 20.0,
  );
  runApp(MyApp());
}

加载器优先级（从高到低）

1. 本地加载器：在小部件中重写的加载器。
2. 全局加载器：在 configScreenLoader() 中指定的加载器。注意：如果没有重写 loader()，则会使用此加载器。
3. 默认加载器：如果未指定全局加载器或重写本地加载器，则使用默认加载器。

迁移指南至4.0.0版本

• 移除了 ScreenLoaderApp 小部件。现在不需要再用任何小部件来包装应用程序以设置全局配置，而是直接在 runApp() 之前调用 configScreenLoader()。
• 不再替换 build 函数为 screen，而是继续使用 build 函数，并用 loadableWidget 包装需要显示加载器的小部件。

示例代码

以下是一个完整的示例代码，展示了如何使用 screen_loader 插件：

import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';

void main() {
  configScreenLoader(
    loader: AlertDialog(
      title: Text('Global Loader..'),
    ),
    bgBlur: 20.0,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Screen Loader',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Screen(),
    );
  }
}

class Screen extends StatefulWidget {
  @override
  _ScreenState createState() => _ScreenState();
}

/// 有状态的屏幕
class _ScreenState extends State<Screen> with ScreenLoader {
  @override
  loader() {
    return AlertDialog(
      title: Text('Wait.. Loading data..'),
    );
  }

  @override
  loadingBgBlur() => 10.0;

  Widget _buildBody() {
    return Center(
      child: Icon(
        Icons.home,
        size: MediaQuery.of(context).size.width,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return loadableWidget(
      child: Scaffold(
        appBar: AppBar(
          title: Text('ScreenLoader Example'),
        ),
        body: _buildBody(),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await this.performFuture(NetworkService.getData);
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

/// 无状态的屏幕
class BasicScreen extends StatelessWidget with ScreenLoader {
  BasicScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return loadableWidget(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Basic ScreenLoader Example'),
        ),
        body: Center(
          child: Icon(
            Icons.home,
            size: MediaQuery.of(context).size.width,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            await this.performFuture(NetworkService.getData);
          },
          child: Icon(Icons.refresh),
        ),
      ),
    );
  }
}

class NetworkService {
  static Future getData() async {
    return await Future.delayed(Duration(seconds: 2));
  }
}

希望这篇文章能够帮助你更好地理解和使用 screen_loader 插件。如果你有任何问题或建议，请随时在 GitHub 上提交 Issue 或 Pull Request。