🐦

Flutter: TextFormFieldと入力値のpaddingを設定する

2022/01/16に公開

FlutterでTextFormFieldを作成する際、入力値のpaddingの調整に苦労したことがあるので、備忘録として残しておきます。

結論: InputDecorationのisDenseをtrueにして、contentPaddingを設定する

return Container(
  padding: const EdgeInsets.symmetric(
    vertical: 8.0,
    horizontal: 16.0,
  ),
  child: TextFormField(
    style: miniTextRegular,
    decoration: InputDecoration(
      border: const OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.black,
        ),
      ),
      hintText: hintText,
      contentPadding: const EdgeInsets.symmetric(
        vertical: 4,
        horizontal: 4,
      ),
      isDense: true,
    ),
  ),
);

実行結果

解説

isDenseをtrueにすることでcontentPaddingの値がそのままpaddingとして渡されるようになります。

GitHubで編集を提案

Discussion