Flutter动态加载内容插件loader_widget的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter动态加载内容插件loader_widget的使用

在本示例中，我们将展示如何使用 loader_widget 插件来动态加载内容。该插件可以帮助你处理异步数据加载，并且可以在加载过程中显示不同的状态（如加载中、成功、错误等）。

示例代码

首先，我们需要导入必要的库并创建一个基本的应用程序结构：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = StateController<String>();
  final loaderController = StateController<String>();

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadingData();
  }

  Future<void> _loadingData() async {
    const data = 'hi';
    try {
      for (var i = 0; i <= 10; i++) {
        controller.loading(progress: i.toDouble());
        await Future.delayed(const Duration(seconds: 1));
      }
      if (data.isEmpty) {
        return controller.empty();
      }
      controller.finished(data);
    } catch (e) {
      controller.error(e);
    }
  }

  Future<String> _loaderData() async {
    const data = 'hi';
    for (var i = 5; i <= 10; i++) {
      loaderController.loading(progress: i.toDouble());
      await Future.delayed(const Duration(seconds: 1));
    }
    if (data.isEmpty) {
      loaderController.empty();
      return '';
    }
    return data;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          LoaderWidget<String>(
            stateController: controller,
            emptyWidget: () {
              return const SizedBox.shrink();
            },
            errorWidget: (e) {
              return Text(e.toString());
            },
            loadingWidget: (progress) {
              return Stack(
                children: [
                  Positioned(
                    top: 10,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Text(
                      progress.toString(),
                      textAlign: TextAlign.center,
                      softWrap: true,
                    ),
                  ),
                  const CircularProgressIndicator.adaptive(),
                ],
              );
            },
            finishedWidget: (result) {
              return Text(result.toString());
            },
          ),
          const Divider(),
          LoaderWidget<String>(
            stateController: loaderController,
            loader: _loaderData,
            emptyWidget: () {
              return const SizedBox.shrink();
            },
            errorWidget: (e) {
              return Text(e.toString());
            },
            loadingWidget: (progress) {
              return Stack(
                children: [
                  Positioned(
                    top: 10,
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Text(
                      progress.toString(),
                      textAlign: TextAlign.center,
                      softWrap: true,
                    ),
                  ),
                  const CircularProgressIndicator.adaptive(),
                ],
              );
            },
            finishedWidget: (result) {
              return Text(result.toString());
            },
          ),
        ],
      ),
    );
  }
}

解释

初始化应用

在 main.dart 文件中，我们初始化了一个 MaterialApp 并设置了主页为 MyHomePage。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

主页面

MyHomePage 是一个 StatefulWidget，它包含了两个 LoaderWidget 来展示不同的加载状态。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

状态管理

在 _MyHomePageState 中，我们定义了两个 StateController 实例来管理数据的状态。我们还定义了一个 _loadingData 方法来模拟数据加载过程，并通过调用 _loadingData 在 initState 中启动加载。

class _MyHomePageState extends State<MyHomePage> {
  final controller = StateController<String>();
  final loaderController = StateController<String>();

  [@override](/user/override)
  void initState() {
    super.initState();
    _loadingData();
  }

  Future<void> _loadingData() async {
    const data = 'hi';
    try {
      for (var i = 0; i <= 10; i++) {
        controller.loading(progress: i.toDouble());
        await Future.delayed(const Duration(seconds: 1));
      }
      if (data.isEmpty) {
        return controller.empty();
      }
      controller.finished(data);
    } catch (e) {
      controller.error(e);
    }
  }

  Future<String> _loaderData() async {
    const data = 'hi';
    for (var i = 5; i <= 10; i++) {
      loaderController.loading(progress: i.toDouble());
      await Future.delayed(const Duration(seconds: 1));
    }
    if (data.isEmpty) {
      loaderController.empty();
      return '';
    }
    return data;
  }
}

加载器组件

LoaderWidget 组件用于展示加载过程中的不同状态。我们可以自定义每个状态的显示方式。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Column(
      children: [
        LoaderWidget<String>(
          stateController: controller,
          emptyWidget: () {
            return const SizedBox.shrink();
          },
          errorWidget: (e) {
            return Text(e.toString());
          },
          loadingWidget: (progress) {
            return Stack(
              children: [
                Positioned(
                  top: 10,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Text(
                    progress.toString(),
                    textAlign: TextAlign.center,
                    softWrap: true,
                  ),
                ),
                const CircularProgressIndicator.adaptive(),
              ],
            );
          },
          finishedWidget: (result) {
            return Text(result.toString());
          },
        ),
        const Divider(),
        LoaderWidget<String>(
          stateController: loaderController,
          loader: _loaderData,
          emptyWidget: () {
            return const SizedBox.shrink();
          },
          errorWidget: (e) {
            return Text(e.toString());
          },
          loadingWidget: (progress) {
            return Stack(
              children: [
                Positioned(
                  top: 10,
                  bottom: 0,
                  left: 0,
                  right: 0,
                  child: Text(
                    progress.toString(),
                    textAlign: TextAlign.center,
                    softWrap: true,
                  ),
                ),
                const CircularProgressIndicator.adaptive(),
              ],
            );
          },
          finishedWidget: (result) {
            return Text(result.toString());
          },
        ),
      ],
    ),
  );
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 loader_widget 插件在 Flutter 中动态加载内容的示例代码。loader_widget 插件通常用于显示加载指示器，直到内容加载完成。

首先，确保在你的 pubspec.yaml 文件中添加 loader_widget 依赖：

dependencies:
  flutter:
    sdk: flutter
  loader_widget: ^latest_version  # 请替换为实际的最新版本号

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

以下是一个简单的示例，展示如何使用 loader_widget 来动态加载内容：

import 'package:flutter/material.dart';
import 'package:loader_widget/loader_widget.dart';  // 导入 loader_widget 插件
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isLoading = true;
  String content = "";

  @override
  void initState() {
    super.initState();
    // 模拟一个异步操作，例如从网络获取数据
    Timer(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
        content = "这是加载完成后的内容";
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态加载内容示例'),
      ),
      body: Center(
        child: isLoading
            ? LoaderWidget(
                loaderType: LoaderType.circle, // 使用圆形加载指示器
                color: Colors.blue,
                size: 50.0,
              )
            : Text(
                content,
                style: TextStyle(fontSize: 24),
              ),
      ),
    );
  }
}

在这个示例中：

  1. 我们导入了 loader_widget 插件。
  2. 创建了一个 HomeScreen 小部件，它是一个有状态的小部件，用于处理加载状态和内容的变化。
  3. 在 initState 方法中，我们使用 Timer 模拟了一个异步操作（例如从网络获取数据），并在 2 秒后更新状态。
  4. 在 build 方法中，根据 isLoading 状态来决定显示加载指示器还是加载完成后的内容。

这个示例展示了如何使用 loader_widget 插件在 Flutter 应用中动态加载内容，并在加载过程中显示一个加载指示器。希望这对你有所帮助！

回到顶部