https://github.com/yudizandroidsunny/dynamic_height_list_view
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.
https://github.com/yudizandroidsunny/dynamic_height_list_view
custom-layouts dynamic-height-gridview dynamic-height-listview flexible-scrolling grid-and-list-layouts responsive-ui variable-item-height without-height-grid-view without-height-list-view
Last synced: 8 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/yudizandroidsunny/dynamic_height_list_view
- Owner: YudizAndroidSunny
- License: mit
- Created: 2024-07-05T05:44:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-09T04:37:17.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T13:48:18.588Z (almost 2 years ago)
- Topics: custom-layouts, dynamic-height-gridview, dynamic-height-listview, flexible-scrolling, grid-and-list-layouts, responsive-ui, variable-item-height, without-height-grid-view, without-height-list-view
- Language: C++
- Homepage: https://www.yudiz.com/
- Size: 1.77 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://pub.dev/packages/dynamic_height_list_view)
[](https://pub.dev/packages/dynamic_height_list_view/publisher)
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:
```yaml
dependencies:
dynamic_height_list_view: ^0.0.2
```
Then, run:
```yaml
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.
```dart
import 'package:dynamic_height_list_view/dynamic_height_view.dart';
import 'package:flutter/material.dart';
class ListViewExample extends StatelessWidget {
ListViewExample({super.key});
final List 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(
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.
```dart
import 'package:dynamic_height_list_view/dynamic_height_view.dart';
import 'package:flutter/material.dart';
class GridViewExample extends StatelessWidget {
GridViewExample({super.key});
final List 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` | 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](https://github.com/YudizAndroidSunny/dynamic_height_list_view) 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](https://github.com/YudizAndroidSunny/dynamic_height_list_view/issues).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Visitors Count
