dynamic_height_list_view 0.0.2 copy "dynamic_height_list_view: ^0.0.2" to clipboard
dynamic_height_list_view: ^0.0.2 copied to clipboard

A Flutter package enabling dynamic height ListView and GridView layouts, perfect for responsive and adaptive interfaces with content of varying sizes.

pub package package publisher 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
YudizAndroidSunny

πŸ’»
YudizAndroidVarshil
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 #

Loading
17
likes
150
pub points
53%
popularity
screenshot

Publisher

verified publisheryudiz.com

A Flutter package enabling dynamic height ListView and GridView layouts, perfect for responsive and adaptive interfaces with content of varying sizes.

Repository (GitHub)
View/report issues

Topics

#dynamic-height-listview #dynamic-height-gridview #without-height-grid-view #without-height-list-view #responsive-ui

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on dynamic_height_list_view