showChromiaSnackBar
Shows a customizable snackbar at the bottom of the screen.
Basic Usage
showChromiaSnackBar(
context: context,
message: 'Item added to cart',
);
Parameters
Callback when action button is pressed
duration
Duration
default:"Duration(seconds: 4)"
Duration to show the snackbar
behavior
SnackBarBehavior
default:"SnackBarBehavior.floating"
Behavior of the snackbar
With Action
showChromiaSnackBar(
context: context,
message: 'Item deleted',
actionLabel: 'UNDO',
onActionPressed: () {
// Restore the item
},
);
With Icon
showChromiaSnackBar(
context: context,
message: 'Network connection restored',
icon: Icons.wifi,
);
Extension Methods
Chromia UI provides convenient extension methods on BuildContext for showing different types of snackbars.
Success Snackbar
context.showSuccessSnackBar(
message: 'Changes saved successfully',
);
Parameters
Callback when action is pressed
duration
Duration
default:"Duration(seconds: 4)"
Duration to show the snackbar
Error Snackbar
context.showErrorSnackBar(
message: 'Failed to save changes',
);
Parameters
Callback when action is pressed
duration
Duration
default:"Duration(seconds: 4)"
Duration to show the snackbar
Warning Snackbar
context.showWarningSnackBar(
message: 'Your session will expire soon',
);
Parameters
Callback when action is pressed
duration
Duration
default:"Duration(seconds: 4)"
Duration to show the snackbar
Info Snackbar
context.showInfoSnackBar(
message: 'New features available',
);
Parameters
Callback when action is pressed
duration
Duration
default:"Duration(seconds: 4)"
Duration to show the snackbar
Complete Example
class SnackbarExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ChromiaAppBar(title: 'Snackbar Example'),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ChromiaButton(
label: 'Show Success',
onPressed: () {
context.showSuccessSnackBar(
message: 'Operation completed successfully',
);
},
),
SizedBox(height: 16),
ChromiaButton(
label: 'Show Error',
onPressed: () {
context.showErrorSnackBar(
message: 'An error occurred',
actionLabel: 'RETRY',
onActionPressed: () {
// Retry the operation
},
);
},
),
SizedBox(height: 16),
ChromiaButton(
label: 'Show Warning',
onPressed: () {
context.showWarningSnackBar(
message: 'Low storage space',
actionLabel: 'CLEAR',
onActionPressed: () {
// Clear storage
},
);
},
),
SizedBox(height: 16),
ChromiaButton(
label: 'Show Info',
onPressed: () {
context.showInfoSnackBar(
message: 'Version 2.0 is now available',
actionLabel: 'UPDATE',
onActionPressed: () {
// Navigate to update
},
);
},
),
SizedBox(height: 16),
ChromiaButton(
label: 'Custom Snackbar',
onPressed: () {
showChromiaSnackBar(
context: context,
message: 'Custom styled message',
icon: Icons.star,
backgroundColor: Colors.purple,
textColor: Colors.white,
duration: Duration(seconds: 6),
);
},
),
],
),
),
);
}
}
Best Practices
- Keep messages concise - Snackbars should contain brief messages (1-2 lines)
- Use appropriate types - Use success/error/warning/info variants for semantic meaning
- Provide actions when needed - If users can undo or respond to the message, include an action
- Don’t overuse - Avoid showing multiple snackbars in quick succession
- Consider duration - Default 4 seconds is usually appropriate, but adjust based on message complexity
Example: Form Submission
class FormExample extends StatefulWidget {
@override
State<FormExample> createState() => _FormExampleState();
}
class _FormExampleState extends State<FormExample> {
final _formKey = GlobalKey<FormState>();
bool _isSubmitting = false;
Future<void> _submitForm() async {
if (!_formKey.currentState!.validate()) {
context.showErrorSnackBar(
message: 'Please fill in all required fields',
);
return;
}
setState(() => _isSubmitting = true);
try {
// Simulate API call
await Future.delayed(Duration(seconds: 2));
context.showSuccessSnackBar(
message: 'Form submitted successfully',
);
Navigator.pop(context);
} catch (e) {
context.showErrorSnackBar(
message: 'Failed to submit form',
actionLabel: 'RETRY',
onActionPressed: _submitForm,
);
} finally {
setState(() => _isSubmitting = false);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ChromiaAppBar(title: 'Form Example'),
body: Form(
key: _formKey,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
// Form fields here
Spacer(),
ChromiaButton(
label: 'Submit',
onPressed: _isSubmitting ? null : _submitForm,
isLoading: _isSubmitting,
),
],
),
),
),
);
}
}
