[Flutter]TextFieldにフォーカスを当てる方法/外れたことを検知する方法

2021年12月22日

概要

Flutterで、

TextFieldに自動的にフォーカスを当てる方法
TextFieldからフォーカスが外れことを検知する方法

を調べました。

自動的にフォーカスを当てる方法

これは簡単でTextFieldのkautofocusプロパティにtrueをセットすればよいだけです。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Focus';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: FocusWidget(),
      ),
    );
  }
}

class FocusWidget extends StatefulWidget {
  @override
  _FocusWidgetState createState() => _FocusWidgetState();
}

class _FocusWidgetState extends State<FocusWidget> {
  final _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      if (_focusNode.hasFocus) {
        print('フォーカスした');
      } else {
        print('フォーカスが外れた');
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(autofocus: true, focusNode: _focusNode),
        TextField(),
      ],
    );
  }
}