🚀 awesome_padding_margin

A comprehensive Flutter package providing extension methods to easily add padding, margin, alignment, sizing, decoration, gestures, animations, and more to widgets.
No more nested widgets everywhere — write cleaner UI code with chained extensions.

🌟 Live Demo

Try our interactive demo here: awesome_padding_margin

✨ Features

✅ Add padding with one line: .paddingAll(), .paddingOnly(), .paddingSymmetric() ✅ Add margin with one line: .marginAll(), .marginOnly(), .marginSymmetric() ✅ Convert any widget into a sliver: .sliverBox ✅ Align widgets: .center, .alignTop, .alignBottom, .align() ✅ Control sizing: .width(), .height(), .size(), .expand, .flexible() ✅ Add decoration: .backgroundColor(), .borderRadius(), .shadow(), .gradient() ✅ Handle gestures: .onTap(), .onDoubleTap(), .inkWell() ✅ Create animations: .fadeIn(), .slideInFromTop(), .scaleIn() ✅ Build responsive layouts: .responsive(), .visibleOn() ✅ Control visibility: .opacity(), .visible(), .clipRect() ✅ Position widgets in stacks: .positioned(), .positionedTop() ✅ Cleaner, chainable syntax (.paddingAll(16).marginSymmetric(horizontal: 20).roundedRectangle())
✅ Null-safe, minimal overhead, no external dependencies

📦 Installation

In your pubspec.yaml:

```yaml

dependencies: awesome_extensions: ^2.0.0 # Latest version


Then run:

## : # (```bash)
flutter pub get

🚀 Quick Start

Import the package:

: # (```dart)

import 'package:awesome_extensions/awesome_extensions.dart';


Now you can use all the extensions directly on any widget:
##  ```dart
Text('Hello World')
  .paddingAll(16)
  .marginSymmetric(horizontal: 20)
  .roundedRectangle(color: Colors.blue, radius: 8)
  .onTap(() => print('Tapped!'))
  .fadeIn();

📖 Usage Examples

Padding & Margin

```dart

// Add equal padding to all sides Text('Padded Text').paddingAll(16)

// Add symmetric padding Text('Symmetric Padding').paddingSymmetric(horizontal: 20, vertical: 10)

// Add padding to specific sides Text('Specific Padding').paddingOnly(left: 10, right: 10, top: 5)

// Add margin Container(color: Colors.blue).marginAll(10) Container(color: Colors.red).marginOnly(bottom: 20)

// No padding/margin (for readability) Text('No Padding').paddingZero Text('No Margin').marginZero


### Sliver Conversion

##  ```dart
// Convert any widget to a sliver
CustomScrollView(
  slivers: [
    Text('Header').paddingAll(16).sliverBox,
    // Other slivers...
  ],
)

Alignment

```dart

// Center a widget Text('Centered').center

// Align to specific positions Text('Top').alignTop Text('Bottom').alignBottom Text('Left').alignLeft Text('Right').alignRight

// Custom alignment Text('Custom').align(Alignment.topRight)


### Sizing

##  ```dart
// Set width and height
Text('Sized').width(100).height(50)

// Set both dimensions at once
Text('Square').square(80)

// Make a widget expand
Text('Expanded').expand

// Make a widget flexible with a flex factor
Text('Flexible').flexible(2)

// Constrain widget dimensions
Text('Constrained').constrain(minWidth: 50, maxWidth: 200)

Decoration

```dart

// Background color Text('Colored').backgroundColor(Colors.blue)

// Rounded corners Text('Rounded').borderRadius(12)

// Border Text('Bordered').border(color: Colors.black, width: 2)

// Shadow Text('Shadow').shadow(color: Colors.black.withOpacity(0.2), blurRadius: 8)

// Gradient background Text('Gradient').gradient(LinearGradient(colors: Colors.blue, Colors.purple))

// Complete rounded rectangle with decoration Text('Styled').roundedRectangle( color: Colors.blue, radius: 16, boxShadow: BoxShadow(blurRadius: 10), )


### Gestures

##  ```dart
// Handle tap
Text('Tap Me').onTap(() => print('Tapped!'))

// Handle multiple gestures
Text('Gestures').gestures(
  onTap: () => print('Tap'),
  onDoubleTap: () => print('Double Tap'),
  onLongPress: () => print('Long Press'),
)

// Material ink well effect
Text('Ink Well').inkWell(
  onTap: () => print('Ink Well Tapped'),
  borderRadius: BorderRadius.circular(8),
)

Animations

```dart

// Fade in animation Text('Fade In').fadeIn(duration: Duration(milliseconds: 500))

// Slide animations Text('Slide From Top').slideInFromTop() Text('Slide From Bottom').slideInFromBottom() Text('Slide From Left').slideInFromLeft() Text('Slide From Right').slideInFromRight()

// Scale animation Text('Scale In').scaleIn(curve: Curves.elasticOut)


### Responsive Design

##  ```dart
// Show different widgets based on screen size
Text('Responsive').responsive(
  mobile: Text('Mobile View'),
  tablet: Text('Tablet View'),
  desktop: Text('Desktop View'),
)

// Show/hide based on screen size
Text('Mobile Only').visibleOn(mobile: true, tablet: false, desktop: false)
Text('Desktop Only').visibleOn(mobile: false, tablet: false, desktop: true)

Visibility & Clipping

```dart

// Opacity Text('Transparent').opacity(0.5)

// Conditional visibility Text('Visible').visible(isVisible, replacement: Text('Hidden'))

// Clip widgets Text('Clipped').clipRect() Text('Oval').clipOval() Text('Rounded Clip').clipRRect(BorderRadius.circular(16))


### Positioning

##  ```dart
// In a Stack
Stack(
  children: [
    // Background widget
    Container(color: Colors.blue),
    
    // Position a widget
    Text('Positioned').positioned(top: 20, left: 20),
    
    // Predefined positions
    Text('Top').positionedTop,
    Text('Bottom').positionedBottom,
    Text('Center').positionedCenter,
  ],
)

// Safe area
Text('Safe').safeArea

🔧 Advanced Usage

Chaining Extensions

The real power of this package comes from chaining multiple extensions:

```dart

Text('Advanced Example') .paddingSymmetric(horizontal: 16, vertical: 8) .roundedRectangle( color: Colors.blue, radius: 12, boxShadow: BoxShadow( color: Colors.black.withOpacity(0.1), blurRadius: 8, offset: Offset(0, 2), ), , ) .onTap(() { // Handle tap }) .fadeIn(duration: Duration(milliseconds: 300)) .visibleOn(mobile: true, tablet: true, desktop: false)


### Responsive Padding/Margin

For responsive design, you can use the responsive padding/margin methods:

##  ```dart
Text('Responsive Padding').responsivePadding(
  context,
  horizontal: 16,  // Will be scaled based on screen width
  vertical: 8,
)

Text('Responsive Margin').responsiveMargin(
  context,
  all: 20,  // Will be scaled based on screen width
)

🆕 What's New in v2.0.0

🎨 New Decoration Extensions: Add colors, borders, shadows, and gradients
👆 New Gesture Extensions: Handle taps, double taps, and more
🎭 New Animation Extensions: Easy fade, slide, and scale animations
📱 New Responsive Extensions: Build adaptive UIs for different screen sizes
👁️ New Visibility Extensions: Control opacity and clipping
📍 New Positioning Extensions: Position widgets in stacks
📐 New Sizing Extensions: Control widget dimensions
🎯 New Alignment Extensions: Align widgets easily
🔄 Enhanced Existing Extensions: More options for padding, margin, and slivers

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

🙏 Acknowledgments

Thanks to the Flutter community for inspiration and feedback
Thanks to all contributors who help improve this package

🚀 awesome_padding_margin

🌟 Live Demo

✨ Features

📦 Installation

```yaml

🚀 Quick Start

: # (```dart)

📖 Usage Examples

Padding & Margin

```dart

Alignment

```dart

Decoration

```dart

Animations

```dart

Visibility & Clipping

```dart

🔧 Advanced Usage

Chaining Extensions

```dart

🆕 What's New in v2.0.0

🤝 Contributing

🙏 Acknowledgments

Libraries

awesome_padding_margin package