
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:-
