How to be able to write using the login page's app? - flutter

Question

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

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