[Flutter]TextFormField(テキストフォームフィールド)の高さ(height)を変えるには？

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

TextFormFieldの高さを変える方法を紹介します。

方法
使用例

方法

TextFormFieldの高さを変えるには、引数「decoration」を使います。

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

そして、InputDecorationの引数「contentPadding」に「EdgeInsets.symmetric(vertical : 数値)」を指定します。

TextFormField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.symmetric(
      vertical: /*数値*/,
    ),
  ),
),

verticalに指定した値はTextFormFieldの上と下のパディングとして設定されます。

上下のパディングを変えることで、TextFoemFieldの高さを間接的に変えることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                contentPadding: EdgeInsets.symmetric(
                  vertical: 40,
                  horizontal: 10,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }