dimibe / grouped_list Goto Github PK

View Code? Open in Web Editor NEW

386.0 386.0 103.0 2.92 MB

A Flutter ListView in which items can be grouped into sections.

Home Page: https://pub.dev/packages/grouped_list

License: MIT License

Dart 99.06% Kotlin 0.21% Swift 0.67% Objective-C 0.06%

dart flutter flutter-package

grouped_list's People

Contributors

Stargazers

Watchers

Forkers

thevikke calvinsug trendingtechnology zhanght2008 dpacassi darthdie daniel-ioannou jvegaperez lunaticcoding bestwant denchikby dwtcourses susilon frezzer0000 youssef212 aiiv silexcorp manatho felixgabler itechnorove netfly-vpn sqzxcv smartup-ike jobehi kbot flutter-robert dica-solution rlch woosttech zeehshan vovaidzo mracipayam seniorturkmen renanamr zigapovhe freddysundowner yunanhelmy najibghadri novaworksau mohammedelotol vladmazur sape-o jamesblasco d6p2b giasuddin2548 xch1029 kprince beheobong lachlangrant ufukhawk up929312 alexataman cloverrose pontus-andersson devcloudyy sumanrajpathak geekpius yasinarik fjswrk 69-69 aboneyx clotee magazmj liujq dra11y jtans niwaguan kristofb idrisyagci 2002bishwajeet usayuki rafaelsetragni flutterworks israelagoeiro girija870 sakhans0010 heralight saytoonz fuseio scr1ptechnick mtoman1985 ahndwon alisamir070 amirthapa 4-alok gataman promisope-development-team rinlv gicha mtoscan ketan-glitch erickrodri champlainlecode dreamersoul matteoberla thientran2910 gidrokolbaska

grouped_list's Issues

Request for Feature: different values for 'groupBy' and 'groupSeparatorBuilder()'

Current example:

groupBy = yyyyMMdd (e.g. 20200409)
groupSeparatorBuilder() = yyyy MMM (e.g. 2020 April)

In this example (order: GroupedListOrder.DESC) Mai (engl. May) should be before März (engl. March):

Request:
It would be nice to pass the entire map (the element) to the function 'groupSeparatorBuilder()', instead the value from the groupBy.

How to list custom datatypes in group

class record{

  String Name;
  int DayofBirth;

  record(String Name, int DayofBirth){
    Name=this.Name;
    DayofBirth=this.DayofBirth;
  }

}

Now I want the following list

 var lists=[

    record("Ashu",DateTime.thursday),
    record("Aniket",DateTime.monday),
    record("Eishu",DateTime.saturday),
    record("Keshav",DateTime.thursday),


  ];

`
Into the grouped list according to DayofBirth

This is my GroupListView
`

GroupedListView<dynamic,record>(
                elements: lists,
                groupBy: (element)=>element.DayofBirth,
                groupSeparatorBuilder: _buildSperator,
                itemBuilder: (context, element) => Text(element.Name),
                order: GroupedListOrder.ASC,
              ),
Widget _buildSperator(dynamic groupByValue){
  return Text(groupByValue);

}

How to change sort to Ascending or Descending?

Hi, i want to sort by date Descending.

My code is like this:

GroupedListView<dynamic, String>(
      groupBy: (element) => element.day,
      elements: _motionList,
      sort: true,
      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: 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(Icons.account_circle),
              title: Text(DateFormat.Hm()
                  .format(DateTime.fromMillisecondsSinceEpoch(element.time))),
              trailing: Icon(Icons.arrow_forward),
            ),
          ),
        );
      },
    );

and i got the output is:

and how to reverse it, so the data will be like this:

thank you

List of Model?

Hi,

I want to ask, how to grouping list data if my list is a model, like this:

List<MyModel> mylist = {
MyModel("name" : "aaa", "age":"22"),
MyModel("name" : "bbb", "age":"21"),
MyModel("name" : "ccc", "age":"22"),
}

thanks

First group separator has wrong theming when using dark mode

Hi,

i use the brightness: Brightness.dark within ThemeData. Unfortunately the first group header does not use the dark color as background and therefore the header is not visible. If I set the property floatingHeader to true then the background is set correctly

floatingHeader = false	floatingHeader = true

Remarks: There is no issue with version 2.3.1
Possibly related with #41

How To Get Index of GroupedListView?

Thank's for making this great package. I have question how to get index of this GroupedListView ? It's Possible ?

I check inside itemBuilder not have index property , and i check too inside your file not see index property

Your File

itemBuilder: (context, index) {
              int actualIndex = index ~/ 2;
              if (index == 0) {
                if (widget.useStickyGroupSeparators) {
                  return buildEmptySeparator(actualIndex);
                }
                return _buildGroupSeparator(actualIndex);
              }
              if (index.isEven) {
                E curr = widget.groupBy(_sortedElements[actualIndex]);
                E prev = widget.groupBy(_sortedElements[actualIndex - 1]);
                if (prev != curr) {
                  return _buildGroupSeparator(actualIndex);
                }
                return widget.separator;
              }
              return widget.itemBuilder(context, _sortedElements[actualIndex]);
            },

What i expected is , i want display number order in this List. How can i achieved this ?

My Source Code

SizedBox(
                          height: sizes.height(context) * .50,
                          child: GroupedListView<PencatatanAirModel, String>(
                            elements: waterProvider.listByMonthAndYear,
                            groupBy: (model) => model.lantai,
                            separator: Divider(),
                            groupSeparatorBuilder: (value) => Padding(
                              padding: const EdgeInsets.all(4.0),
                              child: Text(
                                value,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                            itemBuilder: (_, PencatatanAirModel result) =>
                                InkWell(
                              onTap: () {
                                Navigator.of(context).pushNamed(
                                    WaterRecordDetailScreen.routeNamed);
                                waterProvider.setListLevel3(
                                  idDenah: result.idDenah,
                                );
                              },
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(vertical: 4.0),
                                child: Row(
                                  children: <Widget>[
                                    // titleHeaderRow(title: '$orderIndex'),
                                    titleHeaderRow(title: result.noPelanggan),
                                    titleHeaderRow(title: result.area),
                                    titleHeaderRow(title: result.meteran),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),

Use of groupSeparator property

groupSeparatorBuilder: (String value) => Padding(
padding: EdgeInsets.fromLTRB(15, 40, 10, 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
value,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300),
),
],
),
),

Above is my groupSeparator for the widget. I have set useStickyGroupSeparators to true. This results in the following:

How do i get rid of the space between the appBar and Monday, but preserve the space between Monday's last Card and Saturday etc?

Custom group order

怎么对组进行自定义排序？
比如例子中的是[Team A,Team B, Team C],
如果要按照[Team C,Team A,Team B]该怎么做？

Unable to group Map

I have a list of map List<SongInfo> songs;

This is how I will use the normal ListView

Widget _buildApps(songs) => ListView.builder(
      itemCount: songs.length,
      itemBuilder: (BuildContext context, int index) =>
          _buildRow(songs[index]));

  Widget _buildRow(SongInfo song) {
    final saved = musicModel.getSongs().contains(song.filePath);
    return ListTile( title: Text("${song.title}"));

Now I want to group all the songs by song.album.

Exception when used inside SliverChildListDelegate

Hello, thanks for the lib!

I'm having issues using GroupedListView inside a SliverChildListDelegate.
Before, I was using ListView.separated and it was working properly.

Some snippets to help:

BEFORE: (working)

 @override
  Widget build(BuildContext context) {
    return BlocBuilder<EventBloc, EventState>(
      bloc: BlocProvider.of(context),
      builder: (BuildContext context, EventState state){
        if(state is EventLoading){
          return Column(children: [
            CircularProgressIndicator()
          ]);
        }else if(state is EventEmpty){
          return Column(
            children: <Widget>[
              Text('No results :('),
            ],
          );
        }else if(state is EventLoaded){
          return ListView.separated(
              controller: scrollController,
              shrinkWrap: true,
              separatorBuilder: (context, index) {
                return Divider();
              },
              itemCount: state.hasMore ? state.event.length + 1 : state.event.length,
              itemBuilder: (BuildContext context, int index) {
                if(index >= state.event.length){
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(bottom: 12),
                        child: RaisedButton(
                          child: Text('Load More...'),
                          onPressed: (){
                            eventBloc.add(LoadMoreEvent());
                          },
                        ),
                      ),
                    ],
                  );
                } else {
                  return ConferenceItem(event: state.event[index]);
                }
              });
        }else{
          return Container();
        }
      },
    );

AFTER (not working):

@override
  Widget build(BuildContext context) {
    return BlocBuilder<EventBloc, EventState>(
      bloc: BlocProvider.of(context),
      builder: (BuildContext context, EventState state){
        if(state is EventLoading){
          return Align(
              child: CircularProgressIndicator()
          );
        }else if(state is EventEmpty){
          return Column(
            children: <Widget>[
              Text('No results :('),
            ],
          );
        }else if(state is EventLoaded){
          return GroupedListView<Event, String>(
              separator: Divider(),
              elements: state.event,
//              itemCount: state.hasMore ? state.event.length + 1 : state.event.length,
              indexedItemBuilder: (BuildContext context, Event event, int index) {
                if(index >= state.event.length){
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.only(bottom: 12),
                        child: RaisedButton(
                          child: Text('Load More...'),
                          onPressed: (){
                            eventBloc.add(LoadMoreEvent());
                          },
                        ),
                      ),
                    ],
                  );
                } else {
                  return ConferenceItem(event: event);
                }
              },
              groupSeparatorBuilder: (value) {
                return Text('teste');
              },
              groupBy: (Event element) {
                return element.country;
              });
        }else{
          return Container();
        }
      },
    );
  }

The parent component (which contains the ListView):

SliverList(
               delegate: SliverChildListDelegate([
                 Padding(
                   padding: const EdgeInsets.only(top: 16.0),
                   child: SearchBody(), <---- THIS IS THE ListView/GroupListView component
                 ),
               ])
           )

The exception I'm facing is the following:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

If this message did not help you determine the problem, consider using debugDumpRenderTree():
  https://flutter.dev/debugging/#rendering-layer
  http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderLimitedBox#a815b relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...    size: Size(411.4, 0.0)
...    maxWidth: 0.0
...    maxHeight: 0.0
...    child: RenderConstrainedBox#eb095 relayoutBoundary=up7 NEEDS-PAINT
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, h=0.0)
...      size: Size(411.4, 0.0)
...      additionalConstraints: BoxConstraints(biggest)
...  child 2: RenderRepaintBoundary#8e0c8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderCustomPaint#342ca NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      child: RenderRepaintBoundary#bc4ab NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        usefulness ratio: no metrics collected yet (never painted)
...        child: _RenderScrollSemantics#17174 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          semantic boundary
...          size: MISSING
The creator information is set to: Column-[GlobalKey#e959e] ← GroupedListView<Event, String> ← BlocBuilder<EventBloc, EventState> ← SearchBody ← Padding ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← ⋯

See also: https://flutter.dev/layout/

If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
The relevant error-causing widget was: 
  GroupedListView<Event, String> file:///Users/leonardo2204/project/flutter/confs_tech/lib/widgets/body.dart:57:18
When the exception was thrown, this was the stack: 
#0      RenderFlex.performLayout.<anonymous closure> (package:flutter/src/rendering/flex.dart:691:11)
#1      RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:718:10)
#2      RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7)
#3      RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:206:11)
#4      RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7)
...
The following RenderObject was being processed when the exception was fired: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
...  size: MISSING
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
RenderObject: RenderFlex#acbea relayoutBoundary=up5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: offset=Offset(0.0, 0.0) (can use size)
  constraints: BoxConstraints(w=411.4, 0.0<=h<=Infinity)
  size: MISSING
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
...  child 1: RenderLimitedBox#a815b relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...    size: Size(411.4, 0.0)
...    maxWidth: 0.0
...    maxHeight: 0.0
...    child: RenderConstrainedBox#eb095 relayoutBoundary=up7 NEEDS-PAINT
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, h=0.0)
...      size: Size(411.4, 0.0)
...      additionalConstraints: BoxConstraints(biggest)
...  child 2: RenderRepaintBoundary#8e0c8 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight
...    constraints: MISSING
...    size: MISSING
...    usefulness ratio: no metrics collected yet (never painted)
...    child: RenderCustomPaint#342ca NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: <none>
...      constraints: MISSING
...      size: MISSING
...      child: RenderRepaintBoundary#bc4ab NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        needs compositing
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        usefulness ratio: no metrics collected yet (never painted)
...        child: _RenderScrollSemantics#17174 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: <none>
...          constraints: MISSING
...          semantic boundary
...          size: MISSING
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#acbea relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Padding file:///Users/leonardo2204/project/flutter/confs_tech/lib/bloc/home_page.dart:38:19
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
The relevant error-causing widget was: 
  GroupedListView<Event, String> file:///Users/leonardo2204/project/flutter/confs_tech/lib/widgets/body.dart:57:18
════════════════════════════════════════════════════════════════════════════════════════════════════

For what it is worth, the code is open source: https://github.com/leonardo2204/confstech-flutter/blob/master/lib/widgets/body.dart#L40

I'm suspecting this may be related to the Expanded widget wrapping the ListView, but I'm not 100% sure, I'll dig further.

Thanks again!

Not working while using column as parent for GroupedListView

Drawer(
      child:  Column(
        children: <Widget>[
          
             GroupedListView<dynamic, String>(
            groupBy: (element) => element['country'],
            elements: litems,
            order: GroupedListOrder.DESC,
            useStickyGroupSeparators: true,
            groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
            value,
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            ),
            itemBuilder: (c, element) {
            return Card(
            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(Icons.account_circle),
            title: Text(element['city'].toString(),style: TextStyle(color: Colors.black),),
            trailing: Icon(Icons.arrow_forward),
            ),
            ),
            );
            },
            ),
          ),
        ],
      ),

How connect this group list to webapi? i tried but not working???

How connect this group list to webapi?
i tried but not working???

not working with group by type boolean

Its not working if we use the bool as group by field like this
GroupedListView<dynamic, bool>

This is the error
flutter: state: _GroupedLisdtViewState<dynamic, bool>#b8373):
flutter: The method '>' was called on null.
flutter: Receiver: null
flutter: Tried calling: >(0)

Scrollable positioned list

hey,

Thanks for the amazing plugin. Could you please check and see if you can include Scorllable positioned list

https://github.com/google/flutter.widgets/tree/master/example/scrollable_positioned_list

How to sort items within groups?

It would be good to use the compareTo function of the items to sort them. This way we could also sort items within groups.
Currently it seems only the compareTo of the groupBy is used.

White background on sticky header.

This fix is crucial for the use of sticky date headers which is used vastly by different applications.

Here's what's happening.

Sort items within group

Is there a way to sort the items with the group?

Bug : Header not changed once elements changed

I have a search field that filter elements, When I change elements by filtering them , sticky header (that removed by filtering) is not removed and after scrolling is removed

Add reverse option from list_view

is possible to reverse the list so the scrollview will starts at the end of the list lie a chat dialog?

ExpansionTile as header

How can I use ExpansionTile as header?

useStickyGroupSeparators=true cause lag in long list

Thanks for awesome library.
What i have noticed is with lots of items. 500+, the list will lag after scrolling to 400+.

Order groups by

Hi, first of all thank you for creating a great & useful package.
I wanted to ask - is there a way to order the groups by a custom (and not alphabetical) order?
Thank you!

Disable divider between list items

I have divider line between my list items, which one i want to disable. How can i do that!?

Add footer

Hello! Quick question, do you have any plans of adding a footer on the list?
I think it should be simple to implement yet pretty useful. If you agree I can open a PR.

Thanks!

Scrollbar indicator not reaching the end of a list.

Hello Dimibe,

This is a great package!

One Issue I have found when setting useStickyGroupSeparators to true is that the scrollbar indicator does not reach to the end of the list.

OnTap event responsive accuracy low

I have some issues with the onTap/onPressed events on Items of Grouped list.
I get an 70-80% response accuracy.
When I use a Listview directly the onTap events are triggered accurately as expected - so I can only draw the conclusion that it's related to the grouped list.

I need to make the items of the grouped list selectable - I used InkWell or GestureDetector and I get the same response accuracy of 70-80%.
I also have an IconButton on my ListItem which has the same response accuracy.

I just updated the library from version 3.1.0 to version 3.3.0 but I don't see any improvement.

Thanks,

Possible performance issue in 3.0

I tried upgrading form 2.31 to 3.0. After the upgrade the parent widget where I have GroupedListView gets rebuilt every time I scroll the list view. In other words the widget including GroupedListView is rebuilt repeatedly unnecessarily. This makes the list very slow. Issue gets fixed if I revert to 2.3.1. Any ideas what could be wrong?

Simplified build method where the problem occurs:

  @override
  Widget build(BuildContext context) {
     return ChangeNotifierProvider<ItemsViewModel>.value(
        value: _items,
        child: Consumer<ItemsViewModel>(
            builder: (context, viewModel, _) {
            return GroupedListView(elements: viewModels.items,...);
          }
...

Sticky Headers

Provide an option for sticky group separators.

It always show 'Team C' on the screen.

It always show 'Team C' on the screen when run your example. Please check.

Something is not right after updating to v3.0.1

Hello,

I just updated my app with the latest version of the library and my grouped list is behaving strange.

I noticed that if I don't add the floatingHeader param to false, then I get only the first groupSeparator item and the rest of the list is not visible.

If I add the floatingHeader param to true then I get all the items of the grouped list with a sticky groupSeparator item which somehow has a transparent background.
What am I doing wrong?

And since I opened this thread I have a small question. I group my list after date but I would like to order it after date and time is that possible somehow?

Thank you in advance.

Custom Ordering as Enhancement

Perhaps it will be a good idea to have a way to have custom orderings? This will allow different groups to be flushed to the top of the list, which is a feature I noticed is lacking in many widgets

AnimatedList for Enhancement.

What are the possibilities of implementing AnimatedList to the package? If there is a possibly please consider it.

Feature request : Animation

See https://pub.dev/packages/sticky_headers

Header sticky header has animation and pushed up by animation

Don't dispose ScrollController that pass as parameter

This packages calls .dispose() on the ScrollController argument it receives.

This means the obvious usage pattern is now wrong:

class _MyWidgetState extends State<MyWidget> {
  ScrollController _myController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    // Wrong, because this plugin dispose my own controller and I can not remove listener!
    _scrollController.removeListener(_scrollListener)..
    // Wrong, because this plugin wants me not to dispose my own controller!
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build() {
    return GroupedListView(controller: _scrollController, child: ... );
  }
}

This is surprising: If I'm creating the controller and pass it in, it should also be my job to dispose it. This is the way it works everywhere else in Flutter.

first item is not in alphabetical order

Hi, I have a grouped list that works very well except that the first item in the grouped list is not il alphabetical order as the following ones. Note the original list is already ordered in alphabetical order.
So I cannot explain this behaviour. Maybe a bug?

please see the attached example.

Thanks in advance for your help! and congratulations for the nice tool.
Sergio

Can not with List Model

I have a model Product, add List data with this model, but can not group by with that, run show error: Class 'Product' has no instance method 'call'.
Receiver: Instance of 'Product'
Tried calling: call(Product)

class Product{
String id;
String name;
String price;
String image;
String create_at;

Product({this.id, this.name, this.price, this.image, this.create_at});
}

Implement new sorting options

Hi I am looking to sort the elements by the days in the week instead of just ASC and DESC.
I tried to edit from the original sort for ASC.
These are the edits I have made to the grouped_list.dart file, but the app still remains to retain the original ASC sorting properties. Am I missing a step?

Reverse version

Here is the reverse version. Could probably merge both in one widget.

import 'package:flutter/material.dart';

class ReversedGroupedListView<T, E> extends ListView {
  /// Creates a fixed-length scrollable linear array of list "items" separated
  /// by list item "separators" and "group separators".
  ReversedGroupedListView({
    @required E Function(T element) groupBy,
    @required Widget Function(E value) groupSeparatorBuilder,
    @required Widget Function(BuildContext context, int actualIndex) itemBuilder,
    bool sort = false,
    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,
          reverse: true,
          itemBuilder: (context, index) {
            int actualIndex = index ~/ 2;
            if (index.isOdd) {
              E curr = groupBy(elements[actualIndex]);
              E next = actualIndex + 1 < elements.length ? groupBy(elements[actualIndex + 1]) : null;
              if (next != curr) {
                return groupSeparatorBuilder(curr);
              }
              return separator;
            }
            return itemBuilder(context, actualIndex);
          },
        ) {
    if (sort && elements.isNotEmpty) {
      if (groupBy(elements[0]) is Comparable) {
        elements.sort((e1, e2) => (groupBy(e2) as Comparable).compareTo(groupBy(e1) as Comparable));
      } else {
        elements.sort((e1, e2) => ('${groupBy(e2)}').compareTo('${groupBy(e1)}'));
      }
    }
  }
}

Regards

Render items even if not shown on screen

Hi, the issue is regarding the use of Builder. The items that are not mounted on the screen will not be render, unless the user manually scrolls the the list to reveal them. This is an issue because in my app, the items have Timers and the Timers in the items far down the list cannot be activated unless the user scrolls the list.

using grouped list as a grid view

is it possible if i want use this package to make a grouped gridview? or there are another package

Solution to lack of @required on required parameters

I found that it is easy to accidentally forget to use the required parameters for GroupedListView() that appear in the documentation; while doing so, there will be no compile-time error, and the run-time error one would get is rather cryptic:

The method 'call' was called on null.
Receiver: null
Tried calling: call()

I understand @required wasn't added because of the different builder types, but is there a way to make this more obvious?
Thank you!

Indexed item builder

groupBy: String

I have tested, that "groupBy" attribute works, if i am using integer value. It would be nice, that there would be option to group items by string value.

Sorting double and integers as strings

When we sort double or integer. It takes it as string and sort in the same way. For example, if we have a list 1, 2, 3, 10, 12, 15.
we get 1, 12, 15, 2, 3 in sort.

Wrong list items when scrolling

After upgrading to version 2.1.0, list items are changing constantly when scrolling and showing wrong values.

Example:

RefreshIndicator implementation

I've implemented GroupedListView inside a RefreshIndicator and it seems to work only when list is long enough and scrollable.
For example, when the list contains only one value RefreshIndicator cannot be performed.
Any ideas?

Sticky group separator shows wrong values

I have an issue when displaying a list with contacts names in Hebrew, the value inside the sticky group separator gets kind of stuck and not displaying the correct value.

Example:

The first letter of the names in the list is in the right.

grouping by date string seems not to work

Hi Dimibe,

thank for your work on this great package!

I'm trying to group my listitems by a String which contains a date "2020-03-28". Seems that it's not grouping correctly. When I add an item with the String "2020-03-29" and then again a item with "2020-03-28" I get 3 different groups but as far as I understand there should be only 2.

Add a sort option.

Is:

Currently the passed elements need to be sorted in order to assure that the grouping works as expected.

Should:

The list should be sorted before displaying. Make the sorting configurable through a parameter for performance reason. E.g. if the elements are provided by a query ordering the query result should be preferred.

Name of the option should be sort.
The option should be optional.
By default the option should be set to true.

Ripple effect not working.

Hello again,

Using ListTile or InkWell in the itemBuilder does not show the ripple effect when tapping on an item. But functions like onTap and onLongPress work, it's just the effect that doesn't work.