🥪 Toasted

Displays toasts in a queue similar to the default SnackBar but with more extensive customization including:

• Intrinsically sized toasts (SnackBar needs a fixed-width for some reason).
• Custom toast animations
• Custom toast positioning.

.

Usage

To enable toast support, wrap your app in a ToastedProvider widget:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ToastedProvider(
      child: MaterialApp(
        title: 'MyApp',
        home: Container(),
      ),
    );
  }
}

You can then show toasts from anywhere in the build tree using the ToastedMessenger:

ToastedMessenger.of(context)!.show(
  Toasted(
    duration: const Duration(seconds: 3),
    child: Material(
      color: Colors.transparent,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
        margin: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: black,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          text,
          style: TextStyle(color: white),
        ),
      ),
    ),
  ),
);

Check out this working example and others in the demo app.

Custom animations

Custom toast animations are supported through the transitionBuilder API. Any transition can be provided and it works out of the box with built-in transitions like:

• FadeTransition

.

ToastedMessenger.of(context)!.show(
  Toasted(
    duration: const Duration(seconds: 3),
    // This is the default alignment.
    alignment: Alignment.bottomRight,
    transitionBuilder: (context, animation, child) {
      // This is the default transition.
      return FadeTransition(
        opacity: CurvedAnimation(
          parent: animation,
          curve: Curves.linear,
        ),
        child: child,
      );
    },
    child: Material(
      color: Colors.transparent,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 12,
          vertical: 10,
        ),
        margin: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          'This is a slide transition toast',
          style: const TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
);

• SlideTransition

.

ToastedMessenger.of(context)!.show(
  Toasted(
    duration: const Duration(seconds: 3),
    transitionBuilder: (context, animation, child) {
      return Positioned(
        bottom: 0,
        right: 0,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0, 1),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        ),
      );
    },
    child: Material(
      color: Colors.transparent,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 12,
          vertical: 10,
        ),
        margin: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          'This is a slide transition toast',
          style: const TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
);

• SizeTransition

.

ToastedMessenger.of(context)!.show(
  Toasted(
    duration: const Duration(seconds: 3),
    transitionBuilder: (context, animation, child) {
      return Positioned(
        bottom: 0,
        right: 0,
        child: SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(0, 1),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        ),
      );
    },
    child: Material(
    color: Colors.transparent,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 12,
          vertical: 10,
        ),
        margin: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text(
          'This is a slide transition toast',
          style: const TextStyle(color: Colors.white),
        ),
      ),
    ),
  ),
);