Flutter

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

概要

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(),
      ],
    );
  }
}

 


フォーカスが外れたことを検知する方法

TextFieldのfocusNodeプロパティにセットするために_focusNodeを生成し、その_focusNodeにaddListenerすることで、フォーカスが外れたときの処理をセットすることができます。

Flutterを学ぶなら世界最大級のオンライン学習サイトUdemyがおすすめ

Flutterを学ぶなら、世界最大級のオンライン学習サイトUdemy
がおすすめです。


通常ですと、各コース2万円程度するのですが、年がら年中割引セールスを行なっており、割引後価格はなんとおおむね1500円程度で受講することができます。
今すぐ受講しなくても、安い時に大量に買っておいて、あとでじっくり勉強するのがかしこいやり方だと思います。

-Flutter

© 2022 かずのアプリときどきキャンプ飯 Powered by AFFINGER5