【Flutter】ボタンの連打を防止する！通信中処理内で役立つ小技！

2024年3月7日2024年4月2日

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読んでわかること

ボタンの連打を防止する方法とその重要性
条件を満たすとボタンを押下できるロジック
通信中にボタン連打防止するロジック

開発環境

Dart 3.0.0
Flutter 3.10.0

ボタンの連打を防止する方法

概要

ユーザーによるボタンの連打は、不必要な通信を引き起こしたり、アプリケーションのパフォーマンスに影響を与える可能性があります。Flutterでは、この問題を解決するために、いくつかの手法があります。このセクションでは、その中でも特に効果的な手法をサンプルコードを用いて説明します。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isButtonDisabled = false;

  void _toggleButton() {
    setState(() {
      _isButtonDisabled = !_isButtonDisabled;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ボタン連打防止'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _isButtonDisabled ? null : () {
            _toggleButton();
            // 通信などの処理をここに記述
            Future.delayed(Duration(seconds: 1), () {
              _toggleButton(); // 通信終了後にボタンを再度有効にする
            });
          },
          child: Text(_isButtonDisabled ? '処理中...' : 'ボタン'),
        ),
      ),
    );
  }
}

サンプルコードの解説

3-5行目: アプリケーションのエントリーポイントとメインウィジェットの定義。
16-19行目: MyHomePage クラスは、アプリケーションのホームページを表すStatefulWidgetです。
21-50行目: MyHomePageの状態を管理する_MyHomePageStateクラスです。_isButtonDisabled変数を用いて、ボタンの状態（有効/無効）を管理します。
38-44行目: ボタンが押された時の処理。ボタンが有効な状態であれば、ボタンを無効にし、非同期処理（例えば、サーバーへの通信）を実行します。処理が完了した後、ボタンを再度有効にします。

動作確認

いちの

それでは、動作を確認してみましょ〜

非同期処理についてもっと詳しく知りたい！という読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか？今回は、ボタン連打を防止する方法と通信中に役立つ小技について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。