- フォーカスの監視: キーボードが表示されると、対象のテキストフィールドやテキストエリアにフォーカスが移動します。そのため、フォーカスの状態を監視することでキーボードの表示を判定することができます。
import 'package:flutter/material.dart';
class KeyboardDetectionScreen extends StatefulWidget {
@override
_KeyboardDetectionScreenState createState() => _KeyboardDetectionScreenState();
}
class _KeyboardDetectionScreenState extends State<KeyboardDetectionScreen> {
bool isKeyboardVisible = false;
@override
void initState() {
super.initState();
// フォーカスの変更を監視するリスナーを登録する
FocusManager.instance.addListener(_onFocusChange);
}
@override
void dispose() {
// リスナーを解除する
FocusManager.instance.removeListener(_onFocusChange);
super.dispose();
}
void _onFocusChange() {
// フォーカスが変更されたときに呼ばれるコールバック
setState(() {
isKeyboardVisible = FocusManager.instance.hasFocus;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('キーボードの表示判定'),
),
body: Center(
child: Text(
'キーボードの表示状態: ${isKeyboardVisible ? '表示中' : '非表示'}',
style: TextStyle(fontSize: 20),
),
),
);
}
}
- キーボードのイベントを監視:
WidgetsBinding
を使用して、キーボードの表示や非表示に関するイベントを監視することもできます。
import 'package:flutter/material.dart';
class KeyboardDetectionScreen extends StatefulWidget {
@override
_KeyboardDetectionScreenState createState() => _KeyboardDetectionScreenState();
}
class _KeyboardDetectionScreenState extends State<KeyboardDetectionScreen> with WidgetsBindingObserver {
bool isKeyboardVisible = false;
@override
void initState() {
super.initState();
// WidgetsBindingのobserverとして登録する
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
// observerを解除する
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangeMetrics() {
// ウィンドウメトリクス(キーボードの状態を含む)が変更されたときに呼ばれるコールバック
setState(() {
final renderObject = context.findRenderObject();
if (renderObject is RenderBox) {
final keyboardHeight = WidgetsBinding.instance!.window.viewInsets.bottom;
isKeyboardVisible = keyboardHeight > 0;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('キーボードの表示判定'),
),
body: Center(
child: Text(
'キーボードの表示状態: ${isKeyboardVisible ? '表示中' : '非表示'}',
style: TextStyle(fontSize: 20),
),
),
);
}
}
これらの方法を使用すると、キーボードが表示されているかどうかを判定することができます。必要に応じてこれらのコード例をブログ投稿に組み込んで説明することができます。