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)をソート
アルファベット順にソートされます。
例えば、
- 3つの文字の先頭を見たときに「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)), //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)), //10日後
isDone: false,
createDatetime: DateTime.now(),
updateDatetime: DateTime.now()),
];
_list.sort(((a, b) => a.limitDatetime.compareTo(b.limitDatetime)));
基本的にはcompareToを使うことは変わらないです。
compareToをする対象をオブジェクト内のフィールド値に設定してあげることでソートされるようになります。
配列をリストで画面に表示する方法は以下からどうぞ!
おわり
コメント