FlutterでTextField、TextFormFieldの枠線を無くす方法

Flutterでフォームをデザインする際、デザインの一貫性を保つことは重要です。この記事では、FlutterでTextFieldまたはTextFormFieldウィジェットの枠線をどのようにして取り除くかを詳しく説明します。

TextField・TextFormFieldとは

「おいっ！そんな説明はいらねーよ」という人が大半でしょうが、TextFieldはFlutterで入力フォームを作成する際によく使用されるウィジェットです。そしてTextFormFieldは、入力値のバリデーションなどの機能をTextFieldから拡張したウィジェットです。

枠線を無くす設定

TextFieldまたはTextFormFieldの枠線を消すには、InputDecorationクラスのborderプロパティをInputBorder.noneに設定します。これにより、デフォルトで設定されている枠線が表示されなくなります。

実装例

以下のコードは、枠線がないTextFormFieldを作成する方法を示しています：

TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,  // 枠線を無くす
  ),
)

この設定を行うことで、TextFormFieldの外観がシンプルになり、UIのその他の要素とスムーズに統合することができます。

さらなるカスタマイズ

枠線を無くした後も、さらにカスタマイズすることが可能です。たとえば、背景色、ラベルテキスト、ヒントテキストなどを調整して、より魅力的なフォームフィールドを作成できます。以下のようにカスタマイズを加えることができます：

TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,
    labelText: 'ユーザー名',
    hintText: 'ユーザー名を入力してください',
    fillColor: Colors.grey[200],
    filled: true,
  ),
)

この例では、背景色を薄いグレーに設定し、ラベルとヒントテキストを追加しています。これにより、ユーザーにとって親しみやすく使いやすいフォームが完成します。

まとめ

TextFieldおよびTextFormFieldの枠線を無くす方法は非常にシンプルです。