Flutter动态加载与显示插件loader_plus的使用

Flutter动态加载与显示插件loader_plus的使用

有时在构建小部件之前需要加载一些数据。由于 initState 不支持异步加载，因此需要找到另一种方法来加载数据。最常见的方式是使用 FutureBuilder，但这种方式较为繁琐。另一种方式是使用标志来重建小部件，以便在所有加载完成后重新渲染。

Loader 使用标志方法。

LoadingMixin

LoadingMixin 为您的状态小部件的状态添加了所有必要的标志，使其类似于 FutureBuilder 小部件。

load 在第一次 didChangeDependencies 之前被调用，因此您可以使用 context 访问继承的小部件。

有两个标志：

  1. loading: 如果 load 函数仍在运行，则为 true
  2. hasError: 如果 load 函数抛出了异常，则为 true

异常文本存储在 error 变量中。

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with LoadingMixin<HomePage> {
  Data _data;

  [@override](/user/override)
  Future<void> load() async {
    var loader = FileLoader();
    _data = await loader.loadData();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget body;
    if (loading) {
      body = Container();
    } else if (hasError) {
      body = Text(error);
    } else {
      body = DataViewer(_data);
    }
    
    return Scaffold(
      appBar: AppBar(),
      body: body,
    );
  }
}

StatelessLoadingMixin

为了使此混合工作，您需要删除 build 方法并使用 futureBuild 方法代替。

class FutureText extends StatelessWidget with StatelessLoadingMixin {
  final Future<String> futureText;
  final TextStyle style;

  FutureText(this.futureText, {this.style});

  String text;

  [@override](/user/override)
  Future<void> load() async {
    text = await futureText;
  }

  [@override](/user/override)
  Widget futureBuild(BuildContext context) {
    return Text(
      text,
      style: style,
    );
  }
}

Loader

Loader 是一个使用 LoadingMixin 混合的小部件。

该小部件将在 load 函数完成之后运行其生成器方法。

生成器将从 load 函数返回的值作为 value 参数传递。

class Banner extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Loader<String>(
          load: () async {
            return await retriveBannerText();
          },
          builder: (context, value) {
            return Text(value);
          },
          errorBuilder: (error) => Text(error, style: TextStyle(color: Colors.red)),
        ),
      ),
    );
  }
}

更多关于Flutter动态加载与显示插件loader_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态加载与显示插件loader_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


loader_plus 是一个 Flutter 插件，用于在应用程序中动态加载和显示加载指示器。它可以帮助你在异步操作（如网络请求或耗时计算）期间显示加载动画，以改善用户体验。

以下是使用 loader_plus 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 loader_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  loader_plus: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本使用

loader_plus 提供了一个 LoaderPlus 小部件，你可以在需要显示加载指示器的地方使用它。

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  Future<void> _fetchData() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loader Plus Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _isLoading ? null : _fetchData,
              child: Text('Fetch Data'),
            ),
            SizedBox(height: 20),
            if (_isLoading)
              LoaderPlus(
                size: 50,
                color: Colors.blue,
              ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

3. 自定义加载指示器

你可以通过 LoaderPlus 的 loader 参数来自定义加载指示器。例如，使用 CircularProgressIndicator 或 LinearProgressIndicator：

LoaderPlus(
  loader: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  ),
)

4. 全局加载指示器

loader_plus 还支持全局加载指示器，你可以在任何地方显示和隐藏它。例如：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<void> _fetchData() async {
    LoaderPlus.show(context); // 显示全局加载指示器

    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));

    LoaderPlus.hide(); // 隐藏全局加载指示器
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loader Plus Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyHomePage(),
));

5. 其他功能

loader_plus 还支持其他功能，如自定义加载指示器的尺寸、颜色、背景等。你可以根据项目需求进行配置。

LoaderPlus(
  size: 100,
  color: Colors.green,
  backgroundColor: Colors.black54,
)
回到顶部