ミッドランドブログ

長めのお知らせ、紹介記事を掲載します

【Flutter】デスクトップアプリのTextFieldでフォーカスが外れた時にonSubmittedが呼ばれなかった話

FlutterのwindowsアプリでTextFieldを使おうとしたとき、フォーカスが外れたタイミングでonSubmittedが呼ばれずに困りました。

windowsアプリの場合、入力完了後Enterキーを押さないとonSubmittedイベントが発生しないようです。

onChangedで代用しようかと思いましたが、想定した挙動になりません。
GTP先生に聞いたところFocusNodeを使えとの回答が

とりあえずこんなコードでフォーカスが外れたタイミングを入力完了として扱えるようになりました。

 


import 'package:flutter/material.dart';

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

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

class FocusExample extends StatefulWidget {
  @override
  _FocusExampleState createState() => _FocusExampleState();
}

class _FocusExampleState extends State {
  final FocusNode _focusNode = FocusNode();
  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(_onFocusChange);
  }

  @override
  void dispose() {
    _focusNode.removeListener(_onFocusChange);
    _focusNode.dispose();
    _controller.dispose();
    super.dispose();
  }

  void _onFocusChange() {
    if (!_focusNode.hasFocus) {
      // フォーカスが失われた
      final text = _controller.text;
      print('入力内容: $text');
      _somethingProcess(text);
    }
  }

  void _somethingProcess(String text) {
    // 必要な処理
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Focus Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: _controller,
          focusNode: _focusNode,
          onSubmitted: (text) {
            _somethingProcess(text);
          },
          decoration: InputDecoration(
            labelText: 'Enter text',
          ),
        ),
      ),
    );
  }
}