【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不可にしプログレスバーを表示する方法を徹底解説

2024年2月12日2024年4月2日

【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不可にしプログレスバーを表示する方法を徹底解説

いちの

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

この記事でわかること

ボタン押下時に文字列を変更する方法
ボタン押下後、非同期処理中にUIを操作不可にする方法
非同期処理中にプログレスバーを表示する方法
非同期処理の例として、5秒間の遅延を挿入する方法

開発環境

Dart 3.0.0
Flutter 3.10.0

ボタン押下時に文字列を変更する方法

Flutterにおいて、ボタン押下時に文字列を変更する機能は、状態管理を適切に行うことで実現できます。以下に、StatefulWidgetを使用した基本的なサンプルコードを示します。

サンプルコード

import 'package:flutter/material.dart';

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _text = '初期テキスト';

  void _changeText() {
    setState(() {
      _text = '更新されたテキスト';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ボタン押下時の文字列変更デモ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_text),
            ElevatedButton(
              onPressed: _changeText,
              child: Text('テキストを変更'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

StatefulWidgetを使用して、状態（この場合はテキストの内容）が変化するウィジェットを作成します。
_changeTextメソッド内でsetStateを呼び出し、テキストの内容を更新します。これにより、ウィジェットの再描画がトリガーされます。

動作確認

いちの

実際の動作を確認してみましょ〜！

ボタン押下後、非同期処理中にUIを操作不可にしプログレスバーを表示

ボタン押下後の非同期処理中にUIを操作不可にするには、非同期処理の開始と終了を適切に管理し、その状態に応じてウィジェットの状態を制御する必要があります。具体的には、非同期処理が実行中かどうかを示すブール値を状態として持ち、この値に基づいてウィジェットを有効/無効にします。
非同期処理中にプログレスバーを表示するには、FlutterのCircularProgressIndicatorウィジェットを活用します。非同期処理の実行状態に応じて、プログレスバーを表示または非表示にすることができます。

いちの

非同期処理についてもっと詳しく学びたい！という読者様は
下記記事にてわかりやすく丁寧に解説しておりますの
ぜひぜひ

サンプルコード

import 'package:flutter/material.dart';
import 'dart:async';

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String _text = '初期テキスト';
  bool _isProcessing = false;

  Future<void> _changeTextWithDelay() async {
    setState(() {
      _isProcessing = true;
    });

    // 5秒間の遅延を挿入
    await Future.delayed(Duration(seconds: 5));

    setState(() {
      _text = '更新されたテキスト';
      _isProcessing = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('非同期処理とプログレスバーのデモ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_isProcessing) CircularProgressIndicator(),
            SizedBox(height: 20),
            Text(_text),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _isProcessing ? null : _changeTextWithDelay,
              child: Text('テキストを変更'),
            ),
          ],
        ),
      ),
    );
  }
}