Flutter消息提示插件custom_flutter_toast的使用

Flutter消息提示插件custom_flutter_toast的使用

custom_flutter_toast 是一个用于Flutter应用的消息提示（Toast）库。它支持两种类型的消息提示：一种需要 BuildContext，另一种不需要 BuildContext。以下是关于如何使用这个插件的详细介绍，并提供了一个完整的示例代码。

1. Toast 不需要 BuildContext (仅限 Android 和 iOS)

这种类型的 Toast 有有限的功能，并且无法自定义 UI。它适用于 Android 和 iOS 平台。

示例代码：

final _nativeToastPlugin = NativeToast();

await _nativeToastPlugin.showToast(
  message: "Hello from Native Toast", // 消息内容，必填
  backgroundColor: Colors.red,        // 背景颜色，默认为 null
  maxLines: 6,                        // 最大行数，默认为 2
  gravity: ToastGravity.bottom,       // 显示位置，默认为底部
  textColor: Colors.white,            // 文字颜色，默认为 null
  fontSize: 16,                       // 字体大小，默认为 null
  showImage: true,                    // 是否显示图片，默认为 true
  imagePath: "assets/car_image.jpeg",  // 图片路径，默认为 flutter_logo
);

2. Toast 需要 BuildContext (适用于所有平台)

这种类型的 Toast 提供了更多的控制选项，包括自定义 UI、排队显示、移除单个 Toast 和清除队列等功能。它适用于所有平台。

使用步骤：

1. 在 main.dart 中设置全局 NavigatorKey：

   final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
   

2. 在 MaterialApp 中使用 builder 来初始化 Toast：

   MaterialApp(
     builder: flutterToastBuilder(), // 使用自定义 Toast 构建器
     navigatorKey: navigatorKey,      // 设置全局 NavigatorKey
     home: const HomeScreen(),
   );
   

3. 在页面中初始化 FToast：

   class _HomeScreenState extends State<HomeScreen> {
     final _flutterToast = FlutterToast();
     FToast? fToast;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       fToast = FToast();
       fToast!.init(context); // 初始化 FToast
     }
   
     Future<void> showToastMessage(String message, {bool withImage = false}) async {
       try {
         _flutterToast.showCustomToast(
           message,
           navigatorKey: navigatorKey, // 使用全局 NavigatorKey
           maxLines: 5,                // 最大行数，默认为 5
           backgroundColor: Colors.red, // 背景颜色，默认为 null
           textColor: Colors.white,    // 文字颜色，默认为 null
           imagePath: "assets/car_image.jpeg", // 图片路径，默认为 flutter_logo
           showImage: withImage,       // 是否显示图片，默认为 true
         );
       } on PlatformException {
         if (kDebugMode) {
           print('Failed to show toast.');
         }
       }
     }
   }
   

3. 完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 custom_flutter_toast 插件来显示不同类型的 Toast。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:custom_flutter_toast/export.dart';

/// The navigator key to be used throughout the app.
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

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

/// The main application widget.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      builder: flutterToastBuilder(), // Use the custom toast builder
      navigatorKey: navigatorKey,     // Set the navigator key
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _nativeToastPlugin = NativeToast();
  final _flutterToast = FlutterToast();
  FToast? fToast;

  [@override](/user/override)
  void initState() {
    super.initState();
    fToast = FToast();
    fToast!.init(context); // Initialize FToast
  }

  Future<void> showToastMessage(String message, {bool useNativeToast = false, bool withImage = false}) async {
    try {
      if (useNativeToast) {
        await _nativeToastPlugin.showToast(
          message: message,
          backgroundColor: Colors.red,
          maxLines: 6,
          gravity: ToastGravity.bottom,
          textColor: Colors.white,
          fontSize: 16,
          showImage: withImage,
          imagePath: "assets/car_image.jpeg",
        );
      } else {
        _flutterToast.showCustomToast(
          message,
          navigatorKey: navigatorKey,
          maxLines: 5,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          imagePath: "assets/car_image.jpeg",
          showImage: withImage,
        );
      }
    } on PlatformException {
      if (kDebugMode) {
        print('Failed to show toast.');
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                showToastMessage("Hello from Flutter Toast", useNativeToast: false, withImage: true);
              },
              child: const Text('Show Flutter Toast With Image'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                showToastMessage("Hello from Native Toast", useNativeToast: true, withImage: true);
              },
              child: const Text('Show Native Toast With Image'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                showToastMessage("Another message from Flutter Toast", useNativeToast: false);
              },
              child: const Text('Show Another Flutter Toast'),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                showToastMessage("Another message from Native Toast", useNativeToast: true);
              },
              child: const Text('Show Another Native Toast'),
            ),
          ],
        ),
      ),
    );
  }
}