Flutterでキーボードが表示されているかどうかを判定する方法


  1. フォーカスの監視: キーボードが表示されると、対象のテキストフィールドやテキストエリアにフォーカスが移動します。そのため、フォーカスの状態を監視することでキーボードの表示を判定することができます。
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),
        ),
      ),
    );
  }
}
  1. キーボードのイベントを監視: 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),
        ),
      ),
    );
  }
}

これらの方法を使用すると、キーボードが表示されているかどうかを判定することができます。必要に応じてこれらのコード例をブログ投稿に組み込んで説明することができます。