Flutter加载动画插件loadingkit_flutter的使用

Flutter 加载动画插件 loadingkit_flutter 的使用

Flutter Loadingkit ↻

GitHub stars

Follow Twitter

一个简单的线性加载 Flutter 插件。

使用方法

要使用此插件，只需在 pubspec.yaml 文件中添加依赖项 <code>loadingkit_flutter</code>。

dependencies:
  loadingkit_flutter: ^版本号

然后运行以下命令以更新依赖项：

flutter pub get

现在你已经可以开始使用了！👍

示例代码

以下是一个完整的示例，展示如何在 Flutter 应用中使用 loadingkit_flutter 插件。

完整示例代码

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

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

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

class LoadingExample extends StatefulWidget {
  @override
  _LoadingExampleState createState() => _LoadingExampleState();
}

class _LoadingExampleState extends State<LoadingExample> {
  bool isLoading = false;

  void toggleLoading() {
    setState(() {
      isLoading = !isLoading;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadingKit 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示加载动画
            FlutterLoadingKit(
              isLoading: isLoading, // 控制加载动画是否显示
              color: Colors.blue,   // 设置加载动画的颜色
              size: 50.0,           // 设置加载动画的大小
              child: ElevatedButton(
                onPressed: toggleLoading, // 切换加载状态
                child: Text(isLoading ? '隐藏加载' : '显示加载'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 导入库
    在 pubspec.yaml 中添加 loadingkit_flutter 后，需要在 Dart 文件中导入它：
    import 'package:loadingkit_flutter/loadingkit_flutter.dart';

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

1 回复

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


loadingkit_flutter 是一个用于在 Flutter 应用中显示加载动画的插件。它提供了多种预定义的加载动画样式，并且可以轻松地集成到你的应用中。以下是如何使用 loadingkit_flutter 插件的步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:loadingkit_flutter/loadingkit_flutter.dart';

3. 使用加载动画

loadingkit_flutter 提供了多种加载动画样式，你可以根据需要选择合适的样式。

示例 1: 使用默认的加载动画

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadingKit Example'),
      ),
      body: Center(
        child: LoadingKit.circularProgressIndicator(), // 默认的圆形进度条
      ),
    );
  }
}

示例 2: 使用自定义的加载动画

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadingKit Example'),
      ),
      body: Center(
        child: LoadingKit.spinningCircle( // 自定义的旋转圆圈
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

示例 3: 使用文本加载动画

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadingKit Example'),
      ),
      body: Center(
        child: LoadingKit.textLoading( // 文本加载动画
          text: 'Loading...',
          textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
        ),
      ),
    );
  }
}

4. 自定义加载动画

你可以通过传递不同的参数来自定义加载动画的外观，例如颜色、大小、文本样式等。

5. 控制加载动画的显示与隐藏

通常情况下，加载动画会在数据加载时显示，加载完成后隐藏。你可以使用 setState 或状态管理工具来控制加载动画的显示与隐藏。

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

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

  void _loadData() async {
    // 模拟数据加载
    await Future.delayed(Duration(seconds: 3));
    setState(() {
      _isLoading = false;
    });
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LoadingKit Example'),
      ),
      body: Center(
        child: _isLoading
            ? LoadingKit.circularProgressIndicator()
            : Text('Data Loaded!'),
      ),
    );
  }
}
回到顶部