Flutter加载动画插件phoenix_loading的使用

Features

phoenix 将作为企业级基础组件:Loading，为项目提供支持。

Getting Started

在开始使用 phoenix_loading 插件之前，请确保已经将插件添加到您的项目中。您可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  phoenix_loading: ^x.x.x

然后运行 flutter pub get 来安装插件。

Usage

以下是 phoenix_loading 的基本用法示例：

import 'package:flutter/material.dart';
import 'package:phoenix_loading/phoenix_loading.dart'; // 导入 phongex_loading 包

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: PhoenixLoadingExample(), // 使用 PhoenixLoadingExample 页面
    );
  }
}

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

class _PhoenixLoadingExampleState extends State<PhoenixLoadingExample> {
  bool isLoading = false;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phoenix Loading Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _toggleLoading,
              child: Text('Toggle Loading'),
            ),
            SizedBox(height: 20),
            PhoenixLoading(
              loading: isLoading, // 控制加载动画是否显示
              child: Text('点击按钮以切换加载状态'),
            ),
          ],
        ),
      ),
    );
  }
}

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

htzhanglong 1楼

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

phoenix_loading 是一个用于 Flutter 的加载动画插件，它提供了多种炫酷的加载动画效果，可以轻松集成到你的 Flutter 应用中。以下是如何使用 phoenix_loading 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  phoenix_loading: ^1.0.0  # 请根据实际情况使用最新版本

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

2. 导入包

在需要使用 phoenix_loading 的 Dart 文件中导入包：

import 'package:phoenix_loading/phoenix_loading.dart';

3. 使用加载动画

phoenix_loading 提供了多种加载动画类型，你可以根据需要选择并使用它们。

示例：使用默认加载动画

PhoenixLoading(
  size: 50.0,
  color: Colors.blue,
)

示例：使用旋转加载动画

PhoenixLoading.rotatingCircle(
  size: 50.0,
  color: Colors.red,
)

示例：使用脉冲加载动画

PhoenixLoading.pulse(
  size: 50.0,
  color: Colors.green,
)

示例：使用双波浪加载动画

PhoenixLoading.doubleBounce(
  size: 50.0,
  color: Colors.purple,
)

示例：使用波浪加载动画

PhoenixLoading.wave(
  size: 50.0,
  color: Colors.orange,
)

4. 自定义加载动画

你可以通过调整 size 和 color 参数来自定义加载动画的大小和颜色，以适应你的应用风格。

5. 完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 phoenix_loading：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phoenix Loading Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              PhoenixLoading(
                size: 50.0,
                color: Colors.blue,
              ),
              SizedBox(height: 20),
              PhoenixLoading.rotatingCircle(
                size: 50.0,
                color: Colors.red,
              ),
              SizedBox(height: 20),
              PhoenixLoading.pulse(
                size: 50.0,
                color: Colors.green,
              ),
              SizedBox(height: 20),
              PhoenixLoading.doubleBounce(
                size: 50.0,
                color: Colors.purple,
              ),
              SizedBox(height: 20),
              PhoenixLoading.wave(
                size: 50.0,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}