Flutter Textfield 设计：如何制作带有图标和边框半径的 Textfield

Question

我想使用 Flutter(Dart) 创建一个登录屏幕，如下图所示

但是这是我实现后的结果

这是我的代码

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.green,
            height: 300,
            child: Center(
              child: Image.asset('assets/login_screen/clock.png'),
            ),
          ),
          SizedBox(
            height: 50.0,
          ),
          Column(
            children: <Widget>[
              Center(
                child: Column(
                  children: [
                    Text(
                      "Log in",
                      style: TextStyle(
                        fontSize: 30.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      "Lorem Ipsum is simply dummy text of the",
                      style: TextStyle(
                        fontSize: 15.0,
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 20.0,
              ),
              Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.symmetric(),
                    child: Column(
                      children: [
                        TextField(
                          style: TextStyle(
                            fontSize: 25.0,
                            color: Colors.grey,
                          ),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(),
                            prefixIcon: Icon(Icons.person_pin),
                            hintText: "Email",
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(25.0),
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 20.0,
                        ),
                        TextField(
                          style: TextStyle(
                            fontSize: 25.0,
                            color: Colors.grey,
                          ),
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(),
                            prefixIcon: Icon(Icons.lock),
                            hintText: "Password",
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(25.0),
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 20.0,
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Text(
                              "Lupa Kata Sandi",
                              style: TextStyle(
                                  fontSize: 15.0, color: Colors.yellow),
                            ),
                          ],
                        ),
                        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: Text(
                              "Log In",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            onPressed: () {
                              print("Login");
                            },
                          ),
                        ),
                        SizedBox(
                          height: 20.0,
                        ),
                        Column(
                          children: [
                            Center(
                              child: Text(
                                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry."),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

谁能帮我解决这个问题吗？我希望设计中的设计与我在代码中实现的设计相同，我是使用 Flutter 代码实现的新手，在那部分我被要求将Figma 中的设计实现为使用 Flutter 的代码

Answer 1

你只需要给它填充：

Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25),
            child: Column(
              children: [
                TextField(
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.grey,
                  ),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(),
                    prefixIcon: Icon(Icons.person_pin),
                    hintText: "Email",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                TextField(
                  style: TextStyle(
                    fontSize: 25.0,
                    color: Colors.grey,
                  ),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(),
                    prefixIcon: Icon(Icons.lock),
                    hintText: "Password",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      "Lupa Kata Sandi",
                      style:
                          TextStyle(fontSize: 15.0, color: Colors.yellow),
                    ),
                  ],
                ),
                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: Text(
                      "Log In",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    onPressed: () {
                      print("Login");
                    },
                  ),
                ),
                SizedBox(
                  height: 20.0,
                ),
                Column(
                  children: [
                    Center(
                      child: Text(
                          "Lorem Ipsum is simply dummy text of the printing and typesetting industry."),
                    ),
                  ],
                )
              ],
            ),
          ),

上面不要放置不必要的容器或柱子。并根据您的设计调整 TextField 的 BorderRadius。

一切就绪；快乐编码...