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(),
    ],
  ),
)

Libraries

apptomate_custom_column