flutter如何实现toast消息提示

在Flutter中如何实现Toast消息提示功能？目前官方提供的SnackBar需要配合Scaffold使用，不太适合全局轻量级的提示需求。请问有没有类似Android原生Toast的第三方库推荐？或者如何用Flutter原生组件实现一个可以全局调用的Toast效果？最好能自定义显示位置、持续时间和样式，且不会打断用户操作流程。

2 回复

Flutter 中实现 Toast 消息提示，常用以下方法：

  1. fluttertoast 库（推荐）

    • 安装：flutter pub add fluttertoast
    • 使用：
      Fluttertoast.showToast(
  msg: "提示消息",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.BOTTOM,
);

  2. SnackBar（Material Design 风格）

    ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text("消息内容"),
    duration: Duration(seconds: 2),
  ),
);

  3. 自定义 Overlay 通过 OverlayEntry 实现完全自定义的 Toast 样式和动画。

建议：优先使用 fluttertoast 库，支持样式定制和多种位置，兼容性好。SnackBar 适合与 Material 设计规范结合的场景。

更多关于flutter如何实现toast消息提示的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，实现 Toast 消息提示可以通过以下方法：

1. 使用 fluttertoast 第三方库（推荐）

这是最常用的方式，功能丰富且易于使用。

步骤：

  1. 在 pubspec.yaml 中添加依赖：

    dependencies:
  fluttertoast: ^8.2.4

    运行 flutter pub get 安装。

  2. 在代码中使用：

    import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
  msg: "这是一个Toast消息",
  toastLength: Toast.LENGTH_SHORT, // 显示时长
  gravity: ToastGravity.BOTTOM,    // 位置
  backgroundColor: Colors.grey[700],
  textColor: Colors.white,
  fontSize: 16.0
);

2. 使用 SnackBar（Material Design 组件）

适用于与 Material 设计风格一致的应用，通常结合 Scaffold 使用。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('消息内容'),
    duration: Duration(seconds: 2),
    action: SnackBarAction(label: '确定', onPressed: () {}),
  )
);

3. 自定义 Toast

如果需要高度定制化，可以自行实现：

void showCustomToast(BuildContext context, String message) {
  final overlay = Overlay.of(context);
  OverlayEntry? entry;

  entry = OverlayEntry(builder: (context) => Positioned(
    bottom: 100,
    left: MediaQuery.of(context).size.width * 0.1,
    child: Material(
      color: Colors.transparent,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        decoration: BoxDecoration(
          color: Colors.black87,
          borderRadius: BorderRadius.circular(25),
        ),
        child: Text(message, style: TextStyle(color: Colors.white)),
      ),
    ),
  ));

  overlay.insert(entry);
  Future.delayed(Duration(seconds: 2), () => entry?.remove());
}

推荐方案

  • 快速实现：使用 fluttertoast 库
  • Material 应用：使用 SnackBar
  • 完全自定义：通过 Overlay 自行实现

选择时考虑应用的设计风格和功能需求。

回到顶部