[Flutter]TextFormFieldの左側にボタンを配置するには？

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

TextFormFieldの左側にボタンを配置する方法を紹介します。

方法

TextFormFieldの左側にボタンを配置するには、InputDecorationを使います。

まず、TextFormFieldの引数「decoration」にInputDecorationを指定します。

そして、InputDecorationの引数「prefixIcon」にボタンを指定します。

TextFormField(
  decoration: InputDecoration(
    prefixIcon: /*ボタン(ElevateButton, Textbutton, IconButton, ・・・)を指定*/,
  ),
),

InputDecorationを使えば、TextFormFieldの左側にボタンを配置することが出来ます。

使用例

以下は、使用例です。

 TextFormField(
  decoration: InputDecoration(
    prefixIcon: ElevatedButton(
      onPressed: () {},
      child: Text('Button'),
    ),
    border: OutlineInputBorder(),
  ),
),

[Flutter]TextFormFieldのカーソルの色を設定するには？

TextFormFieldのカーソルの色を設定する方法を紹介します。

www.choge-blog.com

2021.12.11

[Flutter]TextFormFieldのバリデーションエラーテキストのサイズを設定するには？

TextFormFieldがバリデーションエラーを起こした時に表示されるテキストのサイズを設定する方法を紹介します。

www.choge-blog.com

2021.12.10

[Flutter]TextFormFieldをRowウェジェットで使うには？

TextFormFieldをRowウェジェットで使う方法を紹介します。

www.choge-blog.com

2021.12.10

[Flutter]TextFormFieldのカーソルの高さを設定するには？

TextFormFieldのカーソルの高さを設定する方法を紹介します。

www.choge-blog.com

2021.12.10