super_daily_extensions

A modern, comprehensive Flutter toolkit providing country & city pickers, form validators, universal auto-masking, custom UI components, responsive utilities, and daily developer extensions to boost productivity.

pub package license

πŸ‘¨β€πŸ’» Author & Contact

Developed with ❀️ by Muhammad Sufyan

Feel free to reach out for feedback, bug reports, feature requests, or Flutter collaboration!

✨ Features

  • 🌍 All World Countries & Cities: Complete database of countries with flags, dial codes, and auto-filtered cities.
  • πŸ“ Smart Pickers:
    • CountryDropdown β€” Searchable country dropdown.
    • CityDropdown β€” Dynamic city dropdown auto-linked to selected country.
    • CountryPhoneField β€” Phone input with integrated flag & dial code picker.
    • CountryCityPhonePicker β€” Composite country, city, and phone form picker.
  • 🎨 Professional UI Components:
    • CustomButton β€” Primary, outlined, text variants, loading spinners, and icon support.
    • CustomContainer β€” Responsive percentage-based sizing (w: 90, h: 30), shadows, gradients, borders.
    • CustomText β€” Semantic typography (heading, subheading, body, caption) with responsive scaling and click handling.
    • CustomTextField β€” Status-aware (normal, success, warning, error), outline/filled/rounded variants, built-in password visibility toggle (eye icon), and universal auto-masking (e.g. mask: '#####-#######-#').
    • CustomSizedBox β€” Lightweight, expressive spacing box (height, width, square, shrink).
    • CustomAlertDialog β€” Animated backdrop blur dialogs with semantic types (success, warning, error, confirm).
    • CustomSnackBar β€” Floating semantic snackbars accessible via context or global key.
    • CustomDatePickerField, CustomTimePickerField, CustomDateRangePicker β€” Clean form pickers with intl formatting.
    • CustomImagePreview β€” Base64/memory thumbnail with interactive pinch-to-zoom full-screen viewer.
    • ProfessionalDataTable β€” Sortable, zebra-striped, responsive data table with dual-axis scrolling.
  • ⚑ Daily Developer Extensions:
    • Form Validation: val.validateRequired(), val.validateEmail(), val.validatePassword(), val.validateCNIC(), FormValidators.email(), FormValidators.password().
    • Context: context.width, context.isMobile, context.isKeyboardOpen, context.hideKeyboard(), context.showSuccessDialog(), context.showCustomSnackBar(), context.pickDate().
    • Widget: .p(), .px(), .py(), .center(), .expanded(), .onTap(), .card(), .cornerRadius(), .toCustomContainer().
    • String: 'test@email.com'.isValidEmail, 'flutter_dev'.toTitleCase, '0300-1234567'.cleanPhoneNumber, 'Title'.toHeading().
    • Num & Spacing: 16.h, 16.heightBox, 10.w, 10.widthBox, 2.seconds, 500.ms, dateTime.toDisplayDate(), timeOfDay.formatPattern().

πŸ“Έ Screenshots

🎨 Custom UI Widgets & Pickers

Custom Buttons & TextFields Country, City & Phone Picker Date, Time & Image Preview
Buttons and TextFields Country City Phone Picker Date Time and Image Preview

🎨 Semantic Alert Dialogs & Modals

Success Alert Warning Alert Error Alert Confirm Modal
Success Dialog Warning Dialog Error Dialog Confirm Dialog

πŸ“Š Data Tables & Dialog Overview

Professional Data Table Dialogs & Alerts Overview
Professional Data Table Dialogs and Alerts

πŸ“¦ Installation

Add this to your pubspec.yaml:

dependencies:
  super_daily_extensions: ^1.1.0

Then run:

flutter pub get

πŸš€ Quick Start

1. Import the package

import 'package:super_daily_extensions/super_daily_extensions.dart';

2. Country & City Dropdowns

// Standalone Country Dropdown
CountryDropdown(
  selectedCountry: selectedCountry,
  onChanged: (country) {
    setState(() => selectedCountry = country);
  },
)

// Dynamic City Dropdown (Filtered by Country)
CityDropdown(
  country: selectedCountry,
  selectedCity: selectedCity,
  onChanged: (city) {
    setState(() => selectedCity = city);
  },
)

// Phone Field with Country Flag
CountryPhoneField(
  selectedCountry: selectedCountry,
  onPhoneChanged: (fullPhone, rawNumber, dialCode) {
    print('Full: $fullPhone, Number: $rawNumber');
  },
)

// All-in-one Master Picker
CountryCityPhonePicker(
  showCountry: true,
  showCity: true,
  showPhone: true,
  onChanged: (country, city, phone) {
    print('Selected: ${country?.name}, $city, $phone');
  },
)

3. Professional UI Widgets

Buttons & Progress

CustomButton.primary(
  title: 'Save Changes',
  icon: Icons.check,
  onPressed: () {},
)

CustomButton.outlined(
  title: 'Cancel',
  onPressed: () {},
)

CustomButton(
  title: 'Loading',
  isLoading: true,
  onPressed: () {},
)

Responsive Container & Typography

// Responsive container (e.g. 90% screen width, 12px radius)
CustomContainer(
  w: 90,
  radius: 12,
  padding: const EdgeInsets.all(16),
  child: 'Welcome to App'.toHeading(),
)

// Chained widget extension
const Text('Card Content')
  .toCustomContainer(radius: 16, color: Colors.white);

// Typographic string extensions
'Dashboard Overview'.toHeading();
'Monthly Statistics'.toSubheading();
'Standard body description text.'.toBody();
'Updated 5m ago'.toCaption();

Dialogs & SnackBars via Context Extensions

// Semantic alert dialogs
context.showSuccessDialog(
  title: 'Payment Successful',
  message: 'Your order has been placed successfully!',
);

context.showConfirmDialog(
  title: 'Delete Item?',
  message: 'This action cannot be undone.',
  isDanger: true,
  onConfirm: () => deleteItem(),
);

// Floating SnackBars
context.showCustomSnackBar('File uploaded!');

Pickers & Data Table

// Date & Time form pickers
CustomDatePickerField(
  selectedDate: DateTime.now(),
  dateFormat: 'dd/MM/yyyy',
  onDateSelected: (date) {},
)

CustomTimePickerField(
  selectedTime: TimeOfDay.now(),
  timeFormat: 'hh:mm a',
  onTimeSelected: (time) {},
)

CustomDateRangePicker(
  startDate: startDate,
  endDate: endDate,
  onRangeSelected: (start, end) {},
)

// Professional Data Table
ProfessionalDataTable(
  columns: [
    DataTableColumn(label: 'Name', field: 'name', sortable: true),
    DataTableColumn(label: 'Role', field: 'role'),
  ],
  data: [
    {'name': 'Ali Khan', 'role': 'Developer'},
    {'name': 'Sara Ahmed', 'role': 'Designer'},
  ],
  buildActions: (row) => [
    IconButton(icon: const Icon(Icons.edit), onPressed: () {}),
  ],
)

4. Daily Developer Extensions

Spacing & Layout

// Custom SizedBox Widget
const CustomSizedBox(height: 16)
const CustomSizedBox.width(10)
const CustomSizedBox.square(24)

// Instant Extension Getters
16.heightBox // or 16.h
10.widthBox  // or 10.w

Text('Save')
  .p(12)
  .center()
  .onTap(() => print('Tapped!'))
  .card(radius: 12)

Context Helpers & Navigation

if (context.isMobile) {
  // Mobile layout
}

print(context.width); // Screen width
context.push(const ProfileScreen());
context.pop();
context.hideKeyboard();

String & Date Helpers

'dev@gmail.com'.isValidEmail;       // true
'flutter_dev'.toTitleCase;           // 'Flutter Dev'
'flutter'.capitalizeFirst;          // 'Flutter'
'0300-1234567'.cleanPhoneNumber;    // '03001234567'

DateTime.now().toDisplayDate();      // '15 Jan 2026'
TimeOfDay.now().formatPattern();     // '02:30 PM'

πŸ›‘οΈ Instant Form Validators

// Option 1: Chainable Extension on String?
CustomTextField(
  labelText: 'Email Address',
  validator: (val) => val.validateRequired('Email is required')
      ?? val.validateEmail('Please enter a valid email'),
)

// Password with automatic eye icon show/hide toggle
CustomTextField.password(
  labelText: 'Password',
  validator: (val) => val.validateRequired('Password is required')
      ?? val.validatePassword(minLength: 8),
)

CustomTextField(
  labelText: 'Confirm Password',
  validator: (val) => val.validateMatch(
    _passwordController.text, 
    'Passwords do not match',
  ),
)

// Option 2: Pre-built FormValidators Class
CustomTextField(
  validator: FormValidators.email(),
)

CustomTextField(
  validator: FormValidators.password(),
)

CustomTextField(
  validator: FormValidators.cnic(), // 13-digit CNIC (with/without dashes)
)

CustomTextField(
  validator: FormValidators.phone(),
)

⌨️ Keyboard & Theme Shortcuts

// Keyboard Utilities
context.hideKeyboard();              // Dismisses soft keyboard immediately
if (context.isKeyboardOpen) { ... }   // Checks if soft keyboard is visible
print(context.keyboardHeight);       // Height of keyboard in logical pixels

// Theme & Color Shortcuts
if (context.isDarkMode) { ... }      // Checks dark mode
if (context.isLightMode) { ... }     // Checks light mode
Color primary = context.primaryColor;
Color bg = context.scaffoldBackgroundColor;
Color secondary = context.secondaryColor;
Color card = context.cardColor;

🎭 Universal Auto-Masking (Any Country Pattern)

Automatically inserts separators (-, space, /) as the user types without extra packages:

// Pakistan CNIC (13 digits: 35202-1234567-1)
CustomTextField(
  labelText: 'CNIC',
  mask: '#####-#######-#', // Or SuperMask.pakistanCnic
)

// Any 9-digit or 11-digit Country National ID
CustomTextField(
  labelText: 'National ID',
  mask: '###-###-###', // 9-digit format
)

// Credit / Debit Card
CustomTextField(
  labelText: 'Card Number',
  mask: '#### #### #### ####', // Or SuperMask.creditCard
)

// Extract raw unmasked digits anywhere:
String raw = controller.text.cleanDigits; // "35202-1234567-1" -> "3520212345671"

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

app_imports
country_extensions
super_daily_extensions
A powerful Flutter toolkit providing Country & City selectors, custom UI widgets, responsive utilities, and daily developer extensions.