Flutter/Dart: How to sort list by key?

Question

I'm trying to sort my list alphabetically by item before showing it in a ListView.builder, and I'm not having any luck doing so. Here's my code:

class GlossaryItem {
  String item;
  String definition;

  GlossaryItem({String i, String d}) {
    item = i;
    definition = d;
  }
}

class Glossary {
  int _glossaryNumber = 0;

  List<GlossaryItem> _glossaryBank = [
    GlossaryItem(
      i: 'item a',
      d: 'definition a',
    ),
    GlossaryItem(
      i: 'item d',
      d: 'definition d',
    ),
    GlossaryItem(
      i: 'item b',
      d: 'definition b',
    ),
    GlossaryItem(
      i: 'item c',
      d: 'definition c',
    ),
  ];

  _glossaryBank.sort((a, b) {
  int compare = a.item.compareTo(b.item);
  return compare;
  });

  int getCount() {
    return _glossaryBank.length;
  }

  String getSpecificItem(index) {
    return _glossaryBank[index].item;
  }

  String getSpecificDefinition(index) {
    return _glossaryBank[index].definition;
  }
}

I get an error on _glossaryBank.sort() saying "The name of the constructor must match the name of the enclosing class." I have gone through many pages and can't seem to get this to work.

EDIT: I changed it the following and now I don't get an error on that page:

  void sort() {
  _glossaryBank.sort((a, b) {
    int compare = a.item.compareTo(b.item);
    return compare;
  });

However, when trying to initiate it, I get other errors. Here is my other page where I initiate it:

import 'package:flutter/material.dart';
import '../dictionary/glossarylist.dart';

//Call glossary
var glossary = Glossary();
glossary.sort();

class GlossaryPage extends StatefulWidget {
  GlossaryPage({
    Key key,
  });

  @override
  _GlossaryPageState createState() => _GlossaryPageState();
}

class _GlossaryPageState extends State<GlossaryPage> {

  Widget printDefinitions() {
    return ListView.builder(
      itemCount: glossary.getCount(),
      itemBuilder: (BuildContext context, int index) {
        // return row
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                glossary.getSpecificItem(index) + ':',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                glossary.getSpecificDefinition(index),
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                ),
              ),
            ],
          ),
        );
      },
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.teal[300],
      child: SafeArea(
        child: Scaffold(
          appBar: [omitted code...]
          body: Padding(
            padding: const EdgeInsets.all(15.0),
            child: printDefinitions(),
          ),
        ),
      ),
    );
  }
}

Answer 1

The problem is that you have the _glossaryBank outside of a running method. You have to write something where you can execute the code.

class Glossary {
  int _glossaryNumber = 0;

  List<GlossaryItem> _glossaryBank = [
    GlossaryItem(
      i: 'item a',
      d: 'definition a',
    ),
    GlossaryItem(
      i: 'item d',
      d: 'definition d',
    ),
    GlossaryItem(
      i: 'item b',
      d: 'definition b',
    ),
    GlossaryItem(
      i: 'item c',
      d: 'definition c',
    ),
  ];

  void sort() {
    _glossaryBank.sort((a, b) {
      int compare = a.item.compareTo(b.item);
      return compare;
    });
  }
}

and wherever you initiate the class, you have to use it

var glossary = Glossary();
glossary.sort();

I created a small CodePen about how it could work. https://codepen.io/md-weber/pen/bGVjdap