🔪

Flutter/DartでListの要素を分割する方法4選

2021/07/16に公開
4

こんにちは、Flutterでのアプリ開発をメインとしている「Altive株式会社」の村松龍之介(@riscait)です!


DartのList型の中身を分割しつつ、リスト化できる方法を備忘録がてら書き残します。

結論

collection パッケージの slices 関数か、 quiver パッケージの partition 関数を使おう!
パッケージに依存したくない場合は、 takeskip で要素を取り出そう!

手法4選

1. List.sublist(start, end) を使用する方法

for文で回して、内部で sublist 関数を使って範囲内の要素をリスト化しています。

2. List.skip(count), List.take(count) を使用する方法

今度は do-while 文を使用しています。
do の中で skiptake を使用して分割したい要素を取得しています。
こっちの方が読みやすい感じがしますね。

3. quiverパッケージの partition() を使用する方法

Google製の Quiver というDart用のユーティリティパッケージがあります。
https://pub.dev/packages/quiver

パッケージを追加します。

最新版の quiver パッケージを pubspec.yamldependencies に追加しましょう。

flutter pub add quiver

partition(iterable, size) メソッドを使いましょう👍

import 'package:quiver/iterables.dart';

final items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];
final chunkSize = 3;
// [[a, b, c], [d, e, f], [g, h, i], [j, k]]
final chunkedItems = partition(items, chunkSize);

1行で期待通りの動きをしてくれました🥺

(内部的には Iteratorを実装した _PartitionIteratorで while を使用しているようでした)
https://github.com/google/quiver-dart/blob/master/lib/src/iterables/partition.dart

4. collection パッケージの slices(length) メソッドを使用する方法

Dart.dev製の collection という、コレクションを簡単に扱うためのパッケージがあります。
https://pub.dev/packages/collection

firstOrNUll など Null Safety で有用なユーティリティが入っているので、すでに採用しているプロジェクトも少なくないのでしょうか?

パッケージを追加します。

最新版の collection パッケージを pubspec.yamldependencies に追加しましょう。

flutter pub add collection

slices(length) メソッドを使いましょう👍

import 'package:package:collection/collection.dart';

final items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];
  final sliced = items.slices(3);
  print(sliced); // ([a, b, c], [d, e, f], [g, h, i], [j, k])

1行で期待通りの動きをしてくれました🥺

https://pub.dev/documentation/collection/latest/collection/IterableExtension/slices.html

最後に

個人的には、すでに採用していることが多く、Dart.devのパッケージでも collectionslices(length) メソッドを利用していきたいと思いました!
しかし、何らかの理由でパッケージに依存したくない場合は do-while, take, skip を使うと思います。

最後までご閲覧ありがとうございました🙌

宣伝

Altive株式会社では、Flutterアプリの開発・運営を承っております。
お気軽にお問い合わせください🫡
https://altive.co.jp/contact


Riverpod の実践入門本を公開中です📘
https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction

GitHubで編集を提案
Altiveエンジニアリングブログ

Discussion

xxxxxx

有益な記事ありがとうございます!
恐縮ではございますが、
quiverライブラリの説明のコード
partitionではなくpertitionとタイポされておられます。

ログインするとコメントできます