Flutter动画化Toast消息列表插件animated_toast_list的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

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超出限制时: 2022-06-11_01-25-41_AdobeExpress

  • 点击关闭按钮移除Toast: 2022-06-11_01-25-41_AdobeExpress (1)

  • 在导航到另一个屏幕时仍然可以正常显示Toast: 2022-06-11_01-25-41_AdobeExpress (2)

  • 反转后的Toast列表: 2022-06-11_01-39-18_AdobeExpress

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

1 回复

更多关于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));
  }
}

在这个示例中:

  1. ToastListController 用于控制Toast消息的显示和清除。
  2. _showToast 方法用于显示单个Toast消息。
  3. _showMultipleToasts 方法用于显示多个带有不同动画效果的Toast消息。
  4. 浮动操作按钮(FAB)用于清除所有显示的Toast消息。

你可以根据需要调整ToastData的属性,以实现不同的动画效果和样式。希望这个示例能帮助你更好地理解如何在Flutter中使用animated_toast_list插件。

回到顶部