Flutter加载与计时插件flutter_awesome_loading_timer的使用

Flutter加载与计时插件flutter_awesome_loading_timer的使用

本文档描述了该包的功能。如果您将此包发布到pub.dev，则此README的内容将出现在您的包的首页。

特性

您可以在此期间看到一个加载指示器，然后是子组件。

开始使用

这是一个非常简单的包。

使用方法

以下是一个示例：

AwesomeLoadingTimer(
    child: Text('data'), // 显示的数据
),

完整示例代码

以下是一个完整的示例代码，展示如何在Flutter应用程序中使用flutter_awesome_loading_timer插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Awesome Loading Timer 示例"),
        ),
        body: Center(
          child: AwesomeLoadingTimer( // 使用 AwesomeLoadingTimer 组件
            duration: Duration(seconds: 5), // 设置加载持续时间为5秒
            child: Text('加载完成！'), // 加载完成后显示的文本
            loadingChild: CircularProgressIndicator(), // 加载中的指示器
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_awesome_loading_timer 是一个 Flutter 插件，用于在应用中显示加载动画和计时器。它可以帮助你在执行耗时操作时显示加载动画，并在操作完成后停止计时器。以下是如何使用 flutter_awesome_loading_timer 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_awesome_loading_timer: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:flutter_awesome_loading_timer/flutter_awesome_loading_timer.dart';

3. 使用 AwesomeLoadingTimer

AwesomeLoadingTimer 是一个小部件，你可以在需要显示加载动画和计时器的地方使用它。

基本用法

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

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

  void _startLoading() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟耗时操作
    await Future.delayed(Duration(seconds: 5));

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Loading Timer Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_isLoading)
              AwesomeLoadingTimer(
                duration: Duration(seconds: 5),
                onTimerEnd: () {
                  print('Timer ended!');
                },
              ),
            ElevatedButton(
              onPressed: _startLoading,
              child: Text('Start Loading'),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • duration: 计时器的持续时间。
  • onTimerEnd: 计时器结束时触发的回调函数。
  • loadingWidget: 自定义加载动画的小部件（可选）。
  • timerStyle: 计时器文本的样式（可选）。

4. 自定义加载动画

你可以通过 loadingWidget 参数来自定义加载动画。例如，使用 CircularProgressIndicator：

AwesomeLoadingTimer(
  duration: Duration(seconds: 5),
  onTimerEnd: () {
    print('Timer ended!');
  },
  loadingWidget: CircularProgressIndicator(),
);

5. 自定义计时器样式

你可以通过 timerStyle 参数来自定义计时器文本的样式：

AwesomeLoadingTimer(
  duration: Duration(seconds: 5),
  onTimerEnd: () {
    print('Timer ended!');
  },
  timerStyle: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);
回到顶部