How to create a awesome Flutter material login screen

Awesome Flutter material login screen sample code:

	import 'package:flutter/material.dart';
	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	// This widget is the root of your application.
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Flutter Demo',
	theme: ThemeData(
	primarySwatch: Colors.blue,
	),
	home: MyHomePage(title: 'Flutter Demo Home Page'),
	);
	}
	}
	class MyHomePage extends StatefulWidget {
	MyHomePage({Key key, this.title}) : super(key: key);
	final String title;
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
	final emailField = Card(
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(50.0),
	),
	elevation: 10.0,
	child: Padding(
	padding: EdgeInsets.fromLTRB(20, 3, 0, 3),
	child: TextField(
	obscureText: false,
	decoration: InputDecoration(
	contentPadding: EdgeInsets.fromLTRB(-5.0, 15.0, 10.0, 15.0),
	hintText: "Email",
	border: InputBorder.none,
	icon: Icon(Icons.mail_outline),
	),
	),
	)
	);
	final passwordField = Card(
	shape: RoundedRectangleBorder(
	borderRadius: BorderRadius.circular(50.0),
	),
	elevation: 10.0,
	child: Padding(
	padding: EdgeInsets.fromLTRB(20, 3, 0, 3),
	child: TextField(
	obscureText: true,
	decoration: InputDecoration(
	contentPadding: EdgeInsets.fromLTRB(-5.0, 15.0, 10.0, 15.0),
	hintText: "Password",
	border: InputBorder.none,
	icon: Icon(Icons.lock_outline)
	),
	),
	));
	final loginButon = Material(
	elevation: 9.0,
	borderRadius: BorderRadius.circular(30.0),
	color: Color(0xffD5426c),
	child: MaterialButton(
	minWidth: MediaQuery.of(context).size.width,
	padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
	child: Text("Login", textAlign: TextAlign.center,
	style: TextStyle(color: Color(0xffFFFFFF),fontSize: 16.00),),
	),
	);
	return Scaffold(
	body: Center(
	child: Container(
	color: Colors.deepPurpleAccent,
	child: Padding(
	padding: const EdgeInsets.all(36.0),
	child: Column(
	crossAxisAlignment: CrossAxisAlignment.center,
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	SizedBox(
	height: 150.0,
	child: Text("LOGO",style: TextStyle(color: Colors.white,fontSize: 30,fontWeight: FontWeight.bold),),
	),
	SizedBox(height: 45.0),
	emailField,
	SizedBox(height: 25.0),
	passwordField,
	SizedBox(
	height: 75.0,
	),
	loginButon,
	SizedBox(
	height: 15.0,
	),
	],
	),
	),
	),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub

Posted in: dart,flutter,fluttter login screen