Flutterでテキスト入力のWidgetのTextFieldにヒントやラベルを表示する方法を紹介します。
TextFieldのコンストラクタを覗いてみたところ以下のようにそれらしいパラメタが見つかりません。
const TextField({
Key key,
this.controller,
this.focusNode,
this.decoration: const InputDecoration(),
TextInputType keyboardType: TextInputType.text,
this.style,
this.textAlign: TextAlign.start,
this.autofocus: false,
this.obscureText: false,
this.autocorrect: true,
this.maxLines: 1,
this.maxLength,
this.maxLengthEnforced: true,
this.onChanged,
this.onSubmitted,
this.inputFormatters,
this.enabled,
})
公式サイトを調べたところdecorationを指定することで、ヒントやラベルの表示をするようです。
以下のようなコードにすることでマテリアルデザインのフォームらしい動きを実現することができます。
TextField(
decoration: InputDecoration(
labelText: "Category Name",
hintText: "Some Hint"),
);
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F18273%2F6640b483-3465-df69-a273-c465ee90e010.gif?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c0c0b9a5d2ea4b1a8508672f7a46fd15)