Perhaps you want to create a list where all list items are spaced evenly, so that the items take up the visible space. For example, the four items in the following image are spaced evenly, with "Item 0" at the top, and "Item 3" at the bottom.

At the same time, you might want to allow users to scroll through the list when the list of items won't fit, maybe because a device is too small, a user resized a window, or the number of items exceeds the screen size.

Typically, you useSpacer to tune the spacing between widgets, orExpanded to expand a widget to fill the available space. However, these solutions are not possible inside scrollable widgets, because they need a finite height constraint.

This recipe demonstrates how to useLayoutBuilder andConstrainedBox to space out list items evenly when there is enough space, and to allow users to scroll when there is not enough space, using the following steps:

1. Add aLayoutBuilder with aSingleChildScrollView.
2. Add aConstrainedBox inside theSingleChildScrollView.
3. Create aColumn with spaced items.

Start by creating aLayoutBuilder. You need to provide abuilder callback function with two parameters:

1. TheBuildContext provided by theLayoutBuilder.
2. TheBoxConstraints of the parent widget.

In this recipe, you won't be using theBuildContext, but you will need theBoxConstraints in the next step.

Inside thebuilder function, return aSingleChildScrollView. This widget ensures that the child widget can be scrolled, even when the parent container is too small.

LayoutBuilder(builder:(context,constraints){returnSingleChildScrollView(child:Placeholder());},);

In this step, add aConstrainedBox as the child of theSingleChildScrollView.

TheConstrainedBox widget imposes additional constraints to its child.

Configure the constraint by setting theminHeight parameter to be themaxHeight of theLayoutBuilder constraints.

This ensures that the child widget is constrained to have a minimum height equal to the available space provided by theLayoutBuilder constraints, namely the maximum height of theBoxConstraints.

LayoutBuilder(builder:(context,constraints){returnSingleChildScrollView(child:ConstrainedBox(constraints:BoxConstraints(minHeight:constraints.maxHeight),child:Placeholder(),),);},);

However, you don't set themaxHeight parameter, because you need to allow the child to be larger than theLayoutBuilder size, in case the items don't fit the screen.

Finally, add aColumn as the child of theConstrainedBox.

To space the items evenly, set themainAxisAlignment toMainAxisAlignment.spaceBetween.

LayoutBuilder(builder:(context,constraints){returnSingleChildScrollView(child:ConstrainedBox(constraints:BoxConstraints(minHeight:constraints.maxHeight),child:Column(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[ItemWidget(text:'Item 1'),ItemWidget(text:'Item 2'),ItemWidget(text:'Item 3'),],),),);},);

Alternatively, you can use theSpacer widget to tune the spacing between the items, or theExpanded widget, if you want one widget to take more space than others.

For that, you have to wrap theColumn with anIntrinsicHeight widget, which forces theColumn widget to size itself to a minimum height, instead of expanding infinitely.

LayoutBuilder(builder:(context,constraints){returnSingleChildScrollView(child:ConstrainedBox(constraints:BoxConstraints(minHeight:constraints.maxHeight),child:IntrinsicHeight(child:Column(children:[ItemWidget(text:'Item 1'),Spacer(),ItemWidget(text:'Item 2'),Expanded(child:ItemWidget(text:'Item 3')),],),),),);},);

This example shows a list of items that are spaced evenly within a column. The list can be scrolled up and down when the items don't fit the screen. The number of items is defined by the variableitems, change this value to see what happens when the items won't fit the screen.

import 'package:flutter/material.dart';void main() => runApp(const SpacedItemsList());class SpacedItemsList extends StatelessWidget {  const SpacedItemsList({super.key});  @override  Widget build(BuildContext context) {    const items = 4;    return MaterialApp(      title: 'Flutter Demo',      debugShowCheckedModeBanner: false,      theme: ThemeData(        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),        cardTheme: CardThemeData(color: Colors.blue.shade50),      ),      home: Scaffold(        body: LayoutBuilder(          builder: (context, constraints) {            return SingleChildScrollView(              child: ConstrainedBox(                constraints: BoxConstraints(minHeight: constraints.maxHeight),                child: Column(                  mainAxisAlignment: MainAxisAlignment.spaceBetween,                  crossAxisAlignment: CrossAxisAlignment.stretch,                  children: List.generate(                    items,                    (index) => ItemWidget(text: 'Item $index'),                  ),                ),              ),            );          },        ),      ),    );  }}class ItemWidget extends StatelessWidget {  const ItemWidget({super.key, required this.text});  final String text;  @override  Widget build(BuildContext context) {    return Card(      child: SizedBox(height: 100, child: Center(child: Text(text))),    );  }}