flutter如何自定义toast图标

在Flutter中，我想自定义Toast的图标，但不知道如何实现。目前使用的是默认的Toast样式，想改成自己的图标和样式。请问有没有简单的方法或者推荐的插件可以实现这个功能？最好能提供具体的代码示例。

2 回复

在Flutter中自定义Toast图标，可以通过以下步骤实现：

  1. 使用第三方库如fluttertoast，在pubspec.yaml中引入：
dependencies:
  fluttertoast: ^8.2.2
  1. 通过Fluttertoast.showToast的toastLength、gravity等参数配置样式，关键是用child参数自定义Widget：
Fluttertoast.showToast(
  msg: "自定义Toast",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.CENTER,
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    decoration: BoxDecoration(
      color: Colors.grey[800],
      borderRadius: BorderRadius.circular(25),
    ),
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.star, color: Colors.yellow), // 自定义图标
        SizedBox(width: 8),
        Text("操作成功", style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
);
  1. 也可以使用flutter_easyloading等库直接配置图标：
EasyLoading.showSuccess('成功', 
  duration: Duration(seconds: 2),
  maskType: EasyLoadingMaskType.clear,
);

注意：自定义图标时建议控制尺寸在24x24左右，保持视觉协调。

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


在 Flutter 中自定义 Toast 图标，可以使用第三方库 fluttertoast 或自定义 SnackBar。以下是两种方法的实现：

1. 使用 fluttertoast 库

步骤：

  1. 添加依赖到 pubspec.yaml：
    dependencies:
  fluttertoast: ^8.2.4
  2. 导入并调用 Fluttertoast.showToast，通过 child 参数自定义图标：
    import 'package:fluttertoast/fluttertoast.dart';
import 'package:flutter/material.dart';

Fluttertoast.showToast(
  msg: "自定义Toast",
  toastLength: Toast.LENGTH_SHORT,
  gravity: ToastGravity.CENTER,
  backgroundColor: Colors.grey[800],
  textColor: Colors.white,
  fontSize: 16.0,
  child: Row( // 使用 Row 添加图标和文本
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.check, color: Colors.green), // 自定义图标
      SizedBox(width: 8),
      Text("操作成功"),
    ],
  ),
);

2. 使用 ScaffoldMessenger 和 SnackBar（推荐）

通过 SnackBar 的 content 属性自定义布局：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Row(
      children: [
        Icon(Icons.warning, color: Colors.amber), // 自定义图标
        SizedBox(width: 10),
        Expanded(child: Text("这是一个自定义图标的提示")),
      ],
    ),
    backgroundColor: Colors.grey[800],
    duration: Duration(seconds: 2),
  ),
);

注意事项：

  • fluttertoast 的 child 参数可能在某些版本中不可用，请检查最新文档。
  • SnackBar 是 Material Design 组件，更适合与现有设计保持一致。

选择其中一种方法即可实现带图标的 Toast 效果。

回到顶部