[Flutter]AppBarでテキスト入力をするには?

Flutter

どうも、ちょげ(@chogetarou)です。

AppBarでテキスト入力するには、どうしたらいいのでしょうか?

スポンサーリンク

方法

  var typing = false; //検索中かを判断
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            leading: IconButton(
                onPressed: () {
                  setState(() {
                    typing = !typing;
                  });
                },
                icon: Icon(typing ? Icons.done : Icons.search)),
            title: typing
                ? Container(
                    color: Colors.white,
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: '検索',
                      ),
                    ),
                  )
                : Text('検索')),
        body: Center());
  }

AppBarでテキスト入力をするには、引数「title」にTextFieldを指定します。

title : TextField()

引数「title」は、「Widget?」型なので、ウェジェットであれば、何でも配置できます。

ただ、TextFieldをそのまま使うと、レイアウトが崩れます。

なので、Containerの子ウェジェットとして、TextFieldを指定します。

title : Container(
    color: Colors.white,
    child : TextField()
)

これでAppBarでテキスト入力が出来るようになります。

上記のコードでは、変数「typing」によって、TextFieldを表示するかどうかを三項演算子で分岐させています。

このように三項演算子を使えば、表示するウェジェットを切り替えることが出来ます。

コメント

タイトルとURLをコピーしました