Flutter轻量级提示插件owlet_toast的使用

Flutter轻量级提示插件owlet_toast的使用

Owlet Toast 使用叠加层来展示自定义的提示信息。你可以通过 OverlayManager 自定义提示信息的UI，并且可以通过动画效果展示在屏幕上。你也可以自定义动画效果。

导入

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

dependencies:
   owlet_toast: ^0.0.2

使用

首先，创建一个全局的 OwletToast 实例，需要传入一个 GlobalKey<NavigatorState>()：

final navKey = GlobalKey<NavigatorState>();
final appToast = OwletToast.global(navKey);

或者通过上下文获取 OwletToast 实例：

final appToast = OwletToast.of(context);

使用它

要显示提示信息，可以调用 appToast.show() 方法。以下是一个简单的示例：

Future<R?> showInformation<R extends Object>(String message) {
  return appToast.show(
    builder: (context, entry, child) => Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 3, spreadRadius: 4)],
      ),
      child: const Text("This is toast's message"),
    ),
    alignment: const Alignment(0, -0.7),
    transitionDelegate: const TranslateTransitionDelegate(direction: Alignment.topCenter),
    transitionDuration: const Duration(milliseconds: 500),
    holdDuration: const Duration(seconds: 1),
  );
}

然后，你可以调用这个方法来显示提示信息：

showInformation('Hello World');

ToastTransitionDelegate

默认情况下，owlet_toast 包提供了三种 ToastTransitionDelegate：

• TranslateTransitionDelegate：提示信息会从 start 位置平移到 destination 位置。

  

• FadeTransitionDelegate：提示信息以淡入淡出的方式出现和消失。

  

  一些自定义动画示例：

  

• ShakeTransitionDelegate：提示信息以抖动方式出现，并以淡出方式消失。

  

要自定义提示信息的过渡动画，可以覆盖 ToastTransitionDelegate 中的 transition 或 opacity 方法。

class CustomTransitionDelegate with ToastTransitionDelegate { 
  [@override](/user/override)
  Offset transition(AnimationStatus animationStatus, double animationValue) {
    // 自定义平移逻辑
    return Offset(animationValue * 100, 0); // 示例：向右移动
  }

  [@override](/user/override)
  double opacity(AnimationStatus animationStatus, double animationValue) {
    // 自定义透明度逻辑
    return animationValue; // 示例：线性变化
  }
}

提示

• 提示信息的显示区域位于 MediaQuery.viewInsetsOf(context) 内。

• 使用 Alignment 不仅可以对齐提示信息的组件，还可以相对于屏幕调整其原始位置。

  例如：Alignment(0, -0.7) 将使组件居中水平（屏幕宽度的 50%）并且向上偏移 60% 的屏幕高度。

• 覆盖 ToastTransitionDelegate.transition 方法也会改变提示信息的原始位置。

  

特性和问题

如需报告功能请求或问题，请访问 issue 追踪器。

完整示例

以下是一个完整的示例代码：

import 'package:example/app_toast.dart';
import 'package:flutter/material.dart';
import 'package:owlet_toast/owlet_toast.dart';

void main() {
  final navKey = GlobalKey<NavigatorState>();
  final appToast = AppToast(owletToast: OwletToast.global(navKey));
  runApp(MyApp(
    appToast: appToast,
    navKey: navKey,
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.navKey, required this.appToast});

  final GlobalKey<NavigatorState> navKey;
  final AppToast appToast;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navKey,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: MyHomePage(title: 'Owlet Toast Demo', appToast: appToast),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title, required this.appToast});

  final String title;
  final AppToast appToast;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                widget.appToast.showInformation('Hello World');
              },
              child: const Text('Show Information Toast'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                widget.appToast.showError('This is error message');
              },
              child: const Text('Show Error Toast'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                widget.appToast.showWarning('Position of toast is relative');
              },
              child: const Text('Show Warning Toast'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                widget.appToast.showSuccess('Celebration!');
              },
              child: const Text('Show Success Toast'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                widget.appToast.showLottieSuccess('The icon appear after the toast showing!');
              },
              child: const Text('Lottie Success Toast'),
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                widget.appToast.showAnimated('Celebration!');
              },
              child: const Text('Show Animated Toast'),
            ),
            const SizedBox(height: 8),
          ],
        ),
      ),
    );
  }
}