Section ListView and Grouped ListView both are same in flutter. The Section ListView is a type of ListView where app developer divides the ListView in category. Each category contain a group of List items with category title. In flutter yet there are no fix widget avaibale to achieve this type of ListView. But using a flutter package named as group_list_view: ^1.0.6 we can easily make our own dynamic custom section ListView in flutter. This package if freely available to use for every developer. So in this tutorial we would learn about Example of Creating Section Group ListView in Flutter Android iOS application.
Contents in this project Example of Creating Section Group ListView in Flutter Android iOS:-
1. The first step is to install the group_list_view: ^1.0.6 package in your flutter project. So open your flutter project -> pubspec.yaml file and find dependencies block. Put the group_list_view: ^1.0.6 package name inside the file, like I did in below source code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
name: app description: A new Flutter project. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: ">=2.7.0 <3.0.0" dependencies: group_list_view: ^1.0.6 flutter: sdk: flutter cupertino_icons: ^1.0.0 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true |
2. Now open your project’s main.dart file and import material.dart and group_list_view.dart package.
|
1 2 |
import 'package:flutter/material.dart'; import 'package:group_list_view/group_list_view.dart'; |
3. Creating our void main runApp() method. Here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
4. Creating an Map List Array named as _elements. In the array we would define the ListView section title and section items.
|
1 2 3 4 5 6 7 |
Map<String, List> _elements = { 'Fruits Name From A': ['Apple', 'Apricot', 'Avocado'], 'Fruits Name From B': ['Banana', 'Blackberry', 'Blueberry', 'Boysenberry'], 'Fruits Name From C': ['Cherry', 'Coconut'], 'Fruits Name From D': ['Date Fruit', 'Durian'], 'Fruits Name From G': ['Grapefruit', 'Grapes', 'Guava'] }; |
5. Creating our main MyApp extends StatelessWidget class.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
6. In MyApp class we would first make a custom widget named as _itemBuilder. In this widget we would make the ListTile ListView to display the sections items. We would also apply the onTap(), onClick(), onPress event on List items and printing the selected items on terminal screen.
|
1 2 3 4 5 6 7 8 9 10 11 |
Widget _itemBuilder(BuildContext context, IndexPath index) { String user = _elements.values.toList()[index.section][index.index]; return ListTile( title: Text( user, style: TextStyle(fontSize: 18), ), onTap: () { print(user); }); } |
7. Creating Widget Build area. Here first we would make the GroupListView widget and using the itemBuilder parameter we would print the section headings. You can also change the style of sections according to your requirement.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Section Group ListView'), ), body: GroupListView( sectionsCount: _elements.keys.toList().length, countOfItemInSection: (int section) { return _elements.values.toList()[section].length; }, itemBuilder: _itemBuilder, groupHeaderBuilder: (BuildContext context, int section) { return Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( color: Colors.lightBlueAccent, height: 40, padding: const EdgeInsets.fromLTRB(5, 0, 0, 0), child: Align( alignment: Alignment.centerLeft, child: Text( _elements.keys.toList()[section], style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white), textAlign: TextAlign.left, ), ))); }, separatorBuilder: (context, index) => Divider( color: Colors.black, height: 1, ), sectionSeparatorBuilder: (context, section) => SizedBox(), ), ), ); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import 'package:flutter/material.dart'; import 'package:group_list_view/group_list_view.dart'; void main() => runApp(MyApp()); Map<String, List> _elements = { 'Fruits Name From A': ['Apple', 'Apricot', 'Avocado'], 'Fruits Name From B': ['Banana', 'Blackberry', 'Blueberry', 'Boysenberry'], 'Fruits Name From C': ['Cherry', 'Coconut'], 'Fruits Name From D': ['Date Fruit', 'Durian'], 'Fruits Name From G': ['Grapefruit', 'Grapes', 'Guava'] }; class MyApp extends StatelessWidget { Widget _itemBuilder(BuildContext context, IndexPath index) { String user = _elements.values.toList()[index.section][index.index]; return ListTile( title: Text( user, style: TextStyle(fontSize: 18), ), onTap: () { print(user); }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flutter Section Group ListView'), ), body: GroupListView( sectionsCount: _elements.keys.toList().length, countOfItemInSection: (int section) { return _elements.values.toList()[section].length; }, itemBuilder: _itemBuilder, groupHeaderBuilder: (BuildContext context, int section) { return Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( color: Colors.lightBlueAccent, height: 40, padding: const EdgeInsets.fromLTRB(5, 0, 0, 0), child: Align( alignment: Alignment.centerLeft, child: Text( _elements.keys.toList()[section], style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white), textAlign: TextAlign.left, ), ))); }, separatorBuilder: (context, index) => Divider( color: Colors.black, height: 1, ), sectionSeparatorBuilder: (context, section) => SizedBox(), ), ), ); } } |
Screenshots:
