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 #