Flutter信息提示插件info

Flutter信息提示插件info_toast的使用

一个帮助您在应用程序中无缝创建美丽且可自定义的动画提示和警告的包。

Info Toast

支持空安全
可定制的位置
可定制的颜色
内置动画
可关闭的通知

安装

要在项目中添加info_toast，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
    info_toast: ^1.0.0

参数

/// 显示为标题的文本小部件
/// 对于所有类型的提示都是必需的参数
final  Text  title;

/// 显示为描述的文本小部件
final  Text?  description;

/// 显示在描述下方的操作按钮
/// 默认情况下没有操作
final  Text?  action;

/// 指示是否显示标题
final  bool  displayTitle;

/// 提示图标，使用默认构造函数时是必需的
late  IconData  icon;

/// 图标颜色
/// 此参数仅在默认构造函数中可用
/// 对于内置主题，颜色将自动设置
late  Color  iconColor;

/// 容器背景色
final  Color  backgroundColor;
/// 容器的阴影颜色
final Color shadowColor;
// 在预定义图标位置显示的自定义小部件
final  Widget?  iconWidget;

/// 图标大小
/// 默认为20
/// 此参数在默认构造函数中可用
late  double  iconSize;

/// 提示显示位置，可能的值
/// {
/// top,
/// bottom
/// }
final  Position  toastPosition;

/// 应用到图标后方圆圈的颜色
/// 为了更好的渲染，动作按钮必须具有相同的颜色
late  Color  themeColor;

/// 点击动作按钮时调用的函数
final  Function?  actionHandler;

/// 动画持续时间，默认为1.5秒
final  Duration  animationDuration;

/// 动画曲线，默认为`Curves.ease`
final  Cubic  animationCurve;

/// 应用于提示的动画类型
/// {
/// fromTop,
/// fromLeft,
/// fromRight,
/// fromBottom,
/// }
final  AnimationType  animationType;

/// 指示提示是否会自动隐藏
final  bool  autoDismiss;

/// 如果[autoDismiss]为true，则提示的持续时间
/// 默认为3秒
final  Duration  toastDuration;

/// 提示布局
/// {
/// ltr,
/// rtl
/// }
final  ToastLayout  layout;

/// 显示/隐藏关闭按钮图标
/// 默认为true
final  bool  displayCloseButton;

/// 定义应用于提示的圆角半径
/// 默认为20
final  double  borderRadius;

/// 定义是否渲染图标
final  bool  displayIcon;

/// 定义是否渲染图标的动画
final  bool  enableIconAnimation;

使用

简单的info_toast，只有标题

InfoToast.success(
  title:  "Hello World!"
).show(context);

简单的info_toast，带操作按钮

InfoToast.info(
  title:  "User added",
  action:  "Display information",
  actionHandler: () {
    print("Action button pressed");
  },
).show(context);

带描述但无标题的提示

InfoToast.warning(
  title:  "",
  displayTitle:  false,
  description:  "All information may be deleted after this action",
  animationType:  ANIMATION_TYPE.FROM_TOP,
  action:  "Backup data",
  actionHandler: () {
    print("Hello World!!");
  },
).show(context);

只有描述的提示，不同动画类型和自动关闭

InfoToast.error(
  title:  "",
  displayTitle:  false,
  description:  "Invalid account information",
  animationType:  ANIMATION_TYPE.FROM_RIGHT,
  animationDuration:  Duration(milliseconds:  1000),
  autoDismiss:  true
).show(context);

底部显示的info_toast

InfoToast(
  icon:  Icons.alarm_add,
  themeColor:  Colors.pink,
  title:  "",
  displayTitle:  false,
  description:  "A bottom info_toast example",
  toastPosition:  POSITION.BOTTOM,
  animationDuration:  Duration(milliseconds:  1000),
  autoDismiss:  true
).show(context);

右侧布局显示的info_toast

InfoToast(
  icon:  Icon(Icons.car_repair),
  themeColor:  Colors.green,
  title:  "",
  displayTitle:  false,
  description:  "هذا مثال تصميم من اليمين",
  toastPosition:  POSITION.BOTTOM,
  layout:  TOAST_LAYOUT.RTL,
  animationType:  ANIMATION_TYPE.FROM_RIGHT,
  action:  "انقر هنا",
  actionStyle:  TextStyle(color:  Colors.green),
  animationDuration:  Duration(milliseconds:  1000),
  autoDismiss:  true
).show(context);

示例代码

import 'package:info_toast/info_toast.dart';
import 'package:info_toast/resources/arrays.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Info Toast 示例使用',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: Scaffold(
        body: ExampleApp(),
      ),
    );
  }
}

class ExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Info Toast',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 30,
            ),
          ),
          SizedBox(
            height: 30,
          ),
          ElevatedButton(
            child: Text('信息提示info_toast'),
            onPressed: () {
              InfoToast.info(
                title: Text('信息', style: TextStyle(fontWeight: FontWeight.bold)),
                action: Text('你做得很好。'),
                actionHandler: () {},
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('错误提示info_toast'),
            onPressed: () {
              InfoToast.error(
                title: Text(''),
                enableIconAnimation: false,
                displayTitle: false,
                description: Text('用户未找到'),
                animationType: AnimationType.fromRight,
                animationDuration: Duration(milliseconds: 1000),
                autoDismiss: true,
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('无图标错误提示info_toast'),
            onPressed: () {
              InfoToast.error(
                title: Text(''),
                backgroundColor: Colors.red, 
                enableIconAnimation: false,
                displayTitle: false,
                displayCloseButton: false,
                borderRadius: 8,
                displayIcon: false,
                description: Text('这是一个自动关闭的经典错误消息，没有任何图标或关闭按钮。', style: TextStyle(color: Colors.white)),
                animationType: AnimationType.fromTop,
                animationDuration: Duration(milliseconds: 1000),
                toastDuration: Duration(milliseconds: 5000),
                autoDismiss: true,
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('底部提示info_toast'),
            onPressed: () {
              InfoToast(
                icon: Icons.alarm_add,
                themeColor: Colors.pink,
                title: Text(''),
                displayTitle: false,
                description: Text('底部提示示例'),
                toastPosition: Position.bottom,
                animationDuration: Duration(milliseconds: 1000),
                autoDismiss: true,
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('警告提示info_toast'),
            onPressed: () {
              InfoToast.warning(
                title: Text(''),
                displayTitle: false,
                description: Text('所有信息在此操作后可能会被删除'),
                animationType: AnimationType.fromTop,
                action: Text('备份数据'),
                actionHandler: () {},
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('成功提示info_toast'),
            onPressed: () {
              InfoToast.success(
                title: Text('最简单的info_toast'),
                borderRadius: 0,
              ).show(context);
            },
          ),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            child: Text('右侧布局提示info_toast'),
            onPressed: () {
              InfoToast(
                icon: Icons.car_repair,
                themeColor: Colors.green,
                title: Text(''),
                displayTitle: false,
                description: Text('这是从右向左的设计示例'),
                toastPosition: Position.bottom,
                layout: ToastLayout.rtl,
                animationType: AnimationType.fromRight,
                action: Text(
                  '点击这里',
                  style: TextStyle(color: Colors.green),
                ),
                animationDuration: Duration(milliseconds: 1000),
                autoDismiss: true,
              ).show(context);
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter信息提示插件info_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼•3 天前作者

更多关于Flutter信息提示插件info_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用info_toast插件的一个详细示例。info_toast是一个用于显示信息提示的Flutter插件，非常适合用于显示非阻塞的提示信息。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  info_toast: ^3.0.0  # 请检查最新版本号

步骤 2: 导入插件

在你的Dart文件中（例如main.dart），导入info_toast插件：

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

步骤 3: 初始化InfoToast

在你的应用入口文件（通常是main.dart）中，初始化InfoToast：

void main() {
  runApp(MyApp());
  // 初始化InfoToast
  InfoToast().init(context);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

注意：在Flutter的最新版本中，InfoToast().init(context); 应该在MaterialApp的builder参数中初始化，以确保上下文是全局可用的。以下是更新后的初始化方法：

void main() {
  runApp(MaterialApp(
    builder: (context, child) {
      InfoToast().init(context);
      return child;
    },
    home: MyHomePage(),
  ));
}

步骤 4: 使用InfoToast显示提示

现在，你可以在任何地方使用InfoToast来显示信息提示。例如，在按钮点击事件中：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Info Toast Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            InfoToast().show(
              'This is an info toast!',
              context,
              duration: 3000, // 显示时长，单位为毫秒
              backgroundColor: Colors.blue.withOpacity(0.9),
              textColor: Colors.white,
              icon: Icon(Icons.info_outline, color: Colors.white),
            );
          },
          child: Text('Show Info Toast'),
        ),
      ),
    );
  }
}

完整代码示例

以下是完整的代码示例，整合了上述所有步骤：

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

void main() {
  runApp(MaterialApp(
    builder: (context, child) {
      InfoToast().init(context);
      return child;
    },
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Info Toast Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            InfoToast().show(
              'This is an info toast!',
              context,
              duration: 3000, // 显示时长，单位为毫秒
              backgroundColor: Colors.blue.withOpacity(0.9),
              textColor: Colors.white,
              icon: Icon(Icons.info_outline, color: Colors.white),
            );
          },
          child: Text('Show Info Toast'),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter项目中集成和使用info_toast插件来显示信息提示。你可以根据需要调整提示的文本、颜色、图标和显示时长等参数。