horizontal_list_view

Description:

horizontal list view

horizontal_list_view #
Simple and customizable horizontal list view widget for displaying a list of items in a horizontal layout. This package is designed to simplify the creation of horizontal lists with a specified crossAxisCount without the need to provide a fixed height for the ListView.

Installing #
Add to pubspec.yaml file
dependencies:
horizontal_list_view: ^1.1.0
copied to clipboard
import
import 'package:horizontal_list_view/horizontal_list_view.dart';
copied to clipboard
Usage #
Using HorizontalListView
HorizontalListView(
crossAxisCount: 2, // Number of items displayed per row.
crossAxisSpacing: 8.0, // Spacing between items in the same row.
alignment: CrossAxisAlignment.center, // Alignment of items within the row (default is center)
controller: HorizontalListViewController(), //Optional scroll controller.
children: [
// List of child widgets
// ...
],
)
copied to clipboard
Using HorizontalListView.builder
If you want to create a horizontal list view with dynamic content, you can use HorizontalListView.builder. Here`s an example:
import 'package:horizontal_list_view/horizontal_list_view.dart';

HorizontalListView.builder(
crossAxisCount: 3, // Number of items displayed per row.
crossAxisSpacing: 16, // Spacing between items in the same row.
alignment: CrossAxisAlignment.center, // Alignment of items within the row (default is center)
controller: HorizontalListViewController(), // Optional scroll controller.
itemCount: 12, // Total number of items in the list.
itemBuilder: (BuildContext context, int index) {
// Create and return the widgets for each item.
return AspectRatio(
aspectRatio: 16 / 9,
child: Container(
color: Colors.red,
child: Center(
child: Text('item: $index'),
),
),
);
},
)
copied to clipboard
In this example, you spacify the number of items per row (crossAxisCount), spacing between items (crossAxisSpacing), and provide an itemBuilder function to create the individual items based on the index.