Skip to content

Instantly share code, notes, and snippets.

@slightfoot
Last active July 6, 2024 03:28
Show Gist options
  • Save slightfoot/a75d6c368f1b823b594d9f04bf667231 to your computer and use it in GitHub Desktop.
Save slightfoot/a75d6c368f1b823b594d9f04bf667231 to your computer and use it in GitHub Desktop.
Column Builder for Flutter. Can be used instead of a ListView with shrinkWrap.
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(),
);
}
}
@Gene-Dana
Copy link

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

@Gene-Dana
Copy link

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(),
    );
  }
}

@batuhankrbb
Copy link

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(),
	);
}
      }

@ahndwon
Copy link

ahndwon commented Jun 1, 2022

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(),
    );
  }
}

@Tyler-Petrov
Copy link

Works great, thanks for the code!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment