CustomWrap

An enhanced version of Flutter's Wrap widget with additional layout control and debugging capabilities.

Features

• All standard Wrap functionality
• Maximum line/column constraints
• Visual debugging options
• Runtime validation for negative spacing
• Better default values for common use cases
• Demo showcasing various configurations

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_wrap: ^0.0.1

Usage

Basic Usage

CustomWrap(
  spacing: 12.0,
  runSpacing: 8.0,
  children: [
    Chip(label: Text('Item 1')),
    Chip(label: Text('Item 2')),
    // More items...
  ],
)

Available Parameters

Advanced Examples

Vertical wrap with max lines:

CustomWrap(
  direction: Axis.vertical,
  maxLines: 3,
  children: [/*...*/],
)

Debug mode with custom spacing:

CustomWrap(
  spacing: 16.0,
  runSpacing: 12.0,
  debugPaint: true,
  children: [/*...*/],
)

Center-aligned wrap:

CustomWrap(
  alignment: WrapAlignment.center,
  runAlignment: WrapAlignment.center,
  children: [/*...*/],
)

Demo

The package includes a CustomWrapWidget demo that shows four different configurations:

1. Basic horizontal wrap
2. Vertical wrap
3. Wrap with max lines constraint
4. Debug mode visualization

To run the demo:

void main() {
  runApp(MaterialApp(
    home: CustomWrapWidget(),
  ));
}

Implementation Details

The widget:

1. Wraps Flutter's core Wrap functionality
2. Adds maxLines constraint using LayoutBuilder
3. Implements debug visualization
4. Includes runtime validation for spacing values

Best Practices

1. Use maxLines to prevent excessive wrapping
2. Enable debugPaint during layout development
3. Adjust spacing values based on your design system
4. Combine with SingleChildScrollView for scrollable content
5. Use consistent spacing throughout your app

Comparison with Flutter's Wrap

Common Use Cases

• Tag clouds
• Chip collections
• Responsive button groups
• Dynamic content grids
• Overflow-safe layouts
• Debugging complex layouts