May 23, 2020
How to create Login form in flutter – Mr.WhoTheEngineer

In this post, we will learn how to design Login Form in Flutter.This post show only UI.
1)main.dart
It is our main.dart file.This file is root of our application.
import 'package:blogpractice/loginForm.dart'; 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: 'Login Form', theme: ThemeData( primarySwatch: Colors.blue, ), home: Login(), ); } }
2)loginForm.dart
It is our loginForm.dart file.This file contains all our login form implementation.
import 'package:flutter/material.dart'; class Login extends StatefulWidget { @override _LoginState createState() => _LoginState(); } class _LoginState extends State<Login> { TextEditingController _passwordController = new TextEditingController(); TextEditingController _emailController = new TextEditingController(); TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0,); @override Widget build(BuildContext context) { final emailField = TextFormField( //emailField keyboardType: TextInputType.emailAddress, autofocus: false, controller: _emailController, style: style, decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), hintText: "Email", border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0))), ); final passwordField = TextFormField( //passwordField autofocus: false, controller: _passwordController, style: style, decoration: InputDecoration( contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), hintText: "Password", border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0))), ); final loginButton = Material( // loginButton elevation: 5.0, borderRadius: BorderRadius.circular(20.0), color: Colors.teal, child: MaterialButton( minWidth: double.infinity, padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0), onPressed: null, child: Text("Login", textAlign: TextAlign.center, style: style.copyWith( color: Colors.white, fontWeight: FontWeight.bold)), ), ); return Scaffold( backgroundColor: Colors.teal, body: Center( child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(10.0), child: Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15), ), color: Color(0xffF3F3F3), elevation: 5, child: Padding( padding: const EdgeInsets.all(20.0), child: Form( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center( child: Text( "Your Logo Here", style: TextStyle( color: Colors.black, fontSize: 25, ), )), SizedBox(height: 25.0), emailField, SizedBox(height: 25.0), passwordField, SizedBox( height: 20.0, ), Divider(color: Colors.black), SizedBox( height: 20.0, ), loginButton, ], ), ), ), ), ), ), ), ); } }
Output:-
