どうも、ちょげ(@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でテキスト入力が出来るようになります。
コメント