Flutter TextFormField 提示文本在屏幕上出现错误

Question

我正在尝试制作一个带有特定主题的居中提示文本的 TextFormField。

这是结果

我不知道为什么，但我的提示文本在屏幕上完全被窃听了...

这是我的代码：

login_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key}) : super(key: key);

  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 12.h,
        ),
        Text(
          "Flexmes",
          style: Theme.of(context).textTheme.bodyText2,
        ),
        SizedBox(
          height: 9.5.h,
        ),
        Container(
          width: 70.w,
          height: 3.h,
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                width: 0.13.w,
                color: Theme.of(context).splashColor,
              ),
            ),
          ),
          child: Padding(
            padding: EdgeInsets.fromLTRB(0.w, 0.h, 0.w, 0.6.h),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  Icons.email_outlined,
                  color: Theme.of(context).primaryColor,
                ),
                SizedBox(
                  width: 1.w,
                ),
                Expanded(
                  child: Material(
                    color: Colors.transparent,
                    child: TextFormField(
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                        hintText :"Email",
                        hintStyle: Theme.of(context).textTheme.bodyText1,
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 1.w,
                ),
                Icon(
                  Icons.visibility,
                  color: Theme.of(context).primaryColor,
                ),
              ],
            ),
          ),
        )
      ],
    );
  }
}

theme.dart

import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';

enum AppTheme {
  authTheme,
}

final appThemeData = {
  AppTheme.authTheme: ThemeData(
    primaryColor: const Color.fromARGB(255, 219, 219, 219),
    splashColor: const Color.fromARGB(255, 164, 164, 164),
    textTheme: TextTheme(
      bodyText2: TextStyle(
        color: const Color.fromARGB(255, 164, 164, 164),
        fontSize: 40.sp,
        fontFamily: "Segoe-UI",
      ),
      bodyText1: TextStyle(
        color: const Color.fromARGB(255, 164, 164, 164),
        fontSize: 14.sp,
        fontFamily: "Segoe-UI",
      ),
    ),
  ),
};

我也想，当我在字段中写文字时，它确实是从右边开始的，而不是从中间开始的。由于提示文本，我知道它是从中心开始的，但是还有另一种方法吗？ :)

非常感谢！

克里斯

Answer 1

试试下面的代码希望对你有帮助。我试过其他方法

参考TextFormFieldhere

参考InputDecorationhere

  TextFormField(
          textAlign: TextAlign.center,
          decoration: InputDecoration(
            hintText: 'Email',
            prefixIcon: Icon(
              Icons.email,
            ),
            suffixIcon: Icon(
              Icons.visibility,
            ),
          ),
        ),

您的结果屏幕->

Answer 2

问题来自 Container( height: 3.h，因为 inner child 没有足够的 space，TextFiled 高度需要 48px。增加容器的高度

Flutter TextFormField 提示文本在屏幕上出现错误

Flutter TextFormField Hint Text is bugged on the screen

text

themes

hint

flutter

textformfield