【たぶん全集】Dartで配列(List)をソート(Sort)する方法〔Flutter〕

Flutterにて配列の値を昇順(asc)や降順(desc)で並び替える方法を紹介します！

また、様々なケースにてソートする方法をまとめています。

ほとんどがコピペで行けると思いますので、参考になると嬉しいです。

それでは一つずつ紹介していきます。

ケースの一覧は以下の通りです。

様々なケースでのソート順

様々なケースでのソート順

DateTimeを昇順にソート

ソートは基本的に黄色でハイライトしている「sort」「compareTo」を使用することで実装することができます。

「_list」にてSORT前の配列を定義し、sortした後の結果をSORT後として表示しています。

final List<DateTime> _list = [
  DateTime.now(),                                    // 今日
  DateTime.now().add(const Duration(days: 5)),       // 本日の5日後
  DateTime.now().subtract(const Duration(days: 3)),  // 本日の3日前
];

_list.sort(((a, b) => a.compareTo(b)));

DateTimeを降順にソート

compareToのa,bを反転させることで、降順にソートすることができます。

final List<DateTime> _list = [
  DateTime.now(),                                    // 今日
  DateTime.now().add(const Duration(days: 5)),       // 本日の5日後
  DateTime.now().subtract(const Duration(days: 3)),  // 本日の3日前
];

_list.sort(((a, b) => b.compareTo(a)));

文字列(String)をソート

アルファベット順にソートされます。

例えば、

３つの文字の先頭を見たときに「f」が一番早く、「t」は同じ
「t」の次の見た時「h」が早いため、最終的な結果となる

final List<String> _list = [
  'three',
  'four',
  'two',
];

_list.sort(((a, b) => a.compareTo(b)));

文字列の長さでソート

文字列のlengthメソッドにて比較させることで、文字列の長さによる配列のソートを行うことができます。

final List<String> _list = [
  'four', 
  'three',
  'two',
];

 _list.sort(((a, b) => a.length.compareTo(b.length)));

数字(int)でソート

final List<int> _list = [
  3,
  2,
  7,
];

_list.sort(((a, b) => a.compareTo(b)));

オブジェクトのフィールド値でソート

ケース

TODOアプリを作る際にリストで保持しているTODOオブジェクトを
フィールド値として持っている期限日順(limitDateTime)にソートしたいと考えます。

実装

・Todoオブジェクト

class Todo {
  final int id;
  final String todo;
  final DateTime limitDatetime;
  final bool isDone;
  final DateTime createDatetime;
  final DateTime updateDatetime;

  Todo({
    required this.id,
    required this.todo,
    required this.limitDatetime,
    required this.isDone,
    required this.createDatetime,
    required this.updateDatetime,
  });
}

・Todoを期限日(limitDatetime)で昇順にソートするソース

final List<Todo> _list = [
  Todo(
      id: 0,
      todo: 'hello!',
      limitDatetime: DateTime.now().subtract(const Duration(days: 5)), //５日前
      isDone: false,
      createDatetime: DateTime.now(),
      updateDatetime: DateTime.now()),
  Todo(
      id: 1,
      todo: 'こんにちは！',
      limitDatetime: DateTime.now(), //今日
      isDone: false,
      createDatetime: DateTime.now(),
      updateDatetime: DateTime.now()),
  Todo(
      id: 2,
      todo: 'せかい！',
      limitDatetime: DateTime.now().add(const Duration(days: 10)), //１０日後
      isDone: false,
      createDatetime: DateTime.now(),
      updateDatetime: DateTime.now()),
];

_list.sort(((a, b) => a.limitDatetime.compareTo(b.limitDatetime)));

基本的にはcompareToを使うことは変わらないです。

compareToをする対象をオブジェクト内のフィールド値に設定してあげることでソートされるようになります。

配列をリストで画面に表示する方法は以下からどうぞ！