ScrollableSpacedColumn

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _amount = 3;

  void _updateAmount(double amount) {
    setState(() {
      _amount = amount.ceil();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Slider(
              value: _amount.toDouble(),
              onChanged: _updateAmount,
              min: 1,
              max: 50,
              divisions: 50,
            ),
            Expanded(
              child: ScrollableSpacedColumn(
                minSpacing: 50,
                children: List.generate(
                  _amount,
                  (i) => Container(height: 200, color: Colors.red),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Fills the available space and lays out its children in a vertical way with space between.
/// The space between will never be smaller than the given minSpacing.
/// If there's not enough space, it will start to scroll.
class ScrollableSpacedColumn extends StatelessWidget {
  final double minSpacing;
  final List<Widget> children;

  const ScrollableSpacedColumn({
    super.key,
    required this.minSpacing,
    required this.children,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(minHeight: constraints.maxHeight),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              spacing: minSpacing,
              children: children,
            ),
          ),
        );
      },
    );
  }
}