flutter如何实现自定义toast

在Flutter中如何实现自定义Toast？官方提供的Toast组件样式比较固定，如果想修改背景颜色、文字样式、显示位置或添加图标等自定义效果，应该怎么实现？有没有成熟的第三方库推荐，或者需要自己通过Overlay或其他方式实现？求具体代码示例和最佳实践方案。

2 回复

Flutter实现自定义Toast主要有两种方式：

  1. 使用Overlay（推荐）：
// 创建全局OverlayEntry
OverlayEntry _createToast() {
  return OverlayEntry(
    builder: (context) => Positioned(
      top: MediaQuery.of(context).size.height * 0.8,
      child: Material(
        color: Colors.transparent,
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
          decoration: BoxDecoration(
            color: Colors.black54,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text('自定义Toast', style: TextStyle(color: Colors.white)),
        ),
      ),
    ),
  );
}

// 显示Toast
void showToast(BuildContext context) {
  OverlayEntry entry = _createToast();
  Overlay.of(context).insert(entry);
  Future.delayed(Duration(seconds: 2)).then((value) => entry.remove());
}
  1. 使用SnackBar（简单快捷）：
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('自定义Toast'),
    duration: Duration(seconds: 2),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
  )
);

推荐使用Overlay方式，可以完全自定义样式和位置。记得控制显示时长，一般2秒后自动消失。

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


在 Flutter 中，可以通过自定义 Widget 和 Overlay 实现自定义 Toast。以下是实现步骤和示例代码：

  1. 创建自定义 Toast Widget
    使用 OverlayEntry 和 Overlay.of(context) 来显示浮层。

  2. 封装 Toast 管理类
    控制显示、隐藏和自动消失。

示例代码：

import 'package:flutter/material.dart';

class CustomToast {
  static void show({
    required BuildContext context,
    required String message,
    Duration duration = const Duration(seconds: 2),
  }) {
    // 获取 OverlayState
    OverlayState? overlayState = Overlay.of(context);
    if (overlayState == null) return;

    // 创建 OverlayEntry
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: MediaQuery.of(context).size.height * 0.8,
        child: Material(
          color: Colors.transparent,
          child: Container(
            width: MediaQuery.of(context).size.width,
            alignment: Alignment.center,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.7),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(
                message,
                style: TextStyle(color: Colors.white, fontSize: 14),
              ),
            ),
          ),
        ),
      ),
    );

    // 插入 Overlay
    overlayState.insert(overlayEntry);

    // 定时移除
    Future.delayed(duration, () {
      overlayEntry.remove();
    });
  }
}

使用方法：

CustomToast.show(
  context: context,
  message: '这是一个自定义 Toast',
);

特点：

  • 可自定义位置、样式、动画
  • 自动消失
  • 不阻塞用户操作

如需更复杂效果（如动画），可结合 AnimatedBuilder 或第三方动画库实现。

回到顶部