Help us understand the problem. What is going on with this article?

FlutterでTextFieldにフォーカスが当たっているかどうか判定する

More than 1 year has passed since last update.

検索などを実装するときに、キーボードにフォーカスが当たった瞬間別の画面を出すみたいな実装をする場合はがあるかと思います。

例えばこんな感じ

mojikyo45_640-2.gif

このときの実装方法について説明します。

FocusNodeを使う

FucusNodeにリスナーをセットし、TextFieldに設定するだけです。

class Search extends StatefulWidget {
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  FocusNode _focus = new FocusNode();
  bool _isFocus = false;

  @override
  void initState() {
    _bloc = SearchBloc();
    super.initState();
    _focus.addListener(_onFocusChange);
  }

  void _onFocusChange() {
    debugPrint("Focus: " + _focus.hasFocus.toString());
    setState(() {
      _isFocus = _focus.hasFocus;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Search",
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    height: 40,
                    margin: const EdgeInsets.all(10),
                    child: TextField(
                      focusNode: _focus,  設定する
                      decoration: InputDecoration(
                        hintText: "User name",
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30),
                          borderSide: BorderSide(),
                        ),
                      ),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {},
                )
              ],
            ),
          ),
          _isFocus
              ? // フォーカスがあたってるときのWidget
              : // フォーカスがあたってないときのWidget,
        ],
      ),
    );
  }

  Widget _newUserList() {
     return Container(
        child: // フォーカスがあたってないときのWidget
     )
  }


以上です。

superman9387
I love Flutter 🔥❤️ 業務ではAndroidを書いていて、個人ではFlutterを書いています。 Flutterを愛しています。
https://note.mu/shogoyamada
zozotech
70億人のファッションを技術の力で変えていく
https://tech.zozo.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away