7
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

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

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

例えばこんな感じ

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
     )
  }


以上です。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
7
Help us understand the problem. What are the problem?