Flutter How to group lists from data in a SQLite database?

Question

I am newbie, and I am using package grouped_list to group the list with data from the SQLite database, grouped_list works fine with an existing list just like in its example, but when I replace it equals list with data retrieved from SQLite database then it doesn't work and I get error:

The following NoSuchMethodError was thrown building GroupedListView<dynamic, String>(dirty, state: _GroupedListViewState<dynamic, String>#c2ba2):
Class 'DrinkDatabase' has no instance method '[]'.
Receiver: Instance of 'DrinkDatabase'
Tried calling: []("drinkGroup")

Below is my code. If you need more information please let me know, please help, thank you!

GroupedListView<dynamic, String>(
  shrinkWrap: true,
  elements: homeController.drinkList,
  groupBy: (element) => element['drinkGroup'],
  groupComparator: (value1, value2) => value2.compareTo(value1),
  itemComparator: (item1, item2) =>
      item1['drinkDateTime'].compareTo(item2['drinkDateTime']),
  order: GroupedListOrder.DESC,
  useStickyGroupSeparators: true,
  groupSeparatorBuilder: (String value) =>
      Container(),
  itemBuilder: (c, element) {
    return Container();
  },
)

This is how I declare the list:

List drinkList = List<DrinkDatabase>();

And class DrinkDatabase:

class DrinkDatabase {
  int drinkId;
  int drinkVolume;
  String drinkGroup;
  String drinkCategory;
  String drinkDateTime;

  DrinkDatabase({
    this.drinkId,
    this.drinkVolume,
    this.drinkGroup,
    this.drinkCategory,
    this.drinkDateTime,
  });

  Map<String, dynamic> toMap() {
    return {
      "drinkId": drinkId,
      "drinkVolume": drinkVolume,
      "drinkGroup": drinkGroup,
      "drinkCategory": drinkCategory,
      "drinkDateTime": drinkDateTime,
    };
  }

  @override
  String toString() {
    return 'drinkTable('
        '"drinkId": ${this.drinkId}, '
        '"drinkVolume": ${this.drinkVolume}, '
        '"drinkGroup": ${this.drinkGroup}, '
        '"drinkCategory": ${this.drinkCategory}, '
        '"drinkDateTime": ${this.drinkDateTime}, ';
  }
}

Answer 1

What I did and it worked for me

The way to declare the list

List drinkList = [];

Then replace the line

elements: homeController.drinkList,

with

elements: drinkList,

To build the list from the database query result list

Future<void> getSampleList() async {
    drinkList.clear();
    List<Map<String, dynamic>> result =
        await DrinkDatabaseHelper.instance.queryAll();
    print('result= $result');
    var map = new Map<String, dynamic>();
    for (int i = 0; i < result.length; i++) {
      map['drinkId'] = result[i]['drinkId'].toString();
      map['drinkVolume'] = result[i]['drinkVolume'].toString();
      map['drinkGroup'] = result[i]['drinkGroup'];
      map['drinkCategory'] = result[i]['drinkCategory'];
      map['drinkDateTime'] = result[i]['drinkDateTime'];
      drinkList.add(Map<dynamic, String>.from(map));
    }

In DrinkDatabaseHelper

Future<List<Map<String, dynamic>>> queryAll() async {
    Database db = await instance.database;
    return await db.query(_tableName);
  }

If you have more questions let me know