dynamic_height_list_view | Flutter package

GitHub code size

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 #