toasted

Description:

toasted

🥪 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(),
),
);
}
}
copied to clipboard
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),
),
),
),
),
);
copied to clipboard
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),
),
),
),
),
);
copied to clipboard

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),
),
),
),
),
);
copied to clipboard

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),
),
),
),
),
);
copied to clipboard