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,
),
),
);
}
}
在这个示例中:
MyApp
是应用的根Widget,它包含一个MaterialApp
。LoadingScreen
是主页Widget,它包含一个Scaffold
,其中appBar
显示应用的标题,body
包含一个居中的LoadingPulse
动画。LoadingPulse
接受两个参数:color
和size
。你可以根据需要调整这些参数来改变动画的颜色和大小。
运行这个应用,你应该会在屏幕上看到一个蓝色的脉冲加载动画。
此外,如果你希望在有数据加载时显示这个动画,可以结合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
动画;加载完成后,显示获取到的数据。如果加载过程中发生错误,则显示错误信息。