show method
Show the snackbar on top
Implementation
void show(BuildContext context) {
OverlayState? overlay = Overlay.of(context);
late OverlayEntry overlayEntry;
overlayEntry = OverlayEntry(
builder: (context) => Positioned(
top: 32, // Position from top
left: 16,
right: 16,
child: Material(
color: Colors.transparent,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500),
curve: Curves.easeOutBack,
onEnd: () {
Future.delayed(const Duration(seconds: 2), () {
overlayEntry.remove();
onDismissed?.call();
});
},
builder: (context, value, child) {
return Transform.translate(
offset: Offset(0, -50 * (1 - value)),
child: Opacity(
opacity: value.clamp(0.0, 1.0),
child: Container(
constraints: const BoxConstraints(minHeight: 32),
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
decoration: BoxDecoration(
color: AppColors.blue200,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: AppColors.blue300, width: 2),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 700),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value.clamp(0.0, 1.0),
child: SvgPicture.asset(
'assets/images/InfoSnackBar.svg',
width: 16,
),
);
},
),
const SizedBox(width: 12),
Expanded(
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 600),
curve: Curves.easeOut,
builder: (context, value, child) {
return Opacity(
opacity: value.clamp(0.0, 1.0),
child: Transform.translate(
offset: Offset(20 * (1 - value), 0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
message,
style: const TextStyle(
fontFamily: 'Poppins',
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.black,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
if (description != null)
Text(
description!,
style: const TextStyle(
fontFamily: 'Poppins',
fontSize: 10,
fontWeight: FontWeight.w600,
color: AppColors.black,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
],
)),
);
},
),
),
],
),
),
),
);
},
),
),
),
);
overlay.insert(overlayEntry);
}