☰

TextField からコンテンツの余白を削除するにはどうすればよいですか? 質問する

tag-icon • tag-icon flutter textfield flutter-layout
TextField からコンテンツの余白を削除するにはどうすればよいですか? 質問する

私は Flutter 初心者で、ログイン フォームを作成しています。そのために TextField を使用してプレフィックス アイコンを追加しましたが、テキスト フィールド (ユーザー ID と PIN) の間とプレフィックス アイコンの前に余分なスペースが入っています。InputDecorationTheme も試しましたが、うまくいきませんでした。

スペースを削除または縮小するにはどうすればよいか教えてください。

以下が私のコードです:

TextField(
  maxLength: 8,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    hintText: hint,
    hintStyle: TextStyle(fontSize: 12.0),
    prefixIcon: Icon(icon),
    counterText: '',
  ),
)

バツ

ベストアンサー1

更新 (2022 年 8 月): Flutter 3.0.5 と同じです
更新 (2021 年 4 月): Flutter 2.0.4 でも動作します

Flutter 1.17.5 以降 (2.X でも同じ)、パディングを完全に削除または手動で操作するには、最初に設定しisDense: true、その後必要に応じて調整するcontentPaddingか、代わりに親ウィジェットにパディングを適用する必要があります。

// using theme
ThemeData(
  inputDecorationTheme: InputDecorationTheme(
     isDense: true,// this will remove the default content padding
     // now you can customize it here or add padding widget
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
  ),
)

// per widget
TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
   ),
)

コメントで述べたようにアタベルクあなたも使うことができますcontentPadding: EdgeInsets.zero

TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.zero,
     ...
   ),
)

おすすめ記事