どうも、ちょげ(@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」を使います。
「title」は、「Widget?」型なので、テキストだけでなく、ウェジェットなら何でも使うことが出来ます。
なので、「title」に検索用のウェジェットを指定することで、検索欄を表示することが出来るようになります。
上記の例では、ContainerとTextFieldを使っています。
Container(
color: Colors.white,
child: TextField(
decoration: InputDecoration(
hintText: '検索',
),
),
コメント