✨ Overview
flutter_utilsx is a collection of daily-use Flutter utilities that reduce boilerplate and keep your code clean. It covers:
- 🎨 Animated Top Snack Bar — glassmorphism snackbar with smooth slide & fade (no external animation package needed)
- 📦 Dialogs & Bottom Sheets — show/close dialogs with one line
- 📏 Responsive Size Extensions —
hp,wp,heightBox,widthBox - ✅ Validation Mixin — email, password, and more
- 📅 Date Utilities — format, convert, parse dates easily
- 🔍 Context Extensions — theme, size, colorScheme, textTheme
- 🔘 SweetButton — animated, tactile button widget
- 🪵 Logger — clean debug logging
🚀 Setup
Add the navigator key to your MaterialApp so context-free utilities work:
MaterialApp(
navigatorKey: AppCntx.navigatorKey,
home: MyHomePage(),
);
🔔 Animated Top Snack Bar
A zero-dependency, performance-first top snackbar with glassmorphism design.
Uses Flutter's native SlideTransition + FadeTransition — no third-party animation package required.
Animation behavior
- Slides down with
Curves.easeOutBack(springy feel) - Fades in simultaneously
- Stays visible for 2 seconds
- Slides back up with
Curves.easeIn+ fades out
Show a Success Snackbar
showDialog(
context: context,
barrierColor: Colors.transparent,
barrierDismissible: false,
builder: (_) => Stack(
children: [
AnimatedTopSnackBar(
message: 'Profile updated successfully!',
isError: false,
),
],
),
);
Show an Error Snackbar
showDialog(
context: context,
barrierColor: Colors.transparent,
barrierDismissible: false,
builder: (_) => Stack(
children: [
AnimatedTopSnackBar(
message: 'Something went wrong. Please try again.',
isError: true,
),
],
),
);
Helper function (recommended)
Wrap the call in a reusable helper so you can call it anywhere:
void showTopSnackBar(BuildContext context, {
required String message,
required bool isError,
}) {
showDialog(
context: context,
barrierColor: Colors.transparent,
barrierDismissible: false,
builder: (_) => Stack(
children: [
AnimatedTopSnackBar(
message: message,
isError: isError,
),
],
),
);
}
// Success
showTopSnackBar(context, message: 'Saved!', isError: false);
// Error
showTopSnackBar(context, message: 'Failed to save.', isError: true);
Without context (context-free, using AppCntx)
showDialog(
context: AppCntx.currentContext,
barrierColor: Colors.transparent,
barrierDismissible: false,
builder: (_) => Stack(
children: [
AnimatedTopSnackBar(
message: 'Operation completed!',
isError: false,
),
],
),
);
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
message |
String |
✅ | The text to display in the snackbar |
isError |
bool |
✅ | true = error (❌ icon), false = success (✅ icon) |
📦 Dialogs & Bottom Sheets
Setup
MaterialApp(
navigatorKey: AppCntx.navigatorKey,
home: MyHomePage(),
);
Show a Dialog
Dialogs.showDialogX(
child: MyCustomWidget(),
isCancelable: true, // tap outside to dismiss (default: true)
context: context, // optional — uses AppCntx if omitted
);
Check if Dialog is Open
bool isOpen = Dialogs.isDialogOpen;
Close a Dialog
Dialogs.closeDialog();
Show a Bottom Sheet
Dialogs.showBottomSheet(
child: MyCustomWidget(),
isCancelable: true, // default: true
heightFactor: 0.6, // fraction of screen height (default: 0.5)
elevation: 4,
showDragHandel: true,
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
context: context, // optional
);
📏 Responsive Size Extensions
// Height percentage of screen
5.hp // 5% of screen height
// Width percentage of screen
10.wp // 10% of screen width
// SizedBox helpers
20.heightBox // SizedBox(height: 20)
10.widthBox // SizedBox(width: 10)
✅ Validation Mixin
class MyFormState extends State<MyForm> with ValidationMixn {
// ...
TextFormField(
validator: (value) => validateEmail(value),
);
TextFormField(
validator: validatePassword,
);
}
📅 Date Utilities
// Parse string to DateTime
stringToDate('25/9/2023', DateFormates.YYYY_MM_DD);
// Convert to 24h time format
convertTime24Formate('3:30 PM');
// Get date with full month name e.g. "23-September-2021"
getDateByName(DateTime.now());
stringToDateByName('25-September-2021');
// Time elapsed between two dates (in minutes)
calculateTimeDelayInMinutes(
start: DateTime.now(),
end: DateTime.now().add(Duration(minutes: 30)),
);
// Get current date
currentDate;
🔍 Context Extensions
context.theme; // ThemeData
context.size; // Size (screen size)
context.textTheme; // TextTheme
context.colorScheme; // ColorScheme
Find Widgets in Context
// Find a StatelessWidget in the same parent context
MyStatelessWidget? widget = context.findStatelessWidgetInSameContext<MyStatelessWidget>();
if (widget != null) {
// use widget
}
// Find a StatefulWidget's State in ancestor context
MyState? state = context.findAncestorStateOfType<MyState>();
if (state != null) {
// use state
}
🔘 SweetButton
An animated, tactile button with a satisfying press effect:
SweetButton(
onPressed: () {
// your action
},
child: Text('Press Me'),
);
🪵 Logger
logMessage('Your debug message here');
🔢 Null / Empty Check
isNotEmpty(dynamic value); // returns true if value is not null/empty
📋 Additional Information
- 📌 Version:
1.1.1 - 🎯 Dart SDK:
>=3.0.0 <4.0.0 - 💙 Flutter:
>=1.17.0
This package is actively maintained. If you have suggestions, feature requests, or bugs:
- 🐛 Open an Issue
- 🍴 Fork & Contribute
- ⭐ If you find it useful, please give it a star on GitHub!
Made with ❤️ by Awab Sabir
Libraries
- context/context
- custom_utils/custom_utils
- custom_utils/validation_mixin
- date_operations/date_formates
- date_operations/date_formation
- dialogs/animated_top_snackbar
- dialogs/dialogs
- dynamic_size_extenshions/size_extenshions
- extenshions/context_extenshions
- flutter_utils
- orintation
- utils_functions/utils_function