Flutter Simple Login Page

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.