flutter_utilsx logo

flutter_utilsx

A powerful Flutter utility package — less code, more productivity.

pub version GitHub License: MIT Flutter

Buy Me a Coffee


✨ 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 Extensionshp, 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,
      ),
    ],
  ),
);

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:


Made with ❤️ by Awab Sabir