Flex List

Provides a flexible list layout that behaves as you would expect from Expand widgets within a Wrap.

Features

FlexList puts as many provided elements as possible in one row (like Wrap), but also extends the width of the elements by the remaining space per row. This means that each row is filled to the maximum width.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
                  ...
                  flex_list: <latest_version>
                

In your library add the following import:

import 'package:flex_list/flex_list.dart';
                

Usage

The following example shows how to use FlexList. Beside the children property, you can set horizontalSpacing and verticalSpacing to define the spacing between the elements.

Note: Both spacing values are 10 by default.

void main() {
                  runApp(const MyApp());
                }
                
                class MyApp extends StatelessWidget {
                  const MyApp({super.key});
                
                  @override
                  Widget build(BuildContext context) {
                    return MaterialApp(
                        title: 'FlexList Demo',
                        theme: ThemeData(),
                        home: Scaffold(
                          body: Center(
                            child: SizedBox(
                                width: 300,
                                child: FlexList(
                                  horizontalSpacing: 5,
                                  verticalSpacing: 10,
                                  children: [
                                    for (var i = 0; i < 10; i++)
                                      Container(
                                        color: Theme
                                            .of(context)
                                            .colorScheme.surfaceContainer,
                                        padding: EdgeInsets.symmetric(
                                            horizontal: 20 + 20 * (i % 4), vertical: 10),
                                        child: Text("Item $i"),
                                      )
                                  ],
                                )),
                          ),
                        ));
                  }
                }
                

Rendering of above Example

Additional information

This package was written because of the lack of such layout function. The package repository is maintained on Github and published on pub.dev

1.2.0

Updates the example and makes flex_list compatible with Flutter 3.*

1.1.0

Make children have the same width when possible.

1.0.1

Remove children height enforcement.

1.0.0

Add all necassery overrides, as well as examples.

0.0.1

Initial FlexList Version. This version does work well, but some RenderBox methods are not implemented yet (e.g. computeDryLayout, ...).