Flutter TextFormField Hint Text is bugged on the screen

Question

I'm trying to make a TextFormField with a centered hint text with a specific theme.

Here's the result

I don't know why, but my hint text is totally bugged on the screen...

Here are my codes :

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",
      ),
    ),
  ),
};

I also want, when I write text in the field, it does start from the right and not from the center. I know it starts from the center because of the hint text, but is there another way to do it ? :)

Big Thanks !

Chris

Answer 1

The issue is coming from Container( height: 3.h because inner child is not having enough space, you need to have 48px for TextFiled height. Increase height of the container

Answer 2

Try below code hope its help to you. I tried it other way

Refer TextFormField here

Refer InputDecoration here

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

Your result screen->