In this article, we will be implementing a beautiful flutter login template design. We will be using gradients, flutter textfields, flutter container, flutter rows and columns widget, flutter text widgets and many more. At the end of this article, we will provide a complete source code for the mentioned flutter login template design. Click here for an other amazing gradient flutter form UI. But first, if you are new in flutter and want to setup flutter then click here. Let’s jump right into developing the mentioned beautiful Flutter login template.
Flutter Login Template Implementation
Let’s start step by step implementation of the mentioned beautiful flutter login template.
Gradient Background Color
Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900])),)
Title Text Decoration
Container( height: 150, width: 230, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Let\'s', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( ' Login', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blue.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ), ), ),

Email And Password Flutter Textfields
Padding( padding: EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10), child: TextField( style: TextStyle(color: Colors.white, fontSize: 14.5), decoration: InputDecoration( prefixIconConstraints: BoxConstraints(minWidth: 45), prefixIcon: Icon( Icons.email, color: Colors.white70, size: 22, ), border: InputBorder.none, hintText: 'Enter Email', hintStyle: TextStyle(color: Colors.white60, fontSize: 14.5), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white70))), ), ),

Forgot Password Clickable Text
Align( alignment: Alignment.centerRight, child: GestureDetector( onTap: () {}, child: Padding( padding: EdgeInsets.only(right: 30), child: Text('Forgot Password?', style: TextStyle(color: Colors.white70, fontSize: 13)), ), ), ),
Login Clickable Container Button
GestureDetector( onTap: () {}, child: Container( height: 53, width: double.infinity, margin: EdgeInsets.symmetric(horizontal: 30), alignment: Alignment.center, decoration: BoxDecoration( boxShadow: [ BoxShadow( blurRadius: 4, color: Colors.black12.withOpacity(.2), offset: Offset(2, 2)) ], borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ])), child: Text('Login', style: TextStyle( color: Colors.white.withOpacity(.8), fontSize: 15, fontWeight: FontWeight.bold)), ), ),

Signup Container Clickable Button
Text('Don\'t have an account?', style: TextStyle(color: Colors.white70, fontSize: 13)), SizedBox( height: 20, ), Container( height: 53, width: double.infinity, margin: EdgeInsets.symmetric(horizontal: 30), alignment: Alignment.center, decoration: BoxDecoration( border: Border.all(color: Colors.white60), borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), ), child: Text('Signup', style: TextStyle( color: Colors.white.withOpacity(.8), fontSize: 15, fontWeight: FontWeight.bold)), ),

Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Beautiful Login Template', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, accentColor: Colors.blue, primaryColor: Colors.blue, focusColor: Colors.blue, cursorColor: Colors.blue), home: Homepage(), ); } } class Homepage extends StatefulWidget { const Homepage({Key? key}) : super(key: key); @override State<Homepage> createState() => _HomepageState(); } class _HomepageState extends State<Homepage> { bool isPasswordVisible = false; @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Container( height: double.infinity, width: double.infinity, alignment: Alignment.center, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900])), child: SingleChildScrollView( child: Column( children: [ SizedBox( height: 50, ), Container( height: 150, width: 230, decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.blue.shade200, Colors.blue.shade900]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Container( margin: EdgeInsets.all(15), decoration: BoxDecoration( gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ]), boxShadow: [ BoxShadow( blurRadius: 4, spreadRadius: 3, color: Colors.black12) ], borderRadius: BorderRadius.circular(200) .copyWith(bottomRight: Radius.circular(0))), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Let\'s', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), Text( ' Login', style: TextStyle( fontSize: 22, fontWeight: FontWeight.bold, color: Colors.blue.shade600, shadows: [ Shadow( color: Colors.black45, offset: Offset(1, 1), blurRadius: 5) ]), ), ], ), ), ), ), ), SizedBox( height: 40, ), Padding( padding: EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10), child: TextField( style: TextStyle(color: Colors.white, fontSize: 14.5), decoration: InputDecoration( prefixIconConstraints: BoxConstraints(minWidth: 45), prefixIcon: Icon( Icons.email, color: Colors.white70, size: 22, ), border: InputBorder.none, hintText: 'Enter Email', hintStyle: TextStyle(color: Colors.white60, fontSize: 14.5), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white70))), ), ), Padding( padding: EdgeInsets.symmetric(horizontal: 30).copyWith(bottom: 10), child: TextField( style: TextStyle(color: Colors.white, fontSize: 14.5), obscureText: isPasswordVisible ? false : true, decoration: InputDecoration( prefixIconConstraints: BoxConstraints(minWidth: 45), prefixIcon: Icon( Icons.lock, color: Colors.white70, size: 22, ), suffixIconConstraints: BoxConstraints(minWidth: 45, maxWidth: 46), suffixIcon: GestureDetector( onTap: () { setState(() { isPasswordVisible = !isPasswordVisible; }); }, child: Icon( isPasswordVisible ? Icons.visibility : Icons.visibility_off, color: Colors.white70, size: 22, ), ), border: InputBorder.none, hintText: 'Enter Password', hintStyle: TextStyle(color: Colors.white60, fontSize: 14.5), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white38)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), borderSide: BorderSide(color: Colors.white70))), ), ), SizedBox( height: 10, ), Align( alignment: Alignment.centerRight, child: GestureDetector( onTap: () {}, child: Padding( padding: EdgeInsets.only(right: 30), child: Text('Forgot Password?', style: TextStyle(color: Colors.white70, fontSize: 13)), ), ), ), SizedBox( height: 40, ), GestureDetector( onTap: () {}, child: Container( height: 53, width: double.infinity, margin: EdgeInsets.symmetric(horizontal: 30), alignment: Alignment.center, decoration: BoxDecoration( boxShadow: [ BoxShadow( blurRadius: 4, color: Colors.black12.withOpacity(.2), offset: Offset(2, 2)) ], borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), gradient: LinearGradient(colors: [ Colors.blue.shade200, Colors.blue.shade900 ])), child: Text('Login', style: TextStyle( color: Colors.white.withOpacity(.8), fontSize: 15, fontWeight: FontWeight.bold)), ), ), SizedBox( height: 50, ), Text('Don\'t have an account?', style: TextStyle(color: Colors.white70, fontSize: 13)), SizedBox( height: 20, ), Container( height: 53, width: double.infinity, margin: EdgeInsets.symmetric(horizontal: 30), alignment: Alignment.center, decoration: BoxDecoration( border: Border.all(color: Colors.white60), borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0)), ), child: Text('Signup', style: TextStyle( color: Colors.white.withOpacity(.8), fontSize: 15, fontWeight: FontWeight.bold)), ), SizedBox( height: 20, ) ], ), ), ), ), ); } }
Note:
That’s all for this article, and I hope you learned a lot from it. Use this beautiful flutter login template in your project, and share your results with us. We would love to see how you’ve used this flutter login template in your Flutter app. We would be looking forward to your reply in our next article in which we explore other amazing flutter widgets and flutter templates. Thanks.