Flutter动画化Toast消息列表插件animated_toast_list的使用
Flutter动画化Toast消息列表插件animated_toast_list的使用
Introduction
在使用Flutter时,是否曾经希望显示自定义设计的Toast?是否还希望能够以列表形式展示这些Toast,并且带有您想要的动画效果?如果是这样,那么您找到了合适的选择!
animated_toast_list
插件是通用的,因此您的Toast不会有任何问题。此插件支持所有平台。
Usage
要使用这个包,需要将任何小部件用ToastListOverlay
包裹,如下例所示。更多详情请参阅示例代码。
Widget build(BuildContext context) {
return ToastListOverlay<MyToastModel>(
itemBuilder: (BuildContext context, MyToastModel item, int index,
Animation<double> animation) {
return ToastItem(
animation: animation,
item: item,
onTap: () => context.hideToast(
item,
(context, animation) =>
_buildItem(context, item, index, animation)),
);
},
child: MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MainScreen(),
debugShowCheckedModeBanner: false,
),
);
}
Properties
Property | Default value | Description |
---|---|---|
child |
Required Widget | 被包裹的小部件 |
position |
Alignment.topCenter | 指定Toast显示的位置 |
reverse |
false | 反转Toast列表 |
limit |
5 | 指定显示多少个Toast |
itemBuilder |
Required ToastListItemBuilder | 定义Toast小部件的地方 |
width |
375 | 指定Toast的宽度 |
timeoutDuration |
5 seconds | 指定Toast显示的时间 |
现在可以通过调用context.showToast
方法来显示Toast。更多详情请参阅主屏幕示例。
context.showToast(MyToastModel(ToastType.success.name, ToastType.success));
注意: MyToastModel
是一个示例模型。
要关闭Toast,可以调用context.hideToast
方法。
context.hideToast(
item,
(context, animation) => ToastItem(
animation: animation,
item: item,
),
);
Live demo
您可以在这里查看实时演示。
Example
以下是该插件的一些使用示例:
-
当Toast超出限制时:
-
点击关闭按钮移除Toast:
-
在导航到另一个屏幕时仍然可以正常显示Toast:
-
反转后的Toast列表:
Complete Demo Code
以下是一个完整的示例代码,展示了如何在项目中使用animated_toast_list
插件。
import 'package:flutter/material.dart';
import 'package:animated_toast_list/animated_toast_list.dart';
void main() => runApp(const SampleApp());
class SampleApp extends StatelessWidget {
const SampleApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ToastListOverlay<MyToastModel>(
position: Alignment.topCenter,
reverse: false,
limit: 5,
width: 375,
timeoutDuration: const Duration(seconds: 5),
itemBuilder: (BuildContext context, MyToastModel item, int index,
Animation<double> animation) {
return ToastItem(
animation: animation,
item: item,
onTap: () => context.hideToast(
item,
(context, animation) =>
_buildItem(context, item, index, animation)),
);
},
child: MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MainScreen(),
debugShowCheckedModeBanner: false,
),
);
}
}
class MainScreen extends StatelessWidget {
const MainScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Animated Toast List')),
body: Center(
child: ElevatedButton(
onPressed: () {
context.showToast(
MyToastModel('success', ToastType.success),
);
},
child: const Text('Show Toast'),
),
),
);
}
}
class MyToastModel {
final String message;
final ToastType type;
MyToastModel(this.message, this.type);
}
enum ToastType { success, error, info }
class ToastItem extends StatelessWidget {
final Animation<double> animation;
final MyToastModel item;
final VoidCallback onTap;
const ToastItem({
Key? key,
required this.animation,
required this.item,
required this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: animation,
child: GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(16.0),
margin: const EdgeInsets.symmetric(vertical: 8.0),
decoration: BoxDecoration(
color: item.type == ToastType.success ? Colors.green : Colors.red,
borderRadius: BorderRadius.circular(8.0),
),
child: Text(item.message),
),
),
);
}
}
这段代码创建了一个简单的Flutter应用程序,当用户点击“Show Toast”按钮时,会显示一个带有动画效果的Toast消息。Toast消息会在5秒后自动消失,或者用户可以点击它来立即关闭。
更多关于Flutter动画化Toast消息列表插件animated_toast_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter动画化Toast消息列表插件animated_toast_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用animated_toast_list
插件来动画化Toast消息列表的示例代码。animated_toast_list
插件允许你在Flutter应用中显示带有动画效果的Toast消息列表。
首先,确保你的pubspec.yaml
文件中已经添加了animated_toast_list
依赖:
dependencies:
flutter:
sdk: flutter
animated_toast_list: ^x.y.z # 请将x.y.z替换为最新版本号
然后,运行flutter pub get
来安装依赖。
接下来,在你的Flutter应用中,你可以按照以下方式使用AnimatedToastList
来显示动画化的Toast消息列表:
import 'package:flutter/material.dart';
import 'package:animated_toast_list/animated_toast_list.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _toastListController = ToastListController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Toast List Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
_showToast('This is a toast message!');
},
child: Text('Show Toast'),
),
ElevatedButton(
onPressed: () {
_showMultipleToasts();
},
child: Text('Show Multiple Toasts'),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_toastListController.clearAll();
},
tooltip: 'Clear All Toasts',
child: Icon(Icons.clear),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
],
),
),
);
}
void _showToast(String message) {
_toastListController.showToast(
ToastData(
message: message,
duration: Duration(seconds: 3),
gravity: ToastGravity.bottom,
animationType: ToastAnimation.slideFromTop,
backgroundColor: Colors.black54,
textColor: Colors.white,
fontSize: 16.0,
padding: EdgeInsets.all(8.0),
borderRadius: BorderRadius.circular(8.0),
),
);
}
void _showMultipleToasts() {
List<ToastData> toasts = [
ToastData(
message: 'First Toast',
duration: Duration(seconds: 2),
gravity: ToastGravity.bottom,
animationType: ToastAnimation.slideFromTop,
backgroundColor: Colors.blue.withOpacity(0.7),
textColor: Colors.white,
),
ToastData(
message: 'Second Toast',
duration: Duration(seconds: 3),
gravity: ToastGravity.bottom,
animationType: ToastAnimation.slideFromBottom,
backgroundColor: Colors.green.withOpacity(0.7),
textColor: Colors.white,
),
ToastData(
message: 'Third Toast',
duration: Duration(seconds: 4),
gravity: ToastGravity.bottom,
animationType: ToastAnimation.fadeIn,
backgroundColor: Colors.red.withOpacity(0.7),
textColor: Colors.white,
),
];
toasts.forEach((toast) => _toastListController.showToast(toast));
}
}
在这个示例中:
ToastListController
用于控制Toast消息的显示和清除。_showToast
方法用于显示单个Toast消息。_showMultipleToasts
方法用于显示多个带有不同动画效果的Toast消息。- 浮动操作按钮(FAB)用于清除所有显示的Toast消息。
你可以根据需要调整ToastData
的属性,以实现不同的动画效果和样式。希望这个示例能帮助你更好地理解如何在Flutter中使用animated_toast_list
插件。