How to create editable input fields within Flutter layout?

Question

I'm building a login screen in Flutter and want to replace the underscores ("___________") with fields where users can enter their email and password. Here's a visual representation:

Desired Outcome:

Current Code:

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

  @override
  State<LogInEnterEmailPassword> createState() => _LogInEnterEmailPasswordState();
}

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF6F6F6),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("Enter email",
            style: TextStyle(
              fontSize: 20,
              fontStyle: FontStyle.normal,
              fontWeight:  FontWeight.normal,
              color: Color(0xff3B3B3B),
            ),),
              SizedBox(height: 20,),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xffD7D7D7),
                  
                ),),

              SizedBox(height: 110,),
              Text("Enter password",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xff3B3B3B),

                ),),
              SizedBox(height: 25,),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xffD7D7D7),

                ),),
              SizedBox(height: 110,),
              Icon(Icons.arrow_forward,
              size: 40,
                color: Color(0xff7E7E7E),)
            ],

          ),

      )
    );
  }
}

Additional Notes:

• I'm currently focused on the frontend design.
• I'm considering Node.js for the backend later.

Answer 1

You are having large-sized of SizedBox(height:110) between widgets. that's why you are getting large spaces, you can reduce the height value, and play with the height:x value.

Also use crossAxisAlignment: CrossAxisAlignment.start, on the Column()

Update: to take user input, use TextField

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            TextField(
              decoration: InputDecoration(
                hintText: "email",
                border: OutlineInputBorder(),
              ),
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(
                hintText: "Enter password",
                border: OutlineInputBorder(),
              ),
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

There are others decoration can be used like OutlineInputBorder.

You can check more about

• InputDecoration
• TextField