Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]明示的な非同期処理unawaitedのコードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるunawaitedの利用例についてのコードスニペットを紹介します。

unawaitedはawaitが必要そうな部分で明示的にawaitを利用しないことを示す構文で、unawaited_futuresのLintを有効にしている場合に必要になります。使用例を見てみましょう。

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

  @override
  State<UnawaitedDemoPage> createState() => _UnawaitedDemoPageState();
}

class _UnawaitedDemoPageState extends State<UnawaitedDemoPage> {
  int _tapCount = 0;
  String _status = '未実行';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('unawaited demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('タップ回数: $_tapCount', style: const TextStyle(fontSize: 18)),
            const SizedBox(height: 8),
            Text('状態: $_status', style: const TextStyle(fontSize: 18)),
            const SizedBox(height: 24),
            FilledButton(
              onPressed: () {
                // UIをすぐに更新
                setState(() {
                  _tapCount++;
                  _status = 'ボタン操作反映（非同期処理中）';
                });

                // unwaitedでラップすることでawait忘れではないことを明示化する
                unawaited(_fakeApiCallThenUpdateUI());
              },
              child: const Text('押す'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _fakeApiCallThenUpdateUI() async {
    try {
      // API実行のように0.8秒待機
      await Future<void>.delayed(const Duration(milliseconds: 800));

      // 非同期処理後なのでmountedチェック
      if (!mounted) return;

      setState(() {
        _status = '非同期処理完了';
      });
    } catch (e) {
      // 例外処理
      if (!mounted) return;
      setState(() => _status = '非同期処理失敗: $e');
    }
  }
}

これでawaitが必要そうな部分であえてawaitを利用していないことを明示化することができます。良かったですね。

戻る 一覧へ戻る