web-dev-qa-db-ja.com

TextFieldからコンテンツのパディングを削除するにはどうすればよいですか？

私はひらひらするのが初めてで、ログインフォームを作成しています。そのため、TextFieldを使用して接頭辞アイコンを追加しましたが、テキストフィールド（ユーザーIDとピン）の間と接頭辞アイコンの前に余分なスペースがあります。私もInputDecorationThemeを試しましたが、うまくいきませんでした。

スペースを削除または削減する方法を教えてください。

以下は私のコードです：

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

x

fluttertextfieldflutter-layout
14
Zubair Rehman

InputDecorationのcontentPaddingを使用できます。ここにサンプルコードがあります

TextField(
   maxLines: 8,
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 5),
      labelText: 'Description',
      labelStyle: txtHintStyle,
   )
 )
7
Ketan Ahir

私は少し遅れますが、あなたがしなければならない唯一のことは負のパディングを使うことです：

TextField(
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: -5),
      labelText: 'Description',
   )
 )
3
Skyost

を使用してマイナスのパディングを適用する

transform: Matrix4.translationValues(-10.0, 0.0, 0.0),

アイコンコンテナー内の行の上に置く

TextFormField(
          keyboardType: TextInputType.number,
          style: new TextStyle(color: Colors.white, fontSize: 17),
          decoration: new InputDecoration(
              prefixIcon: Container(
                transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
                child: Icon(
                  Icons.vpn_key,
                  color: Colors.white,
                ),
              ),
              labelText: "Enter Password",
              labelStyle: new TextStyle(color: Colors.white)),
        ),
2
Brinda Rathod

ドキュメントによると、そのprefixIconにはすでに12.0のパディングが含まれています。したがって、追加のパディングを提供する必要はありません。

Input_decorator.Dartにある以下の説明とコードを参照してください。

接頭辞アイコンは、最小サイズが48px x 48pxに制限されていますが、それを超えて拡張できます。 24pxより大きいものは、入力の左端と接頭辞アイコンのリーディングエッジの間の12pxパディングのマテリアル仕様に確実に一致するように、追加のパディングが必要になります。接頭辞アイコンのリーディングエッジにパディングするには：

prefixIcon: Padding(
     padding: const EdgeInsetsDirectional.only(start: 12.0),
     child: myIcon, // icon is 48px widget.
)

お役に立てば幸いです。

0
dhuma1981

これを簡単に実現するには、prefixIconにプレフィックス制約を追加し、このようなパディングでprefixIconをラップします。

      TextFormField(
         enabled: true,
         decoration: InputDecoration(
         prefixIconConstraints:BoxConstraints(minWidth: 23, maxHeight: 20),
         prefixIcon: Padding(
                       padding: const EdgeInsets.only(right: 20),
                       child: Icon(
                                Icons.email,
                                color: clockColor,
                               ),
                        ),
         hintText:"Email Address"
         hintStyle:TextStyle(color: hintColor, fontSize: 14),
       ),
    ),

これが出力です、これが役立つことを願っています

enter image description here

0
maheshmnj

私は同様のことを達成しなければなりませんでしたが、完璧な解決策を見つけることができませんでした。 Stackウィジェットを使い、回避します。

Widget _username(context){
  return SizedBox(
    height: 35,
    child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: Icon(
            Icons.mail,
            size: 20,
            color: Theme.of(context).accentColor,
          ),
        ),
        TextField(
          style: TextStyle(
              color: Colors.white
          ),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 11.0, horizontal: 33.0),
            hasFloatingPlaceholder: false,
            labelText: 'Username',
            labelStyle: TextStyle(
                color: Colors.white
            ),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).accentColor,
                )
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ]
    ),
  );
}

SizedBoxは、垂直方向のパディングを制御するために使用されます。水平パディングの場合、IconとTextFieldはスタックされます。この結果、TextFieldのラベルがアイコンの上に重なるため、contentPaddingプロパティを使用してラベルを右に移動します。これで次のような見た目になりました。

enter image description here

0
Lama Madan