apptomate_custom_column 0.0.1

CustomColumn is an enhanced version of Flutter's standard Column widget that provides additional layout customization options.

CustomColumn

CustomColumn is an enhanced version of Flutter's standard Column widget that provides additional layout customization options. It simplifies common column layout patterns while maintaining all the flexibility of the original Column widget.

✨ Key Features

• Automatic spacing between children
• Custom separators (dividers, etc.)
• Expanded widget wrapping option
• Padding control (general and edge-specific)
• Reversing children order
• All standard Column properties maintained
• Simplified syntax for common layouts

🚀 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_column: ^0.0.1

💡 Basic Usage

Basic Spaced Column

CustomColumn(
  spacing: 16.0,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

With Separators

CustomColumn(
  separator: Divider(),
  children: [
    Text('Section 1'),
    Text('Section 2'),
    Text('Section 3'),
  ],
)

With Edge Padding

CustomColumn(
  spacing: 8.0,
  addTopPadding: true,
  addBottomPadding: true,
  children: [
    // Your widgets
  ],
)

⚙️ Configuration Options

Parameter	Type	Description	Default
children	List<Widget>	Column contents	Required
spacing	double	Space between items	8.0
separator	Widget?	Custom separator widget	null
padding	EdgeInsetsGeometry	Overall padding	EdgeInsets.zero
addTopPadding	bool	Add spacing at top	false
addBottomPadding	bool	Add spacing at bottom	false
wrapWithExpanded	bool	Wrap children in Expanded	false
reverse	bool	Reverse children order	false
All standard Column params		Inherited from Column	Standard defaults

🌟 Best Practices

1. Consistent Spacing

   // Define spacing constants
   const smallSpacing = 8.0;
   const mediumSpacing = 16.0;
      
   CustomColumn(
     spacing: mediumSpacing,
     children: [...],
   )
   

2. Complex Separators

   CustomColumn(
     separator: Container(
       height: 1,
       color: Colors.grey[300],
       margin: EdgeInsets.symmetric(vertical: 8),
     ),
     children: [...],
   )
   

3. Responsive Layouts

   LayoutBuilder(
     builder: (context, constraints) {
       return CustomColumn(
         spacing: constraints.maxWidth > 600 ? 24 : 16,
         children: [...],
       );
     },
   )
   

4. Accessibility

   • Ensure sufficient spacing for touch targets
   • Maintain logical reading order
   • Consider text scaling

📱 Example App Included

The implementation includes examples for:

• Basic spaced column
• Column with custom dividers
• Reversed column
• Edge-padded column
• Expanded children

Pro Tip: Combine with other layout widgets for powerful combinations:

SingleChildScrollView(
  child: CustomColumn(
    spacing: 16,
    children: [
      HeaderWidget(),
      ContentWidget(),
      FooterWidget(),
    ],
  ),
)