Grouped ListView In Flutter :
Grouped ListView In Flutter : Group Listview is the listview in which the list item can be grouped in section
Screenshot :

grouped_list.dart
import 'package:flutter/material.dart'; class GroupedListView<T, E> extends ListView { GroupedListView({ @required E Function(T element) groupBy, @required Widget Function(E value) groupSeparatorBuilder, @required Widget Function(BuildContext context, T element) itemBuilder, GroupedListOrder order = GroupedListOrder.ASC, bool sort = true, Widget separator = const Divider(height: 0.0), List<T> elements, Key key, Axis scrollDirection = Axis.vertical, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, bool addSemanticIndexes = true, double cacheExtent, }) : super.builder( key: key, scrollDirection: scrollDirection, controller: controller, primary: primary, physics: physics, shrinkWrap: shrinkWrap, padding: padding, itemCount: elements.length * 2, addAutomaticKeepAlives: addAutomaticKeepAlives, addRepaintBoundaries: addRepaintBoundaries, addSemanticIndexes: addSemanticIndexes, cacheExtent: cacheExtent, itemBuilder: (context, index) { int actualIndex = index ~/ 2; if (index.isEven) { E curr = groupBy(elements[actualIndex]); E prev = actualIndex - 1 < 0 ? null : groupBy(elements[actualIndex - 1]); if (prev != curr) { return groupSeparatorBuilder(curr); } return Container(); } return itemBuilder(context, elements[actualIndex]); }, ) { if (sort && elements.isNotEmpty) { if (groupBy(elements[0]) is Comparable) { elements.sort((e1, e2) => (groupBy(e1) as Comparable).compareTo(groupBy(e2) as Comparable)); } else { elements .sort((e1, e2) => ('${groupBy(e1)}').compareTo('${groupBy(e2)}')); } if (order == GroupedListOrder.DESC) { elements = elements.reversed.toList(); } } } } enum GroupedListOrder { ASC, DESC }
main.dart
import 'package:flutter/material.dart'; import 'package:group_list/grouped_list.dart'; void main() => runApp(MyApp()); List _elements = [ {'topic': 'ListView.builder', 'group': 'ListView Type'}, {'topic': 'Introduction', 'group': ''}, {'topic': 'StatefulWidget', 'group': 'Type of Widget'}, {'topic': 'ListView', 'group': 'ListView Type'}, {'topic': 'ListView.separated', 'group': 'ListView Type'}, {'topic': 'ListView.custom', 'group': 'ListView Type'}, {'topic': 'StatelessWidget', 'group': 'Type of Widget'}, ]; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Tutorial', theme: ThemeData( primarySwatch: Colors.blue ), home: Scaffold( appBar: AppBar( title: Text('Grouped ListView') ), body: GroupedListView<dynamic, String>( groupBy: (element) => element['group'], elements: _elements, order: GroupedListOrder.DESC, groupSeparatorBuilder: (String value) => Padding( padding: const EdgeInsets.all(8.0), child: Center( child: Text( value, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold) )) ), itemBuilder: (c, element) { return Card( elevation: 1.0, margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0), child: Container( child: ListTile( contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0), leading: Icon(Icons.account_circle), title: Text(element['topic']), //element['group'] group name get trailing: Icon(Icons.arrow_forward) ) ) ); } ) ) ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in