いちの
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事でわかること
- ボタン押下時に文字列を変更する方法
- ボタン押下後、非同期処理中に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
ウィジェットを活用します。非同期処理の実行状態に応じて、プログレスバーを表示または非表示にすることができます。
非同期処理についてもっと詳しく学びたい!という読者様は
下記記事にてわかりやすく丁寧に解説しておりますの
ぜひぜひ
【Flutter】非同期リスト操作:Future、async/await、Streamを理解し、並列処理と並行処理をマスターする
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読んでわかること Future、asyncとawaitの基本と使…
サンプルコード
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
ウィジェットを使用して、非同期処理中にプログレスバーを表示します。- 非同期処理が実行中の場合、ボタンは無効化されます。これにより、処理中の重複した操作を防ぎます。
動作確認
実際の動作を確認してみましょ〜!
ボタン押下時に外部ブラウザ(Webサイト)を立ち上げる方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
【Flutter】外部ブラウザ(Webサイト)を立ち上げる方法を解説
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読んでわかること url_launcherパッケージの設定 外…
まとめ
Flutterにおけるボタン押下時の文字列変更、非同期処理中のUI操作不可の設定、およびプログレスバーの表示方法について詳しく解説しました。非同期処理中のUI操作不可の設定を適切にすることで、ユーザーにとってより応答性の高いアプリケーションを開発することができます。
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント
コメント一覧 (5件)
[…] 【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不… […]
[…] 【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不… […]
[…] 【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不… […]
[…] 【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不… […]
[…] 【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不… […]