Replace SnackBars with custom iOS-style top alerts with icons

This commit is contained in:
Sridhar R 2026-06-10 14:05:58 +05:30
parent 4acfdb9c4a
commit 67142977c0
5 changed files with 198 additions and 69 deletions

View File

@ -1,3 +1,4 @@
import 'dart:async';
import 'package:flutter/material.dart';
class FadeSlidePageRoute<T> extends PageRouteBuilder<T> {
@ -34,3 +35,154 @@ class FadeSlidePageRoute<T> extends PageRouteBuilder<T> {
reverseTransitionDuration: const Duration(milliseconds: 200),
);
}
void showTopAlert(
BuildContext context,
String message, {
bool isError = false,
IconData? icon,
}) {
final overlayState = Overlay.of(context);
late OverlayEntry overlayEntry;
overlayEntry = OverlayEntry(
builder: (context) => _TopAlertWidget(
message: message,
isError: isError,
icon: icon,
onDismiss: () {
overlayEntry.remove();
},
),
);
overlayState.insert(overlayEntry);
}
class _TopAlertWidget extends StatefulWidget {
final String message;
final bool isError;
final IconData? icon;
final VoidCallback onDismiss;
const _TopAlertWidget({
required this.message,
required this.isError,
this.icon,
required this.onDismiss,
});
@override
State<_TopAlertWidget> createState() => _TopAlertWidgetState();
}
class _TopAlertWidgetState extends State<_TopAlertWidget> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _slideAnimation;
late Animation<double> _opacityAnimation;
Timer? _dismissTimer;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 400),
);
_slideAnimation = CurvedAnimation(
parent: _controller,
curve: Curves.easeOutBack,
);
_opacityAnimation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
_controller.forward();
_dismissTimer = Timer(const Duration(milliseconds: 2800), () {
if (mounted) {
_controller.reverse().then((_) {
widget.onDismiss();
});
}
});
}
@override
void dispose() {
_dismissTimer?.cancel();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final topPadding = mediaQuery.padding.top + 16.0;
IconData alertIcon = widget.icon ??
(widget.isError ? Icons.error_outline : Icons.check_circle_outline);
Color backgroundColor = widget.isError ? const Color(0xFFBA1A20) : const Color(0xFF2E7D32);
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Positioned(
top: topPadding * _slideAnimation.value - 80.0 * (1.0 - _slideAnimation.value),
left: 16.0,
right: 16.0,
child: Opacity(
opacity: _opacityAnimation.value,
child: Material(
color: Colors.transparent,
child: Align(
alignment: Alignment.topCenter,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 450),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.12),
blurRadius: 16,
offset: const Offset(0, 6),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
alertIcon,
color: Colors.white,
size: 20,
),
const SizedBox(width: 12),
Expanded(
child: Text(
widget.message,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
),
),
),
),
);
},
);
}
}

View File

@ -1,5 +1,6 @@
import 'dart:math';
import 'package:flutter/material.dart';
import '../route_transitions.dart';
class ProductItem {
final String id;
@ -160,13 +161,7 @@ class _BillingDashboardScreenState extends State<BillingDashboardScreen> {
}
void _showErrorSnackBar(String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
backgroundColor: Colors.red[800],
behavior: SnackBarBehavior.floating,
),
);
showTopAlert(context, message, isError: true);
}
double get _subtotal {
@ -944,12 +939,10 @@ class _BillingDashboardScreenState extends State<BillingDashboardScreen> {
const SizedBox(height: 16),
ElevatedButton.icon(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('🧾 Thermal Printed: $_invoiceNumber successfully!'),
backgroundColor: const Color(0xFF10B981),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Thermal Printed: $_invoiceNumber successfully!',
icon: Icons.print,
);
},
icon: const Icon(Icons.print, size: 16),

View File

@ -90,29 +90,25 @@ class _BusinessSetupScreenState extends State<BusinessSetupScreen> {
setState(() {
_uploadedDocs[docName] = file.name;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('✅ Successfully loaded $docName!'),
backgroundColor: Colors.green,
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Successfully loaded $docName!',
icon: Icons.check_circle_outline,
);
}
} catch (e) {
if (!mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Failed to pick image: $e'),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Failed to pick image: $e',
isError: true,
);
}
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Permission denied. Cannot load document image.'),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Permission denied. Cannot load document image.',
isError: true,
);
}
}
@ -298,11 +294,10 @@ class _BusinessSetupScreenState extends State<BusinessSetupScreen> {
setState(() {
_uploadedDocs.remove(docName);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$docName attachment removed.'),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'$docName attachment removed.',
icon: Icons.delete_outline,
);
},
),
@ -590,12 +585,10 @@ class _BusinessSetupScreenState extends State<BusinessSetupScreen> {
const SizedBox(width: 12),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('GSTIN Verified Successfully!'),
backgroundColor: Colors.green,
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'GSTIN Verified Successfully!',
icon: Icons.verified_outlined,
);
},
style: ElevatedButton.styleFrom(
@ -628,12 +621,10 @@ class _BusinessSetupScreenState extends State<BusinessSetupScreen> {
const SizedBox(height: 8),
InkWell(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('📍 Location detected: Sector 62, Noida, UP'),
backgroundColor: Colors.green,
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Location detected: Sector 62, Noida, UP',
icon: Icons.my_location_outlined,
);
},
borderRadius: BorderRadius.circular(16),

View File

@ -84,11 +84,10 @@ class _MobileLoginScreenState extends State<MobileLoginScreen> {
if (status.isGranted || kIsWeb) {
_showContactPicker();
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Contacts permission was denied. Please enter the number manually or enable it in Settings.'),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Contacts permission was denied. Please enter the number manually or enable it in Settings.',
isError: true,
);
}
}
@ -402,12 +401,10 @@ class _MobileLoginScreenState extends State<MobileLoginScreen> {
setState(() {
_isValid = true;
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('⚡ Phone verified automatically with Truecaller! Joining PozoApp...'),
backgroundColor: Color(0xFF005FAF),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Phone verified automatically with Truecaller! Joining PozoApp...',
icon: Icons.verified_user_outlined,
);
Navigator.push(
context,
@ -610,11 +607,10 @@ class _MobileLoginScreenState extends State<MobileLoginScreen> {
SizedBox(height: gap / 2),
OutlinedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('💬 Connecting with Pozo Support... Please wait.'),
behavior: SnackBarBehavior.floating,
),
showTopAlert(
context,
'Connecting with Pozo Support... Please wait.',
icon: Icons.support_agent_outlined,
);
},
style: OutlinedButton.styleFrom(

View File

@ -293,13 +293,10 @@ class SetupCompleteScreen extends StatelessWidget {
// Primary Launcher CTA
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('⚡ Launching Register Dashboard... Enjoy billing!'),
behavior: SnackBarBehavior.floating,
backgroundColor: Colors.green,
duration: Duration(milliseconds: 1500),
),
showTopAlert(
context,
'Launching Register Dashboard... Enjoy billing!',
icon: Icons.rocket_launch_outlined,
);
Navigator.push(
context,