【2024年11月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

【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を呼び出し、テキストの内容を更新します。これにより、ウィジェットの再描画がトリガーされます。

動作確認

いちの

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

【Flutter】ボタン押下時文字列変更

ボタン押下後、非同期処理中に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('テキストを変更'),
            ),
          ],
        ),
      ),
    );
  }
}

解説

  • _isProcessing変数を使用して、非同期処理の実行状態を追跡します。
  • CircularProgressIndicatorウィジェットを使用して、非同期処理中にプログレスバーを表示します。
  • 非同期処理が実行中の場合、ボタンは無効化されます。これにより、処理中の重複した操作を防ぎます。

動作確認

いちの

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

【Flutter】ボタン押下後非同期処理中は操作不可にしプログレスバーを表示する

ボタン押下時に外部ブラウザ(Webサイト)を立ち上げる方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

Flutterにおけるボタン押下時の文字列変更、非同期処理中のUI操作不可の設定、およびプログレスバーの表示方法について詳しく解説しました。非同期処理中のUI操作不可の設定を適切にすることで、ユーザーにとってより応答性の高いアプリケーションを開発することができます。

いちの

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (5件)

コメントする

目次