A Flutter package that provides dynamic height grid and list views with customizable layouts and flexible scroll behaviors. The package includes both DynamicHeightGridView and DynamicHeightListView to handle grids and lists where each item's height can vary.

Demo

Features

• Dynamic Grid View: Supports dynamic item heights with flexible row layouts.
• Dynamic List View: Allows dynamic item heights in both horizontal and vertical scroll views.
• Customizable Padding: You can specify padding for both the entire view and individual items.
• Flexible Scroll Behavior: Use custom scroll physics and controllers for smooth, customizable scrolling.

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  dynamic_height_list_view: ^0.0.2

Then, run:

flutter pub get

Usage

1. DynamicHeightListView Example

This example demonstrates how to use DynamicHeightListView to display a list with dynamic item heights. You can customize the scroll direction and padding for each item.

import 'package:dynamic_height_list_view/dynamic_height_view.dart';
import 'package:flutter/material.dart';

class ListViewExample extends StatelessWidget {
  ListViewExample({super.key});

  final List<Color> colors = List.generate(100, (index) => Color((index * 0xFFFFFF ~/ 100) << 0).withOpacity(1.0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamic Height List View'),
      ),
      body: DynamicHeightListView<int>(
        items: List.generate(10, (index) => index),
        itemPadding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
        itemBuilder: (context, item) => Card(
          child: Container(
            height: 40,
            width: 100,
            color: colors[item],
          ),
        ),
      ),
    );
  }
}

2. DynamicHeightGridView Example

Here’s how to use the DynamicHeightGridView to display a grid with varying item heights and customizable spacing between rows and columns.

import 'package:dynamic_height_list_view/dynamic_height_view.dart';
import 'package:flutter/material.dart';

class GridViewExample extends StatelessWidget {
  GridViewExample({super.key});

  final List<Color> colors = List.generate(100, (index) => Color((index * 0xFFFFFF ~/ 100) << 0).withOpacity(1.0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamic Height Grid View'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: DynamicHeightGridView(
          shrinkWrap: true,
          itemCount: 100,
          crossAxisCount: 3,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          builder: (context, index) {
            return Container(
              height: 200,
              color: colors[index],
            );
          },
        ),
      ),
    );
  }
}

Contributors ✨

Thanks goes to these wonderful people 💻:

YudizAndroidSunny 💻

YudizAndroidVarshil 💻

API

DynamicHeightListView

Property	Type	Description
items	List<T>	The list of items to display.
itemBuilder	Widget Function(BuildContext context, T item)	Function that builds the widgets for each list item.
itemPadding	EdgeInsets	Padding for each item.
scrollDirection	ScrollDirection	Direction of the scroll (horizontal or vertical).
controller	ScrollController?	Controller for the scroll view.
physics	ScrollPhysics?	Scroll physics for the view (e.g., BouncingScrollPhysics).

DynamicHeightGridView

Property	Type	Description
builder	IndexedWidgetBuilder	Function that builds the grid items.
itemCount	int	Number of items in the grid.
crossAxisCount	int	Number of columns in the grid.
crossAxisSpacing	double	Spacing between columns.
mainAxisSpacing	double	Spacing between rows.
controller	ScrollController?	Controller for the grid's scroll view.
shrinkWrap	bool	If true, grid will take up only as much space as needed.

Contributions

Contributions are welcome! Please open an issue or submit a pull request on the GitHub repository if you would like to contribute to Dynamic Height List/Grid View.

Support

If you encounter any issues or have questions, feel free to open an issue on GitHub.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Visitors Count