Flutterのテキストフィールドでテキストを垂直中央に配置する 質問する

Flutterのテキストフィールドでテキストを垂直中央に配置する 質問する

ユーザー名とパスワードのフィールドがあるログイン画面を作成していますが、テキストが常に少し上にずれているように見えます (画像を参照)。

問題の画像

どのように見えるか(Photoshop で作成)

これをどうすれば修正できますか?

以下は TextFormField のコードです。

new Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: new TextFormField(
                      maxLines: 1,
                      controller: controller,
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter username.';
                        }
                      },
                      decoration: new InputDecoration(
                          labelText: 'Username',
                          suffixIcon: new IconButton(
                            highlightColor: Colors.transparent,
                            icon: new Container(
                                width: 36.0, child: new Icon(Icons.clear)),
                            onPressed: () {
                              controller.clear();
                            },
                            splashColor: Colors.transparent,
                          ),
                          prefixIcon: new Icon(Icons.account_circle)),
                    ),
                  ),

役に立つなら、これが私の一般的なテーマコードです^^

new ThemeData(
    fontFamily: 'Product Sans',
    brightness: Brightness.dark,
    buttonColor: Colors.green[300],
    accentColor: Colors.green[300],
    scaffoldBackgroundColor: Colors.blueGrey[900],
    canvasColor: Colors.blueGrey[900],
    textSelectionColor: new Color.fromRGBO(81, 107, 84, 0.8),
    bottomAppBarColor: Colors.blueGrey[800],
    primaryColor: Colors.blueGrey[900],
    indicatorColor: Colors.green[300],
    cardColor: Colors.white,
    highlightColor: Colors.green[300],
    errorColor: Colors.red[400],
    textSelectionHandleColor: Colors.green[300],
    splashColor: Colors.white10,
    buttonTheme: new ButtonThemeData(
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(22.0))),
    inputDecorationTheme: new InputDecorationTheme(
        contentPadding:
            new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        border: new OutlineInputBorder(
            gapPadding: 3.0,
            borderRadius: new BorderRadius.circular(22.0))),
  ),

ベストアンサー1

試してみてコンテンツパディング(.all または .only)

TextFormField(
...
decoration: InputDecoration(
    contentPadding: EdgeInsets.all(10.0),
...
)

前にここに画像の説明を入力してください

ここに画像の説明を入力してください

おすすめ記事