Flutter加载器插件flutter_loader的使用

Flutter加载器插件flutter_loader的使用

flutter_loader 是一个用于简化资源加载的Flutter包。

开始使用

首先，导入库：

import 'package:flutter_loader/flutter_loader.dart';

然后，你可以通过以下方式构建一个用于加载资源的UI：

LoaderBuilder(
    loader: () async {
        await _loadResourceAsync();
    },
    builder: (context, controller, widget) {
        return _buildContent(context, controller, widget);
    }
)

或者使用默认的UI实现：

DefaultLoaderBuilder(
    loader: () => _loadResourceAsync(),
)

DefaultLoaderBuilder 提供了加载器生命周期的全阶段UI：

• 初始化：显示加载指示器。
• 加载中：显示加载指示器。
• 错误：显示错误消息并提供重新加载按钮。
• 加载完成：显示加载的数据文本。

你还可以选择性地提供 initBuilder、loadingBuilder、errorBuilder 和 loadedBuilder 来自定义每个状态的UI。也可以通过 themeData 自定义 DefaultLoaderBuilder 的样式。

示例代码

以下是完整的示例代码，演示如何使用 flutter_loader 插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: LoaderDemo(),
    );
  }
}

class LoaderDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Loader Demo'),
      ),
      body: DefaultLoaderBuilder(
        themeData: DefaultLoaderThemeData(
          errorMessageResolver: (error) =>
              '自定义错误消息解析器: $error',
        ),
        loader: () => Future.delayed(
          Duration(seconds: 3),
          () => 'Hello World',
        ),
        loadedBuilder: (context) {
          final controller = LoaderController.of(context)!;
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('${controller.data}'), // 显示加载的数据
                SizedBox(height: 10),
                ElevatedButton(
                  onPressed: () => controller.load(
                    () => Future.delayed(
                      Duration(seconds: 3),
                      () => Future.error('Oops'),
                    ),
                  ),
                  child: Text('触发错误'),
                ),
                ElevatedButton(
                  onPressed: () => controller.load(), // 重新加载
                  child: Text('重新加载'),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}