Flutter TextField设计问题：实现带图标和圆角的登录页输入框

下面是匹配设计图的修正代码，主要调整了这些细节：

• 顶部绿色区域改用屏幕高度的1/3适配，替代固定300高度，适配不同设备
• 输入框区域添加左右20px内边距，避免贴边
• 修复输入框的contentPadding，让输入内容和图标之间有足够间距
• 密码框增加密码隐藏功能（obscureText: true）
• 调整"忘记密码"文本为右对齐，简化嵌套组件
• 优化副标题、底部文本的颜色和对齐，视觉更统一
• 精简多余的Column嵌套，代码更清晰

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Column(
        children: <Widget>[
          // 顶部绿色区域，适配屏幕高度1/3
          Container(
            color: Colors.green,
            height: screenHeight / 3,
            child: Center(
              child: Image.asset('assets/login_screen/clock.png'),
            ),
          ),
          const SizedBox(height: 50.0),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  // 标题区域
                  const Text(
                    "Log in",
                    style: TextStyle(
                      fontSize: 30.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8.0),
                  const Text(
                    "Lorem Ipsum is simply dummy text of the",
                    style: TextStyle(
                      fontSize: 15.0,
                      color: Colors.grey,
                    ),
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 30.0),
                  // 邮箱输入框
                  TextField(
                    style: const TextStyle(
                      fontSize: 18.0,
                      color: Colors.grey,
                    ),
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 20.0),
                      prefixIcon: const Icon(Icons.person_pin),
                      hintText: "Email",
                      hintStyle: const TextStyle(fontSize: 18.0),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                    ),
                  ),
                  const SizedBox(height: 20.0),
                  // 密码输入框，添加隐藏功能
                  TextField(
                    obscureText: true,
                    style: const TextStyle(
                      fontSize: 18.0,
                      color: Colors.grey,
                    ),
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 20.0),
                      prefixIcon: const Icon(Icons.lock),
                      hintText: "Password",
                      hintStyle: const TextStyle(fontSize: 18.0),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                    ),
                  ),
                  const SizedBox(height: 16.0),
                  // 忘记密码，右对齐
                  const Align(
                    alignment: Alignment.centerRight,
                    child: Text(
                      "Lupa Kata Sandi",
                      style: TextStyle(
                        fontSize: 15.0,
                        color: Colors.yellow,
                      ),
                    ),
                  ),
                  const SizedBox(height: 30.0),
                  // 登录按钮
                  SizedBox(
                    width: double.infinity,
                    height: 60.0,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.green,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50),
                        ),
                      ),
                      child: const Text(
                        "Log In",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      onPressed: () {
                        print("Login");
                      },
                    ),
                  ),
                  const SizedBox(height: 20.0),
                  // 底部说明文本
                  const Text(
                    "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
                    style: TextStyle(fontSize: 14.0, color: Colors.grey),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Ujang Aripin