Flutter で TextField にフォーカスまたはフォーカスを解除する方法

このチュートリアルでは、Flutter の TextField または TextFormField にプログラムでフォーカスまたはフォーカスを解除する方法を学びます。Flutter の TextField にフォーカスまたはフォーカス解除するコードを使用して、手動でフォーカスする必要がある場合があります。以下の例を参照して、その方法を学びましょう。

まず、フォーカス ノードを作成します。

FocusNode myfocus = FocusNode();

次に、この作成したフォーカス ノードを TextField または TextFormField に適用します。

TextField(
    focusNode: myfocus,
)

これで、このフォーカス ノードを使用して TextField からフォーカスまたはフォーカス解除できるようになります。

Flutter で TextField に焦点を当てるにはどうすればよいですか?

myfocus.requestFocus();

requestFocus()TextField にフォーカスするには、Focus Node のメソッドを使用します。

Flutter で TextField のフォーカスを外すにはどうすればよいですか?

myfocus.unfocus();

TextField のフォーカスを解除するには、Focus Node のメソッドを使用しますunfocus()。

完全なアプリの例:

import 'package:flutter/material.dart';

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

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

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  FocusNode myfocus = FocusNode(); //create focus node

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Focus/Unfocus on TextField"),
            backgroundColor: Colors.redAccent
          ),
          
          body: Container(
              child: Column(
                 children: [
                      TextField(
                          focusNode: myfocus, //apply focus node
                      ),

                     ElevatedButton(
                        onPressed: (){
                             myfocus.requestFocus(); //focus
                        }, 
                        child: Text("Focus on TextField")
                     ),

                     ElevatedButton(
                        onPressed: (){
                             myfocus.unfocus(); //unfocus
                        }, 
                        child: Text("Unfocus from TextField")
                     )
                 ],
              )
          )
       );
  }
}

このようにして、Flutter の TextField にフォーカスまたはフォーカスを解除できます。