3
1

More than 1 year has passed since last update.

【Flutter】Listを操るメソッド3選

Last updated at Posted at 2023-08-15

未経験にとって、List自体は理解していても、そのListを表示させるために操ろうとすると結構詰まりません??
そこで、1年間Flutterの開発をしてきて、「このメソッド知ってたらなんとなく行けるだろ」ってメソッドを3つ紹介します!

1.map

Iterableを返却してくれます。 ← Iterableってなんやねん。ってなりますよね最初は。

簡単にいうと、forEach文と同じ動きをしてくれていると思ってください。
mapの処理を通ることで、Listのひとつ分の要素を返却する処理を繰り返してくれます。

list.map((e) => e)にあたるところで、listひとつ分の要素が「e」に入り、
それをTextWidgetで利用することで表示しています。

Widget build(BuildContext context) {
    final List<String> list = ['apple', 'orange', 'greape'];

    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: ListView(
        children: [
          ...list.map((e) => Text(e)), //1要素ずつText表示
        ],
      ),
    );
  }

表示結果

スクリーンショット 2023-08-10 18.42.27.png

2.where

渡した条件と一致する要素のみを返却してくれます。

.map()と同様に、list.where((element) => 条件)にあたるところで、
elementに入ったひとつ分の要素が、その後に渡している条件と一致するものを絞り込んでいます。

最後の、.toList()のメソッドを付け足すことで、
条件に一致した要素をリスト化しています。

Widget build(BuildContext context) {
    final List<String> list = ['山田太郎', '山田花子', '鈴木太郎'];
    final filteredList =
        list.where((element) => element.contains('山田')).toList(); // 「山田」が含まれる文字列を絞り込み

    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: ListView(
        children: [
          ...filteredList.map((e) => Text(e)), //絞り込んだリストを1要素ずつText表示
        ],
      ),
    );
  }

表示結果

スクリーンショット 2023-08-10 18.51.25.png

3.sort

リストの並べ替えをしてくれます。

自分はcompareToはテンプレートだと思って暗記しています。(苦笑)
a.compareTo(b)とするころで、リストを昇順に並べ替えてくれます。

Widget build(BuildContext context) {
    final List<int> list = [1, 3, 5, 2, 4];
    list.sort((a, b) => a.compareTo(b)); //リストを昇順で並べ替え

    return Scaffold(
      appBar: AppBar(
        title: const Text('サンプル'),
      ),
      body: ListView(
        children: [
          ...list.map((e) => Text(e.toString())),  //並べ替えたリストを1要素ずつText表示
        ],
      ),
    );
  }

表示結果

スクリーンショット 2023-08-10 21.50.14.png

sortは文字数やDateTime等でも並べ替えることができます。

終わり

今回紹介したのはListを操るメソッドの氷山の一角にしか過ぎませんが、
多分これさえマスターできれば、これよりも単純で簡単なメソッドは容易に理解ができるのではないかと思っています。

以上、このメソッド使って感動したなんて話があったらコメントください!

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1