[Flutter]Flutter Widget of the Week「#160 List.generate」、「#161 Future.wait」、「#162 firebase_vertexai」

はじめに

前回はFlutter Widget of the Weekの「#157 SegmentedButton」、「#158 Isolates」、「#159 Tween」を紹介しました。

今回はその続きで「#159 List.generate」、「#160 Future.wait」、「#161 firebase_vertexai」の3つです。

前回の記事はこちら

またGitHubにも公開しています。

GitHub - nobushiueshi/flutter_widget_of_the_week

Contribute to nobushiueshi/flutter_widget_of_the_week development by creating an account on GitHub.

Flutter Widget of the Week

環境

Flutter 3.23.3

記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。

#160 List.generate

List.generateとは？

長さが決まっているリストをコールバック関数を使って作る場合に便利なメソッドです。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage160 extends StatefulWidget {
  const SamplePage160({super.key});

  @override
  State<SamplePage160> createState() => _SamplePage160State();
}

class _SamplePage160State extends State<SamplePage160> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('List.generate'), centerTitle: true),
      body: SafeArea(
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List.generate(
              5,
              (int index) => Icon(
                Icons.star,
                color: Colors.primaries[index % Colors.primaries.length],
                size: 50,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

結果

動画

公式リファレンス

List.generate constructor - List - dart:core library - Dart API

API docs for the List.generate constructor from Class List from the dart:core library, for the Dart programming language...

#161 Future.wait

Future.waitとは？

Futureのリストを受け取り、全てのFutureが完了するのを待つ新しいFutureを返します。

全てのFutureが完了すると、結果のリストが元のFutureのリストと同じ順序で返され、リスト内のいずれかのFutureが失敗すると、Future.wait が返すFutureもエラーとなります。

Futureは一度に全てリストに追加することも、一つずつ追加することも可能ですが、いずれの場合も全てのFutureは同時に開始されます。

Future.wait を使用することで、コードが簡潔になり、全体の待ち時間は個々のFutureの待ち時間の合計ではなく、最も時間のかかるFutureの待ち時間と等しくなります。従来のループ処理で非同期処理を待つ方法と比較して、Future.waitの方が効率的です

サンプルコード

import 'package:flutter/material.dart';

class SamplePage161 extends StatelessWidget {
  const SamplePage161({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Future.wait'), centerTitle: true),
      body: SafeArea(
        child: Center(
          child: FutureBuilder<List<String>>(
            future: Future.wait<String>([
              Future<String>.delayed(const Duration(seconds: 1), () => 'A'),
              Future<String>.delayed(const Duration(seconds: 2), () => 'B'),
              Future<String>.delayed(const Duration(seconds: 3), () => 'C'),
            ]),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else if (snapshot.hasData) {
                return Text('Result: ${snapshot.data}');
              } else {
                return const Text('No data');
              }
            },
          ),
        ),
      ),
    );
  }
}