Save Points Extensions #

A comprehensive Flutter library of extensions and reusable widgets designed to enhance developer productivity and code quality. This library provides a collection of well-organized, type-safe extensions and widgets following Flutter best practices.

📋 Table of Contents #

• Features
• Installation
• Avoiding Conflicts
• Quick Start
• Available Extensions
• Utilities
• Pre-built UI Components
• Project Structure
• Best Practices
• Examples
• Contributing
• Support

✨ Features #

📦 Installation #

Add this to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  save_points_extensions_utils: ^1.3.0

Then import the extensions:

// Option 1: Import everything from main library
import 'package:save_points_extensions_utils/save_points_extensions_utils.dart';

// Option 2: Import specific parts
import 'package:save_points_extensions_utils/extensions/logics/extensions.dart';
import 'package:save_points_extensions_utils/utils/utils.dart';

⚠️ Avoiding Conflicts with Other Packages #

If you're using multiple packages that might have naming conflicts (e.g., save_points_extensions_utils and save_points_chart), here are strategies to avoid conflicts:

Strategy 1: Use Library Prefixes (Recommended) #

import 'package:save_points_extensions_utils/save_points_extensions_utils.dart' as utils;
import 'package:save_points_chart/save_points_chart.dart' as chart;

// Use with prefix
utils.Spacing.md;
utils.Validators.email('test@example.com');
chart.ChartConfig();

Strategy 2: Use Explicit Imports with show #

// Import only what you need
import 'package:save_points_extensions_utils/utils/utils.dart' 
  show Spacing, Validators, AppConstants;
import 'package:save_points_chart/chart_utils.dart' 
  show ChartConfig, ChartType;

Strategy 3: Use hide to Exclude Conflicting Names #

import 'package:save_points_extensions_utils/utils/utils.dart' 
  hide SpacingConfig; // Hide if it conflicts
import 'package:save_points_chart/chart_utils.dart';

Strategy 4: Import Extensions Separately #

Extensions on built-in types (String, List, Widget, etc.) won't conflict if they have different method names. If they do conflict, use prefixes:

import 'package:save_points_extensions_utils/save_points_extensions_utils.dart' as utils;
import 'package:save_points_chart/save_points_chart.dart' as chart;

// Extensions work normally
'hello'.capitalize(); // Uses utils extension

// If methods conflict, use explicit extension
utils.StringExtensions('hello').capitalize();

Common Conflict Scenarios #

1. Utility Classes: Spacing, Validators, AppConstants - Use prefixes
2. Config Classes: SpacingConfig, ValidatorConfig - Use prefixes or show/hide
3. Extension Methods: Usually fine unless same method name - Use prefixes if needed
4. Static Methods: Use prefixes or explicit class names

Best Practice #

For projects using multiple save_points_* packages, always use library prefixes:

import 'package:save_points_extensions_utils/save_points_extensions_utils.dart' as utils;
import 'package:save_points_chart/save_points_chart.dart' as chart;
import 'package:save_points_other/save_points_other.dart' as other;

// Clear and conflict-free
utils.Spacing.md;
chart.ChartConfig();
other.OtherUtility();

📖 For more details, see:

• Conflict Prevention Guide - Detailed guide on avoiding conflicts
• Best Practices - Comprehensive best practices guide

🚀 Quick Start #

Using Widget Extensions #

Chain multiple extensions together for clean, readable code:

import 'package:save_points_extensions_utils/extensions/extensions.dart';

// Chain widget modifications
const Text('Chained Extensions')
  .padding(all: 20)
  .center()
  .clipRRect(borderRadius: 16)
  .decoratedBox(
    color: context.colorScheme.primaryContainer,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: context.colorScheme.primary.withOpacity(0.3),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  )
  .onTap(() => print('Tapped!'))
  .tooltip('Tap me!');

// Transform widgets
const Icon(Icons.star, size: 48)
  .rotate(0.2)
  .scale(1.5)
  .translate(x: 10, y: 5);

// Clip widgets
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)
  .clipRRect(borderRadius: 16)
  .clipOval()
  .onTap(() => print('Tapped'));

Using Context Extensions #

Easy access to theme, media query, and navigation:

import 'package:save_points_extensions_utils/extensions/extensions.dart';

// Theme access
context.colorScheme.primary
context.textTheme.headlineLarge
context.isDarkMode
context.isLightMode

// Screen dimensions
context.screenWidth
context.screenHeight
context.screenSize
context.isMobile
context.isTablet
context.isDesktop

// Navigation helpers
context.push(MyPage());
context.pop();
context.showMessage('Hello!'); // Show feedback message
context.hideKeyboard();

Using Data Extensions #

String Extensions

// Text manipulation
'hello world'.capitalize()           // "Hello world"
'hello world'.capitalizeWords()       // "Hello World"
'very long text'.truncate(10)        // "very long..."
'hello world'.removeWhitespace()     // "helloworld"
'hello world'.reverse()               // "dlrow olleh"
'hello world'.toSlug()                // "hello-world"

// Validation
'email@test.com'.isValidEmail        // true
'https://example.com'.isValidUrl      // true
'+1234567890'.isValidPhone           // true
'12345'.isNumeric                     // true
'Hello'.isAlpha                       // true
'Hello123'.isAlphanumeric             // true

// Utilities
'hello world'.startsWithAny(['he', 'hi'])  // true
'hello world'.endsWithAny(['ld', 'la'])    // true
'hello world'.findAll(RegExp(r'\w+'))      // ['hello', 'world']

Number Extensions

// Formatting
42.format(prefix: 'Count: ')              // "Count: 42"
1234567.formatWithSeparator()             // "1,234,567"
1234.formatCurrency()                     // "$1,234.00"
1500000.toHumanReadable()                 // "1.5M"

// Validation
42.isEven                                 // true
42.isOdd                                  // false
5.isPositive                              // true
(-5).isNegative                           // true
5.isBetween(1, 10)                        // true

// Duration helpers
60.seconds                                // Duration(seconds: 60)
5.minutes                                 // Duration(minutes: 5)
2.hours                                   // Duration(hours: 2)
7.days                                    // Duration(days: 7)

// Ranges
1.rangeTo(5)                              // [1, 2, 3, 4]
1.rangeToInclusive(5)                     // [1, 2, 3, 4, 5]

List Extensions

// Safe access
list.firstOrNull                          // First element or null
list.lastOrNull                           // Last element or null
list.elementAtOrNull(5)                   // Element at index or null
list.elementAtOrDefault(5, defaultValue)  // Element or default

// Manipulation
[1, 2, 2, 3].distinct                     // [1, 2, 3]
list.distinctBy((item) => item.id)        // Remove duplicates by key
list.chunk(3)                             // Split into chunks of 3
list.shuffled                             // New shuffled list

// Querying
list.firstWhereOrNull((x) => x > 3)       // First matching or null
list.lastWhereOrNull((x) => x > 3)        // Last matching or null
list.any((x) => x > 5)                    // true if any matches
list.all((x) => x > 0)                    // true if all match

// Aggregation
list.sum((x) => x.value)                  // Sum of values
list.average((x) => x.value)              // Average of values
list.maxBy((x) => x.value)                 // Max element
list.minBy((x) => x.value)                 // Min element

// Grouping
list.groupBy((item) => item.category)      // Map<K, List<T>>

// Slicing
list.drop(2)                              // Remove first 2
list.dropLast(2)                          // Remove last 2
list.take(3)                              // Take first 3
list.takeLast(3)                          // Take last 3

Map Extensions

// Safe access
map.getOrNull('key')                      // Value or null
map.getOrDefault('key', defaultValue)     // Value or default
map.getOrPut('key', () => defaultValue)   // Value or compute and store

// Transformation
map.mapKeys((k) => k.toUpperCase())       // Transform keys
map.mapValues((v) => v * 2)               // Transform values
map.filter((k, v) => v > 10)              // Filter entries

// Utilities
map.firstEntry                            // First entry or null
map.lastEntry                             // Last entry or null
map.merge(otherMap)                      // Merge maps
map.mergeWith(otherMap, (a, b) => a + b)  // Merge with function
map.invert()                              // Swap keys and values
map.sortedByKey()                         // Sort by keys
map.sortedByValue()                       // Sort by values

Color Extensions

// Manipulation
color.darken(0.2)                         // Darker color
color.lighten(0.2)                        // Lighter color
color.saturate(0.3)                       // More saturated
color.desaturate(0.3)                     // Less saturated
color.blend(otherColor, 0.5)              // Blend colors
color.adjustBrightness(0.2)               // Adjust brightness
color.adjustHue(120)                      // Shift hue
color.complementary                       // Complementary color

// Conversion
color.hexString                           // "#FF2196F3"
color.hexStringNoAlpha                    // "#2196F3"
color.toRgb()                             // {'r': 255, 'g': 0, 'b': 0}
color.toHsl()                             // {'h': 0.0, 's': 1.0, 'l': 0.5}

// Utilities
color.isDark                              // true if dark
color.isLight                             // true if light
color.contrastingColor                    // Black or white for contrast

// Static factories
ColorExtensions.fromHex('#FF0000')        // From hex string
ColorExtensions.fromRgb(255, 0, 0)        // From RGB
ColorExtensions.fromHsl(0, 1.0, 0.5)      // From HSL

Animation Extensions

// Animation status
animation.isCompleted                     // true if completed
animation.isDismissed                     // true if dismissed
animation.isForward                       // true if forward
animation.isReverse                       // true if reverse
animation.isAnimating                     // true if animating
animation.clampedValue                    // Value clamped 0.0-1.0
animation.reversedValue                   // 1.0 - value

// Controller utilities
controller.toggle()                       // Toggle animation
controller.resetAndForward()              // Reset and forward
controller.resetAndReverse()              // Reset and reverse
controller.isNotAnimating                 // true if not animating

// Tween utilities
tween.reverse                             // Reverse tween
tween.evaluate(0.5)                       // Value at 0.5
tween.lerp(0.5)                           // Value at 0.5

Widget Animation Effects

// Fade animations
Text('Hello').fadeIn()                    // Fade in animation
Text('Hello').fadeOut()                   // Fade out animation
Text('Hello').fade(opacity: 0.5)          // Animated opacity

// Scale animations
Icon(Icons.star).scaleIn()                // Scale in with bounce
Icon(Icons.star).scaleOut()               // Scale out animation
Icon(Icons.star).animatedScale(scale: 1.5) // Animated scale

// Slide animations
Card().slideInFromLeft()                  // Slide in from left
Card().slideInFromRight()                 // Slide in from right
Card().slideInFromTop()                   // Slide in from top
Card().slideInFromBottom()                // Slide in from bottom

// Bounce & elastic
Button().bounceIn()                       // Bounce in animation
Button().elasticIn()                      // Elastic scale effect
Icon(Icons.arrow).bounce()                // Continuous bounce

// Rotation
Icon(Icons.settings).animatedRotate(turns: 0.5)  // Animated rotation
Icon(Icons.refresh).spin()                // Continuous spin
Icon(Icons.refresh).spinIn()              // Spin in animation

// Shake (great for error feedback)
TextField().shake()                       // One-time shake
TextField().shakeHorizontal()             // Continuous horizontal shake
TextField().shakeVertical()               // Continuous vertical shake

// Pulse & heartbeat
Icon(Icons.favorite).pulse()              // Continuous pulse
Icon(Icons.favorite).heartbeat()          // Heartbeat effect

// Flip animations
Card().flipHorizontal(isFlipped: true)    // Horizontal flip
Card().flipVertical(isFlipped: true)      // Vertical flip
Card().flipIn()                           // Flip in animation

// Special effects
Container().shimmer()                     // Shimmer loading effect
Image().zoomIn()                          // Zoom in with fade
Image().blurIn()                          // Blur to clear
Icon(Icons.cloud).float()                 // Floating animation
Icon(Icons.star).glow(color: Colors.amber) // Glowing effect
Icon(Icons.bell).swing()                  // Pendulum swing
Icon(Icons.cake).wobble()                 // Wobble rotation

// Fun animations
Text('Boing!').jello()                    // Jello effect
Button().rubberBand()                     // Rubber band stretch

// Hero animation
Image().hero('image-tag')                 // Hero transition wrapper

// Utility animations
Container().animatedSize()                // Animated size changes
Text('Hello').crossFade(key: ValueKey(1)) // Cross-fade switching
Text('Typing...').typing(text: 'Hello')   // Typewriter effect

Using Utilities #

Validators

import 'package:save_points_extensions_utils/utils/utils.dart';

// In form validation
TextFormField(
  validator: (value) => Validators.required(value),
)

TextFormField(
  validator: (value) => Validators.email(value),
)

// Available validators
Validators.required(value)
Validators.email(value)
Validators.phone(value)
Validators.url(value)
Validators.numeric(value)
Validators.minLength(value, 8)
Validators.maxLength(value, 100)
Validators.match(value, otherValue)

Spacing

import 'package:save_points_extensions_utils/utils/utils.dart';

// Constants
Spacing.xs  // 4.0
Spacing.sm  // 8.0
Spacing.md  // 16.0
Spacing.lg  // 24.0
Spacing.xl  // 32.0

// Helpers
Spacing.vertical(16)
Spacing.horizontal(8)
Spacing.all(16)
Spacing.symmetric(horizontal: 8, vertical: 16)
Spacing.only(top: 8, bottom: 16)

Constants

import 'package:save_points_extensions_utils/utils/utils.dart';

AppConstants.defaultPadding
AppConstants.defaultBorderRadius
AppConstants.shortAnimation

Debounce & Throttle

import 'package:save_points_extensions_utils/utils/utils.dart';

final debounce = Debounce(const Duration(milliseconds: 300));
final throttle = Throttle(const Duration(milliseconds: 500));

// Runs once after rapid triggers settle
debounce(() {
  // Your code here
});

// Runs at most once in the given interval
throttle(() {
  // Your code here
});

📚 Available Extensions #

Widget Extensions #

Located in lib/extensions/widgets/:

• Core Extensions (widget_core_extensions.dart) - padding, margin, center, expanded, flexible, sizedBox, container, opacity, visible, safeArea, decoratedBox
• Gesture Extensions (widget_gesture_extensions.dart) - onTap, onLongPress, onDoubleTap, inkWell
• Clip Extensions (widget_clip_extensions.dart) - clipRRect, clipOval, clipRect
• Transform Extensions (widget_transform_extensions.dart) - rotate, scale, translate, transform
• Layout Extensions (widget_layout_extensions.dart) - align, positioned, aspectRatio, constrained, fittedBox, fractionallySizedBox
• Material Extensions (widget_material_extensions.dart) - material, card
• Animation Effects (widget_animation_extensions.dart) - 40+ animation effects (fadeIn, scaleIn, slideIn, bounce, pulse, shake, shimmer, flip, glow, hero, and more)
• Scroll Extensions (widget_scroll_extensions.dart) - scrollable
• Sizing Extensions (widget_sizing_extensions.dart) - intrinsicHeight, intrinsicWidth, unconstrained, limitedBox, overflowBox
• Semantics Extensions (widget_semantics_extensions.dart) - semantics, tooltip
• Text Extensions (widget_text_extensions.dart) - TextExtensions.bold, TextExtensions.italic
• Icon Extensions (widget_icon_extensions.dart) - IconExtensions.themed
• Image Extensions (widget_image_extensions.dart) - ImageExtensions.networkWithFallback
• List Extensions (widget_list_extensions.dart) - ListViewExtensions.withPadding, GridViewExtensions.withDefaults
• Stack Extensions (widget_stack_extensions.dart) - StackExtensions.centered
• Column/Row Extensions (widget_column_row_extensions.dart) - ColumnExtensions.centered, RowExtensions.centered
• Wrap Extensions (widget_column_row_extensions.dart) - WrapExtensions.withSpacing

Data Type Extensions #

• String Extensions (string_extensions.dart) - 30+ methods for text manipulation, validation, and formatting
• Number Extensions (number_extensions.dart) - Formatting, validation, duration helpers, ranges, and more
• Duration Extensions (duration_extensions.dart) - Human-readable strings, formatted output
• List Extensions (list_extensions.dart) - 40+ methods for safe access, manipulation, querying, aggregation, grouping
• Map Extensions (map_extensions.dart) - Safe access, transformation, filtering, merging, sorting
• Color Extensions (color_extensions.dart) - Color manipulation, conversion, blending, HSL/RGB conversion
• Context Extensions (context_extensions.dart) - Theme access, media query, navigation, keyboard, screen size detection
• Animation Extensions (animation_extensions.dart) - Animation status checks, controller utilities, tween helpers

🛠️ Utilities #

Validators #

Comprehensive form validation utilities:

import 'package:save_points_extensions_utils/utils/utils.dart';

Validators.required(value)
Validators.email(value)
Validators.phone(value)
Validators.url(value)
Validators.numeric(value)
Validators.minLength(value, 8)
Validators.maxLength(value, 100)
Validators.match(value, otherValue)

Spacing #

Consistent spacing constants and helpers:

import 'package:save_points_extensions_utils/utils/utils.dart';

// Constants
Spacing.xs  // 4.0
Spacing.sm  // 8.0
Spacing.md  // 16.0
Spacing.lg  // 24.0
Spacing.xl  // 32.0

// Helpers
Spacing.vertical(16)
Spacing.horizontal(8)
Spacing.all(16)
Spacing.symmetric(horizontal: 8, vertical: 16)
Spacing.only(top: 8, bottom: 16)

Constants #

Application-wide constants:

import 'package:save_points_extensions_utils/utils/utils.dart';

AppConstants.defaultPadding
AppConstants.defaultBorderRadius
AppConstants.shortAnimation

Debounce & Throttle #

Control how frequently callbacks execute to prevent spamming expensive work:

import 'package:save_points_extensions_utils/utils/utils.dart';

final debounce = Debounce(const Duration(milliseconds: 300));
final throttle = Throttle(const Duration(milliseconds: 500));

// Runs once after rapid triggers settle
debounce(() {
  // Your code here
});

// Runs at most once in the given interval
throttle(() {
  // Your code here
});

🎨 Pre-built UI Components #

The library includes 35+ production-ready, customizable UI components organized by category:

Core Components #

Essential building blocks for any Flutter application

import 'package:save_points_extensions_utils/widgets/components/components.dart';

// Avatar with fallback
AvatarWidget(
  imageUrl: 'https://example.com/avatar.jpg',
  fallbackText: 'JD',
  size: 50,
  showStatusIndicator: true,
)

// Custom button with loading state
CustomButton(
  text: 'Submit',
  onPressed: () => submitForm(),
  isLoading: false,
  icon: Icons.send,
)

// Custom text field with validation
CustomTextField(
  label: 'Email',
  hint: 'Enter your email',
  validator: Validators.email,
  prefixIcon: Icons.email,
)

// Custom card with elevation
CustomCard(
  title: 'Card Title',
  subtitle: 'Card description',
  child: Text('Content here'),
  onTap: () => print('Tapped'),
)

// Loading states
LoadingIndicator(size: 40, color: Colors.blue)
ShimmerLoading(width: 200, height: 100)
SkeletonLoader(width: double.infinity, height: 60)

// Empty states
EmptyStateWidget(
  icon: Icons.inbox,
  title: 'No items',
  message: 'Add your first item',
  actionLabel: 'Add Item',
  onAction: () => addItem(),
)

// Expandable card
ExpansionCard(
  title: 'Details',
  children: [Text('Hidden content')],
)

// Rating widget
RatingWidget(
  rating: 4.5,
  maxRating: 5,
  onRatingChanged: (rating) => updateRating(rating),
)

// Progress indicators
ProgressBar(value: 0.7, showPercentage: true)

// Stepper
StepperWidget(
  currentStep: 1,
  steps: ['Step 1', 'Step 2', 'Step 3'],
  onStepTapped: (index) => goToStep(index),
)

// Timeline
TimelineWidget(
  events: [
    TimelineEvent(title: 'Event 1', time: '10:00 AM'),
    TimelineEvent(title: 'Event 2', time: '2:00 PM'),
  ],
)

// Search bar
SearchBarWidget(
  onSearch: (query) => searchItems(query),
  hintText: 'Search...',
)

// Navigation components
NavigationBarWidget(
  currentIndex: 0,
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
  onTap: (index) => changePage(index),
)

// Carousel
CarouselWidget(
  items: [Image.network('url1'), Image.network('url2')],
  autoPlay: true,
  height: 200,
)

// Breadcrumb navigation
BreadcrumbWidget(
  items: ['Home', 'Products', 'Details'],
  onTap: (index) => navigateToLevel(index),
)

// Menu
MenuWidget(
  items: [
    MenuItem(label: 'Edit', icon: Icons.edit),
    MenuItem(label: 'Delete', icon: Icons.delete),
  ],
  onItemSelected: (item) => handleAction(item),
)

// Segmented control
SegmentedControl(
  segments: ['Option 1', 'Option 2', 'Option 3'],
  selectedIndex: 0,
  onSegmentChanged: (index) => handleChange(index),
)

// Custom chip
CustomChip(
  label: 'Tag',
  onDeleted: () => removeTag(),
  avatar: Icon(Icons.star),
)

// Badge
BadgeWidget(
  child: Icon(Icons.notifications),
  value: '5',
  color: Colors.red,
)

// Notification card
NotificationCard(
  title: 'New Message',
  message: 'You have a new message',
  time: '5 min ago',
  onTap: () => openMessage(),
)

// Info banner
InfoBanner(
  message: 'This is an important message',
  type: BannerType.warning,
  onDismiss: () => dismissBanner(),
)

// Divider with text
DividerWidget(text: 'OR', thickness: 1)

// Tooltip
TooltipWidget(
  message: 'This is a tooltip',
  child: Icon(Icons.info),
)

// Tag widget
TagWidget(
  label: 'Featured',
  color: Colors.orange,
  icon: Icons.star,
)

Available Components #

🔘 Buttons & Actions

📝 Form & Input

📦 Cards & Containers

🏷️ Tags & Badges

🧭 Navigation

⏳ Loading & Progress

📢 Feedback & Status

👤 Display & Media

📁 Project Structure #

lib/
├── app/
├── extensions/
│   ├── widgets/
│   │   ├── widget_core_extensions.dart
│   │   ├── widget_gesture_extensions.dart
│   │   ├── widget_clip_extensions.dart
│   │   ├── widget_transform_extensions.dart
│   │   ├── widget_layout_extensions.dart
│   │   ├── widget_material_extensions.dart
│   │   ├── widget_animation_extensions.dart
│   │   ├── widget_scroll_extensions.dart
│   │   ├── widget_sizing_extensions.dart
│   │   ├── widget_semantics_extensions.dart
│   │   ├── widget_text_extensions.dart
│   │   ├── widget_icon_extensions.dart
│   │   ├── widget_image_extensions.dart
│   │   ├── widget_list_extensions.dart
│   │   ├── widget_stack_extensions.dart
│   │   ├── widget_column_row_extensions.dart
│   │   └── widgets.dart
│   ├── animation_extensions.dart
│   ├── color_extensions.dart
│   ├── context_extensions.dart
│   ├── duration_extensions.dart
│   ├── list_extensions.dart
│   ├── map_extensions.dart
│   ├── number_extensions.dart
│   ├── string_extensions.dart
│   ├── widget_extensions.dart
│   └── extensions.dart
├── pages/
├── utils/
│   ├── constants.dart
│   ├── spacing.dart
│   ├── validators.dart
│   ├── debounce.dart
│   ├── helpers.dart
│   ├── url_utils.dart
│   ├── string_formatters.dart
│   └── utils.dart
├── widgets/
│   ├── components/
│   │   ├── avatar_widget.dart
│   │   ├── badge_widget.dart
│   │   ├── breadcrumb_widget.dart
│   │   ├── carousel_widget.dart
│   │   ├── copy_button.dart
│   │   ├── custom_button.dart
│   │   ├── custom_card.dart
│   │   ├── custom_chip.dart
│   │   ├── custom_list_tile.dart
│   │   ├── custom_text_field.dart
│   │   ├── divider_widget.dart
│   │   ├── drawer_widget.dart
│   │   ├── dropdown_widget.dart
│   │   ├── empty_state_widget.dart
│   │   ├── expansion_card.dart
│   │   ├── floating_action_button_widget.dart
│   │   ├── icon_button_widget.dart
│   │   ├── info_banner.dart
│   │   ├── loading_indicator.dart
│   │   ├── menu_widget.dart
│   │   ├── navigation_bar_widget.dart
│   │   ├── notification_card.dart
│   │   ├── progress_bar.dart
│   │   ├── rating_widget.dart
│   │   ├── search_bar_widget.dart
│   │   ├── section_wrapper.dart
│   │   ├── segmented_control.dart
│   │   ├── shimmer_loading.dart
│   │   ├── skeleton_loader.dart
│   │   ├── stepper_widget.dart
│   │   ├── tabs_widget.dart
│   │   ├── tag_widget.dart
│   │   ├── timeline_widget.dart
│   │   ├── tooltip_widget.dart
│   │   └── components.dart
│   └── sections/
│       ├── animation_extensions_examples_section.dart
│       ├── debounce_throttle_section.dart
│       └── widget_extensions_section.dart
└── main.dart

💡 Best Practices #

1. Chaining Extensions #

Extensions can be chained for cleaner, more readable code:

const Text('Hello World')
  .padding(all: 16)
  .margin(all: 12)
  .center()
  .clipRRect(borderRadius: 8)
  .decoratedBox(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
  )
  .onTap(() => print('Tapped!'))
  .tooltip('Click me');

2. Safe State Updates #

Always check if the widget is mounted before updating state:

void _incrementCounter() {
  if (mounted) {
    setState(() {
      _counter++;
    });
  }
}

3. Using Context Extensions #

Leverage context extensions for cleaner code:

// ❌ Verbose approach
Theme.of(context).colorScheme.primary
MediaQuery.of(context).size.width

// ✅ Clean approach with extensions
context.colorScheme.primary
context.screenWidth

4. Const Constructors #

Use const constructors where possible for better performance:

const Text('Hello')
  .padding(all: 16)
  .center();

5. Animation Best Practices #

When using animation extensions, consider performance:

// ✅ Good: Use appropriate duration
Text('Hello').fadeIn(duration: Duration(milliseconds: 300))

// ✅ Good: Combine animations efficiently
Icon(Icons.star)
  .scaleIn()
  .fadeIn()

// ✅ Good: Use shimmer for loading states
Container().shimmer()

6. Responsive Design #

Use context extensions for responsive layouts:

// Responsive padding based on screen size
Container(
  padding: EdgeInsets.all(
    context.isMobile ? 8 : context.isTablet ? 16 : 24
  ),
  child: content,
)

🎯 Examples #

🚀 Try the Live Demo to see all features in action!

See lib/main.dart for a comprehensive demo showcasing:

📝 License #

This project is open source and available under the MIT License for use in your Flutter projects.

🤝 Contributing #

Contributions are welcome! Here's how you can help:

1. Add new extensions - Propose and implement useful extensions
2. Improve existing ones - Optimize performance or add features
3. Fix bugs - Report or fix issues you encounter
4. Enhance documentation - Improve examples and explanations
5. Add more examples - Share real-world use cases

Getting Started #

# Clone the repository
git clone https://github.com/your-repo/save_points_extensions.git

# Install dependencies
flutter pub get

# Run the demo app
flutter run

📧 Support #

For issues, questions, or suggestions:

• 📝 Open an issue in the repository
• 💬 Start a discussion for feature requests
• ⭐ Star the repo if you find it useful!