Flutter加载动画插件loading_pulse的使用

Flutter加载动画插件loading_pulse的使用

你可以在示例文件夹中查看演示。

DEMO

使用

// 导入
import 'package:loading_pulse/loading_pulse.dart';

// 定义全局键
final GlobalKey<LoadingPulseState> loadingPulseKey = GlobalKey<LoadingPulseState>();

// 使用Stack布局
return Stack(
  children: [
    Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text('显示加载时隐藏的组件'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 开始加载动画
          loadingPulseKey.currentState!.startAnimation();
          
          // 模拟加载过程
          await Future.delayed(const Duration(seconds: 3));

          // 结束加载动画
          loadingPulseKey.currentState!.reverseAnimation();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    ),
    // 在堆叠布局的最后添加LoadingPulse
    LoadingPulse(
      key: loadingPulseKey,
    ),
  ],
);        

示例代码

以下是完整的示例代码:

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

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: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 定义全局键
  final GlobalKey<LoadingPulseState> loadingPulseKey = GlobalKey<LoadingPulseState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(widget.title),
          ),
          body: const Center(
            child: Text('显示加载时隐藏的组件'),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () async {
              // 开始加载动画
              loadingPulseKey.currentState!.startAnimation();
              
              // 模拟加载过程
              await Future.delayed(const Duration(seconds: 3));

              // 结束加载动画
              loadingPulseKey.currentState!.reverseAnimation();
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ),
        // 在堆叠布局的最后添加LoadingPulse
        LoadingPulse(
          key: loadingPulseKey,
        ),
      ],
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter应用中使用loading_pulse插件来展示加载动画的一个示例。这个插件提供了一个简单的脉冲加载动画。

首先,你需要在pubspec.yaml文件中添加loading_pulse依赖:

dependencies:
  flutter:
    sdk: flutter
  loading_pulse: ^1.0.0  # 请确保版本号是最新的,具体版本号请参考pub.dev

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

接下来,你可以在你的Flutter应用中导入并使用这个插件。以下是一个完整的示例,展示如何在中心位置显示一个加载动画:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Pulse Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoadingScreen(),
    );
  }
}

class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Pulse Demo'),
      ),
      body: Center(
        child: LoadingPulse(
          color: Colors.blue,
          size: 50.0,
        ),
      ),
    );
  }
}

在这个示例中:

  1. MyApp是应用的根Widget,它包含一个MaterialApp
  2. LoadingScreen是主页Widget,它包含一个Scaffold,其中appBar显示应用的标题,body包含一个居中的LoadingPulse动画。
  3. LoadingPulse接受两个参数:colorsize。你可以根据需要调整这些参数来改变动画的颜色和大小。

运行这个应用,你应该会在屏幕上看到一个蓝色的脉冲加载动画。

此外,如果你希望在有数据加载时显示这个动画,可以结合FutureBuilder或者StatefulWidget的状态管理来实现。以下是一个结合FutureBuilder的简单示例:

import 'package:flutter/material.dart';
import 'package:loading_pulse/loading_pulse.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Pulse Demo with FutureBuilder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FutureLoadingScreen(),
    );
  }
}

class FutureLoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Pulse Demo with FutureBuilder'),
      ),
      body: FutureBuilder<String>(
        future: _fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: LoadingPulse(
                color: Colors.blue,
                size: 50.0,
              ),
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Error: ${snapshot.error}'),
            );
          } else if (snapshot.hasData) {
            return Center(
              child: Text('Data: ${snapshot.data}'),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }

  Future<String> _fetchData() async {
    await Future.delayed(Duration(seconds: 3)); // Simulate a data fetch
    return 'Fetched Data';
  }
}

在这个示例中,FutureLoadingScreen使用FutureBuilder来管理一个模拟的数据加载过程。当数据正在加载时,显示LoadingPulse动画;加载完成后,显示获取到的数据。如果加载过程中发生错误,则显示错误信息。

回到顶部