Expandable Column

A scrollable column widget that supports Expanded and Spacer widgets. Combines the flexibility of Column with the scrolling capability of ScrollView for dynamic, space-aware layouts.

Features

✨ Use Expanded and Spacer - Unlike ListView, fully supports flex widgets
📱 Automatic Scrolling - Scrolls when content overflows the viewport
🎯 Space Distribution - Children can expand to fill available space
⚡ Performance Optimized - Built on Flutter's efficient sliver system
🎨 Highly Customizable - All standard Column and ScrollView properties supported

Why Use This Package?

The Problem

In Flutter, you often face a dilemma:

Column supports Expanded and Spacer, but doesn't scroll when content overflows
ListView scrolls perfectly, but doesn't support Expanded or Spacer widgets
SingleChildScrollView with Column scrolls, but Expanded widgets throw errors

The Solution

ExpandableColumn gives you the best of both worlds:

ExpandableColumn(
  children: [
    Text('Header'),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('This fills available space')),
      ),
    ),
    Spacer(),
    Text('Footer'),
  ],
)

Installation

Add this to your pubspec.yaml:

dependencies:
  expandable_column: ^0.0.1

Then run:

flutter pub get

Usage

Basic Example

import 'package:flutter/material.dart';
import 'package:flutter_expandable_column/flutter_expandable_column.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Expandable Column Example')),
      body: ExpandableColumn(
        children: [
          Container(
            height: 100,
            color: Colors.red,
            child: Center(child: Text('Fixed Height Header')),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text('This expands to fill available space'),
              ),
            ),
          ),
          Container(
            height: 100,
            color: Colors.green,
            child: Center(child: Text('Fixed Height Footer')),
          ),
        ],
      ),
    );
  }
}

Form with Dynamic Content

ExpandableColumn(
  padding: EdgeInsets.all(16),
  children: [
    Text(
      'User Registration',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
    SizedBox(height: 20),
    TextField(decoration: InputDecoration(labelText: 'Name')),
    TextField(decoration: InputDecoration(labelText: 'Email')),
    TextField(decoration: InputDecoration(labelText: 'Password')),
    Spacer(), // Pushes button to bottom
    ElevatedButton(
      onPressed: () {},
      child: Text('Submit'),
    ),
  ],
)

Multiple Expanded Widgets

ExpandableColumn(
  children: [
    Text('Dashboard'),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.amber,
        child: Center(child: Text('Takes 2/3 of space')),
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.purple,
        child: Center(child: Text('Takes 1/3 of space')),
      ),
    ),
    Padding(
      padding: EdgeInsets.all(16),
      child: Text('Footer Text'),
    ),
  ],
)

With Custom Scroll Physics

ExpandableColumn(
  physics: BouncingScrollPhysics(), // iOS-style bouncing
  children: [
    // Your widgets here
  ],
)

Centered Content

ExpandableColumn(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.check_circle, size: 100, color: Colors.green),
    SizedBox(height: 20),
    Text('Success!', style: TextStyle(fontSize: 24)),
    SizedBox(height: 10),
    Text('Your action was completed successfully.'),
  ],
)

API Reference