I want to achieve this in my app

For now, I have this:

and, I want this:

This is my code:

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

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),)
            ],

          ),

      )
    );
  }
}

What I want is to be able to write text inside the "________________________" field, which the user can log in into the app, for now I'm doing the front end, I'm thinking about using node.js to backend further

Thank you in advance

CodePudding user response：

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