Flutter消息提示插件overlay_toast_message的使用

Flutter消息提示插件overlay_toast_message的使用

overlay_toast_message 是一个用于 Flutter 的消息提示插件。你可以根据自己的需求轻松自定义。

使用方法

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

dependencies:
  overlay_toast_message: ^1.0.2

然后导入包：

import 'package:overlay_toast_message/overlay_toast_message.dart';

展示消息提示的方法如下：

OverlayToastMessage.show(
  context,
  textMessage: 'Dismiss All And Show Toast',
);

自定义消息提示

你也可以通过传入自定义的 Widget 来展示更复杂的消息提示：

OverlayToastMessage.show(
  context,
  widget: yourWidget,
);

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 overlay_toast_message 插件。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:overlay_toast_message/overlay_toast_message.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(
        primarySwatch: Colors.blue,
      ),
      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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: onTapCustomBtn,
              child: const Text('Show Custom Toast'),
            ),
            ElevatedButton(
              onPressed: onTapShowToastBtn,
              child: const Text('Show Toast'),
            ),
            ElevatedButton(
              onPressed: onTapDismissAllAndShowToastBtn,
              child: const Text('Dismiss All And Show Toast'),
            ),
          ],
        ),
      ),
    );
  }

  // 显示普通消息提示
  void onTapShowToastBtn() {
    OverlayToastMessage.show(
      context,
      textMessage: 'Toast Message',
    );
  }

  // 显示消息提示并关闭所有其他消息提示
  void onTapDismissAllAndShowToastBtn() {
    OverlayToastMessage.show(
      context,
      dismissAll: true,
      textMessage: 'Dismiss All And Show Toast Message',
    );
  }

  // 显示自定义消息提示
  void onTapCustomBtn() {
    OverlayToastMessage.show(
      context,
      widget: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Container(
          decoration: BoxDecoration(boxShadow: const [
            BoxShadow(
              spreadRadius: 3,
              blurRadius: 10,
              offset: Offset(0, 5),
              color: Colors.black12,
            )
          ], borderRadius: BorderRadius.circular(15), color: Colors.white),
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                Icon(Icons.ac_unit),
                SizedBox(width: 15),
                Expanded(
                  child: Text(
                    'Custom Toast',
                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18),
                    textAlign: TextAlign.start,
                    maxLines: 2,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}