list_with_categories

Description:

list with categories

ListViewWithCategories #
A flexible Flutter package that provides a customizable list view with categories, allowing developers to easily implement a categorized list view in their Flutter applications. This package supports both horizontal and vertical layouts, catering to a wide range of use cases.
Features #

Customizable Dimensions: Set the width, height, and gap between categories to fit your UI design.
Orientation Support: Choose between a column or row layout for your categories and list view.
Scroll Controllers: Integrated with ScrollablePositionedList for precise scroll position control and ItemPositionsListener for scroll event handling.
Dynamic Item Building: Use custom builder functions for list items and categories, providing flexibility in content rendering.


Getting Started #
To use this package, add ListViewWithCategories as a dependency in your pubspec.yaml file.
dependencies:
list_with_categories: latest_version
copied to clipboard
Usage #
The ListViewWithCategories widget allows for the creation of a categorized list view with customizable dimensions, orientation, and item builders. Here's how to use it in your Flutter project:
Basic Setup #
First, ensure you have the package imported in your Dart file:
import 'package:your_package_name/ListViewWithCategories.dart';

copied to clipboard

ListViewWithCategories(
controller: controller,
scrollListener: listScrollListener,
itemsLength: cats.length,
itemBuilder: (_, index) {
final sectionLetter = cats[index];
final animal = groupedBrands[sectionLetter] ?? [];
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(
sectionLetter,
style: const TextStyle(fontWeight: FontWeight.bold),
),
),
...animal.map(
(e) => ListTile(
title: Text(e),
),
)
],
);
},
categoryBuilder: (_, index) {
return InkWell(
onTap: () {
controller.scrollTo(
index: index,
duration: const Duration(milliseconds: 200));
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(cats[index]),
));
},),
copied to clipboard