Flutterで横長のTextFormFieldを作る

Tips💡

とある学習アプリのデザインを見ていて、端っこまでよっている入力フォームがあった😅
カッコよくないかもしれないが世の中に存在するデザインの一つだなと思った。コンポーネント化したパーツを作ってそれっぽいWidgetを作ってみた。

もし入力フォームの端っこに余白がほしければ、Paddingをつけると良さそう。

こちらがカスタマイズしたパーツです

メンバー変数を使って、スタイルを適用できるプロパティを引数必須のコンストラクタで渡せるようにしています。

import 'package:flutter/material.dart';

class CustomTextFormField extends StatelessWidget {
  const CustomTextFormField({
    super.key,
    required this.formWidth,
    required this.formHeight,
    required this.hintText,
    required this.controllerName,
  });

  final double formWidth;
  final double formHeight;
  final String hintText;
  final TextEditingController controllerName;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: formWidth,
      height: formHeight,
      child: TextFormField(
        decoration: InputDecoration(
          hintText: hintText,
          border: const OutlineInputBorder(),
        ),
        controller: controllerName,
      ),
    );
  }
}

こんな感じで書く

横幅は画面いっぱいまで広げ、高さは自由に調整。ヒントテキストを変更できるようにして、TextEditingController を渡して、入力した値を受け取れるようにしております。

CustomTextFormField(
  formWidth: double.infinity,
  formHeight: 50.0,
  hintText: 'email',
  controllerName: email),

まとめ

最近、いろんなアプリをインストールしてデザインを見るのですが、端っこまで部品が広がっているアプリがあるのを見て、こんなパターンもあるんだなっと興味を持ち、かっこいいとはいえないかもしれないですが、コンポーネントを作ってみました。