Column Builder for Flutter. Can be used instead of a ListView with shrinkWrap.

column_builder.dart

class ColumnBuilder extends StatelessWidget {
	final IndexedWidgetBuilder itemBuilder;
	final MainAxisAlignment mainAxisAlignment;
	final MainAxisSize mainAxisSize;
	final CrossAxisAlignment crossAxisAlignment;
	final TextDirection textDirection;
	final VerticalDirection verticalDirection;
	final int itemCount;

	const ColumnBuilder({
		Key key,
		@required this.itemBuilder,
		@required this.itemCount,
		this.mainAxisAlignment: MainAxisAlignment.start,
		this.mainAxisSize: MainAxisSize.max,
		this.crossAxisAlignment: CrossAxisAlignment.center,
		this.textDirection,
		this.verticalDirection: VerticalDirection.down,
	}) : super(key: key);

	@override
	Widget build(BuildContext context) {
		return new Column(
			children: new List.generate(this.itemCount,
					(index) => this.itemBuilder(context, index)).toList(),
		);
	}
}

It is awesome!!

It actually can NOT be used as a direct replacement for ListView -- the big difference is that ColumnBuilder is not SCROLLABLE. If you make too many children then it blows up with the dreaded yellow construction lines, etc. So just beware of when you use this.

This is exactly what I was looking for. I need to show list of items generated dynamically inside scrollable widget. It is not possible to use standard ListView in this case because you will be placing scrollable widget inside another scrollable widget. ColumnBuilder solved the problem. Thanx.

Useful when you need to create Column widget dynamically. Thanks!

OMG I could kiss you! xxxxxxxxxx

OMG!!!!

Anytime. Your welcome 🤗

I changed the code to apply Column properties in build() method.

class ColumnBuilder extends StatelessWidget {
  final IndexedWidgetBuilder itemBuilder;
  final MainAxisAlignment mainAxisAlignment;
  final MainAxisSize mainAxisSize;
  final CrossAxisAlignment crossAxisAlignment;
  final VerticalDirection verticalDirection;
  final int itemCount;

  const ColumnBuilder({
    Key key,
    @required this.itemBuilder,
    @required this.itemCount,
    this.mainAxisAlignment: MainAxisAlignment.start,
    this.mainAxisSize: MainAxisSize.max,
    this.crossAxisAlignment: CrossAxisAlignment.center,
    this.verticalDirection: VerticalDirection.down,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Column(
      crossAxisAlignment: this.crossAxisAlignment,
      mainAxisSize: this.mainAxisSize,
      mainAxisAlignment: this.mainAxisAlignment,
      verticalDirection: this.verticalDirection,
      children:
          new List.generate(this.itemCount, (index) => this.itemBuilder(context, index)).toList(),
    );
  }
}

just what i needed for a CustomScrollView()
thank u

Not all heroes wear capes. Just like you, sir!

One of the benefits for a builder like in ListView.builder is that an item will only be built if it's about to be visible. That's it when there are 10 items in the viewport, the ListView will build 11 items and cache them (try logging in the initState and dispose in the item widgets to see how it works). When the user is scrolling down so that the eleventh is now visible, ListView will ask the builder to build the twelfth item, and prepare to dispose of the first item.

Looking and these codes, they don't replicate the same behavior, so that when you have 10k items, all will be rebuilt each time the widget (ColumnBuilder) is rebuild even though most of them are not visible. Try making a simple page with two pages, one for ListView.builder and the other with the above code, all with 10k items and compare them.

If it's not a problem to rebuild all the items each time, it can be done in such a simpler way:

// ...
Column(
  children: myItems.map<Widget>((item) {
    // do the build here
  }).toList(),
),
// ...

Love You So much Bro!

YOU ARE THE MAN!!!!!

Excelent :D

Works for me. Thank you!!!

Awesome, Works for me. Thank you!!!

One of the benefits for a builder like in ListView.builder is that an item will only be built if it's about to be visible. That's it when there are 10 items in the viewport, the ListView will build 11 items and cache them (try logging in the initState and dispose in the item widgets to see how it works). When the user is scrolling down so that the eleventh is now visible, ListView will ask the builder to build the twelfth item, and prepare to dispose of the first item.

Looking and these codes, they don't replicate the same behavior, so that when you have 10k items, all will be rebuilt each time the widget (ColumnBuilder) is rebuild even though most of them are not visible. Try making a simple page with two pages, one for ListView.builder and the other with the above code, all with 10k items and compare them.

If it's not a problem to rebuild all the items each time, it can be done in such a simpler way:

// ...
Column(
  children: myItems.map<Widget>((item) {
    // do the build here
  }).toList(),
),
// ...

that is exactly what i am concerned about too

Hey !!! This is EXACTLY what I needed. Why not add Row.builder(.. to the framework??

Also, for those who read this in 2021 (and need null safety)

import 'package:flutter/material.dart';

class RowBuilder extends StatelessWidget {
  const RowBuilder({
    Key? key,
    @required this.itemBuilder,
    @required this.itemCount,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
  }) : super(key: key);

  final IndexedWidgetBuilder? itemBuilder;
  final MainAxisAlignment? mainAxisAlignment;
  final MainAxisSize? mainAxisSize;
  final CrossAxisAlignment? crossAxisAlignment;
  final TextDirection? textDirection;
  final VerticalDirection? verticalDirection;
  final int? itemCount;

  @override
  Widget build(BuildContext context) {
    return Row(
      children:
          List.generate(itemCount!, (index) => itemBuilder!(context, index))
              .toList(),
    );
  }
}

Null safety column builder;

    import 'package:flutter/material.dart';

    class ColumnBuilder extends StatelessWidget {
final IndexedWidgetBuilder itemBuilder;
final MainAxisAlignment mainAxisAlignment;
final MainAxisSize mainAxisSize;
final CrossAxisAlignment crossAxisAlignment;
final TextDirection? textDirection;
final VerticalDirection verticalDirection;
final int itemCount;

const ColumnBuilder({
	Key? key,
	required this.itemBuilder,
	required this.itemCount,
	this.mainAxisAlignment: MainAxisAlignment.start,
	this.mainAxisSize: MainAxisSize.max,
	this.crossAxisAlignment: CrossAxisAlignment.center,
	this.textDirection,
	this.verticalDirection: VerticalDirection.down,
}) : super(key: key);

@override
Widget build(BuildContext context) {
	return new Column(
		children: new List.generate(this.itemCount,
				(index) => this.itemBuilder(context, index)).toList(),
	);
}
      }

The options are not passed on above codes.
Added passing arguments.

class ColumnBuilder extends StatelessWidget {
  final IndexedWidgetBuilder itemBuilder;
  final MainAxisAlignment mainAxisAlignment;
  final MainAxisSize mainAxisSize;
  final CrossAxisAlignment crossAxisAlignment;
  final TextDirection? textDirection;
  final VerticalDirection verticalDirection;
  final int itemCount;

  const ColumnBuilder({
    Key? key,
    required this.itemBuilder,
    required this.itemCount,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: mainAxisSize,
      mainAxisAlignment: mainAxisAlignment,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      children: List.generate(itemCount, (index) => itemBuilder(context, index))
          .toList(),
    );
  }
}


class RowBuilder extends StatelessWidget {
  final IndexedWidgetBuilder itemBuilder;
  final MainAxisAlignment mainAxisAlignment;
  final MainAxisSize mainAxisSize;
  final CrossAxisAlignment crossAxisAlignment;
  final TextDirection? textDirection;
  final VerticalDirection verticalDirection;
  final int itemCount;

  const RowBuilder({
    Key? key,
    required this.itemBuilder,
    required this.itemCount,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: mainAxisSize,
      mainAxisAlignment: mainAxisAlignment,
      crossAxisAlignment: crossAxisAlignment,
      textDirection: textDirection,
      verticalDirection: verticalDirection,
      children: List.generate(itemCount, (index) => itemBuilder(context, index))
          .toList(),
    );
  }
}

Works great, thanks for the code!