sticky_grouped_list 0.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new80

Sticky grouped list package for Flutter. #

Pub CI

A ListView with sticky headers in which list items can be grouped to sections. Based on scrollable_positioned_list.

Features

  • Features from scrollable_positioned_list.
  • List items can be separated in groups.
  • For the groups an individual header can be set.
  • Sticky headers with floating option.
  • All fields from ScrollablePositionedList available.

Getting Started #

Add the package to your pubspec.yaml:

 sticky_grouped_list: ^0.2.1

In your dart file, import the library:

import 'package:sticky_grouped_list/sticky_grouped_list.dart';

Create a StickyGroupedListView Widget:

  StickyGroupedListView<dynamic, String>(
    elements: _elements,
    groupBy: (dynamic element) => element['group'],
    groupSeparatorBuilder: (dynamic element) => Text(element['group']),
    itemBuilder: (context, dynamic element) => Text(element['name']),
    itemScrollController: GroupedItemScrollController(),
    order: StickyGroupedListOrder.ASC,
  ),

Parameters: #

NameDescriptionRequiredDefault value
elementsA list of the data you want to display in the listrequired-
itemBuilder / indexedItemBuilderFunction which returns an Widget which defines the item. indexedItemBuilder provides the current index as well. If both are defined indexedItemBuilder is preferredyes, either of them-
groupByFunction which maps an element to its grouped valuerequired-
groupSeparatorBuilderFunction which gets a element and returns an Widget which defines the group header separatorrequired-
separatorA Widget which defines a separator between items inside a groupnono separator
floatingHeaderWhen set to true the sticky header will float over the listnofalse
orderChange to StickyGroupedListOrder.DESC to reverse the group sortingnoStickyGroupedListOrder.ASC
itemScrollControllerInstead of an ItemScrollController a GroupedItemScrollController needs to be provided.no-

GroupedItemScrollController.srollTo() and GroupedItemScrollController.jumpTo() automatic set the alignment so that the item is fully visible aligned under the group header. Both methods take automaticAlignment as a additional optional paramenter which needs to be set to true if alignment is specified.

Also the fields from ScrollablePositionedList.builder can be used.

Used packages: #

Package nameCopyrightLicense
scrollable_positioned_listCopyright 2018 the Dart project authors, Inc. All rights reservedBSD 3-Clause "New" or "Revised" License

[0.1.0] - 23.06.2020 #

  • Initial release

[0.1.1] - 24.06.2020 #

  • Add example

[0.1.2] - 26.06.2020 #

  • Refactor example

[0.2.0] - 30.06.2020 #

  • scrollTo/jumpTo will set the element under the group header

[0.2.1] - 04.07.2020 #

  • Add code documentation
  • improved README

example/lib/example.dart

import 'package:flutter/material.dart';
import 'package:sticky_grouped_list/sticky_grouped_list.dart';

void main() => runApp(MyApp());

List _elements = <Element>[
  Element(DateTime(2020, 6, 24, 18), 'Got to gym', Icons.fitness_center),
  Element(DateTime(2020, 6, 24, 9), 'Work', Icons.work),
  Element(DateTime(2020, 6, 25, 8), 'Buy groceries', Icons.shopping_basket),
  Element(DateTime(2020, 6, 25, 16), 'Cinema', Icons.movie),
  Element(DateTime(2020, 6, 25, 20), 'Eat', Icons.fastfood),
  Element(DateTime(2020, 6, 26, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 13), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 14), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 27, 15), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 28, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 29, 12), 'Car wash', Icons.local_car_wash),
  Element(DateTime(2020, 6, 30, 12), 'Car wash', Icons.local_car_wash),
];


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: StickyGroupedListView<Element, DateTime>(
          elements: _elements,
          order: StickyGroupedListOrder.ASC,
          groupBy: (Element element) =>
              DateTime(element.date.year, element.date.month, element.date.day),
          floatingHeader: true,
          groupSeparatorBuilder: (Element element) => Container(
            height: 50,
            child: Align(
              alignment: Alignment.center,
              child: Container(
                width: 120,
                decoration: BoxDecoration(
                  color: Colors.blue[300],
                  border: Border.all(
                    color: Colors.blue[300],
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(20.0)),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    '${element.date.day}. ${element.date.month}, ${element.date.year}',
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ),
          itemBuilder: (_, Element element) {
            return Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(6.0),
              ),
              elevation: 8.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(element.icon),
                  title: Text(element.name),
                  trailing: Text('${element.date.hour}:00'),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class Element implements Comparable {
  DateTime date;
  String name;
  IconData icon;

  Element(this.date, this.name, this.icon);

  @override
  int compareTo(other) {
    return date.compareTo(other.date);
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sticky_grouped_list: ^0.2.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:sticky_grouped_list/sticky_grouped_list.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • sticky_grouped_list that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
scrollable_positioned_list ^0.1.6 0.1.6
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test