apptomate_custom_wrap 0.0.1

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

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

Parameter	Type	Default	Description
spacing	double	8.0	Main axis spacing between children
runSpacing	double	8.0	Cross axis spacing between runs
alignment	WrapAlignment	start	Main axis alignment within runs
runAlignment	WrapAlignment	start	Cross axis alignment of runs
crossAxisAlignment	WrapCrossAlignment	start	Cross axis alignment within runs
children	List	required	Widgets to display
direction	Axis	horizontal	Main axis direction
textDirection	TextDirection?	null	Text direction for alignment
verticalDirection	VerticalDirection	down	Vertical alignment direction
maxLines	int?	null	Maximum lines/columns
debugPaint	bool	false	Shows debug borders

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

Feature	Flutter Wrap	CustomWrap
Basic wrapping	Yes	Yes
Max lines/columns	No	Yes
Debug visualization	Manual	Built-in
Default spacing	0.0	8.0
Validation	No	Yes
Code organization	Basic	Enhanced

Common Use Cases

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