Flutter Simple Login Page - flutter

Question

I am a flutter beginner. How to make a simple login page in flutter like this. I tried, but I get a lot of errors. Can anyone help to resolve this?
Please see here to find what I want
Thanks in advance!...............
My code:
Container(
width: 350,
child: TextField(
decoration: InputDecoration(
label Text: 'Email',
),
),
),
Container(
width: 350,
child: TextField(
obscureText: true,
decoration: InputDecoration(
label Text: 'Password',
suffixIcon: Icon(CupertinoIcons.eye_slash_fill,
size: 17),
),
),
),
Padding(
padding: EdgeInserts.fromLTRB(20,20,40,40),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Forget Password')
],
),
),
GestureDetector(
child: Container(
alignment: Alignment.center,
width: 250,
child: TextField(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
),
child: Padding(
padding: EdgeInsets.all(top: 12),
child: Text('LOGIN')
),
),
),
),
],
),
),
),
);
}
}

Answer 1

import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
#override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final _formKey = GlobalKey<FormState>();
String _email, _password;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login Screen'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
validator: (input) {
if (input.isEmpty) {
return 'Please enter an email';
}
return null;
},
onSaved: (input) => _email = input,
decoration: InputDecoration(
labelText: 'Email',
),
),
TextFormField(
validator: (input) {
if (input.length < 6) {
return 'Your password needs to be at least 6 characters';
}
return null;
},
onSaved: (input) => _password = input,
decoration: InputDecoration(
labelText: 'Password',
),
obscureText: true,
),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// This is where you can handle the login logic
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
This is sample code of Login screen.
For get more design and code head to https://flutterawesome.com/tag/login-screen
there is lot of sample code available. And I think you can get better idea from it.