Flutter Login Page Example Snippet
Login Screen in Flutter
Flutter provides a variety of widgets and classes for creating responsive layouts in applications. In this article, we’ll be looking at how we can build a responsive login page using the two main approaches recommended by the Flutter team, which are the Textformfield and Buttons with obscured password form. Using login screen snippet code you can build any login page in seconds.Login Page Snippet
In this snippet you will get flutter code snippet for any type of login screen. You don't have start anything from scratch. Simply copy our Login page snippet and use it on Your own project. It's useful and easy to customization.
Flutter Login Screen UI
Flutter is used to create any kind of design you need. It's flexible than any other framework. Here is the preview of our login screen page snippet.
Code Snippet:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
class loginuidesign extends StatefulWidget {
@override
_loginuidesignState createState() => _loginuidesignState();
}
class _loginuidesignState extends State<loginuidesign>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
_animation = Tween<double>(begin: .7, end: 1).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.ease,
),
)..addListener(
() {
setState(() {});
},
)..addStatusListener(
(status) {
if (status == AnimationStatus.completed) {
_controller.reverse();
} else if (status == AnimationStatus.dismissed) {
_controller.forward();
}
},
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
double _height = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Color(0xff292C31),
body: ScrollConfiguration(
behavior: MyBehavior(),
child: SingleChildScrollView(
child: SizedBox(
height: _height,
child: Column(
children: [
Expanded(child: SizedBox()),
Expanded(
flex: 4,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(),
Text(
'SIGN IN',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
color: Color(0xffA9DED8),
),
),
SizedBox(),
component1(Icons.account_circle_outlined, 'User name...',
false, false),
component1(Icons.email_outlined, 'Email...', false, true),
component1(
Icons.lock_outline, 'Password...', true, false),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
text: TextSpan(
text: 'Forgotten password!',
style: TextStyle(
color: Color(0xffA9DED8),
),
recognizer: TapGestureRecognizer()
..onTap = () {
HapticFeedback.lightImpact();
Fluttertoast.showToast(
msg:
'Forgotten password! button pressed');
},
),
),
SizedBox(width: _width / 10),
RichText(
text: TextSpan(
text: 'Create a new Account',
style: TextStyle(color: Color(0xffA9DED8)),
recognizer: TapGestureRecognizer()
..onTap = () {
HapticFeedback.lightImpact();
Fluttertoast.showToast(
msg: 'Create a new Account button pressed',
);
},
),
),
],
),
],
),
),
Expanded(
flex: 3,
child: Stack(
children: [
Center(
child: Container(
margin: EdgeInsets.only(bottom: _width * .07),
height: _width * .7,
width: _width * .7,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Colors.transparent,
Colors.transparent,
Color(0xff09090A),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
),
Center(
child: Transform.scale(
scale: _animation.value,
child: InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
HapticFeedback.lightImpact();
Fluttertoast.showToast(
msg: 'SIGN-IN button pressed',
);
},
child: Container(
height: _width * .2,
width: _width * .2,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xffA9DED8),
shape: BoxShape.circle,
),
child: Text(
'SIGN-IN',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
),
),
),
),
),
),
],
),
),
],
),
),
),
),
);
}
Widget component1(
IconData icon, String hintText, bool isPassword, bool isEmail) {
double _width = MediaQuery.of(context).size.width;
return Container(
height: _width / 8,
width: _width / 1.22,
alignment: Alignment.center,
padding: EdgeInsets.only(right: _width / 30),
decoration: BoxDecoration(
color: Color(0xff212428),
borderRadius: BorderRadius.circular(15),
),
child: TextField(
style: TextStyle(color: Colors.white.withOpacity(.9)),
obscureText: isPassword,
keyboardType: isEmail ? TextInputType.emailAddress : TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(
icon,
color: Colors.white.withOpacity(.7),
),
border: InputBorder.none,
hintMaxLines: 1,
hintText: hintText,
hintStyle: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(.5),
),
),
),
);
}
}
class MyBehavior extends ScrollBehavior {
@override
Widget buildViewportChrome(
BuildContext context, Widget child, AxisDirection axisDirection) {
return child;
}
}Conclusion
In this article we share login page UI code with you. It's free for any project. If you think it's use full than please leave a comment . It will give us inspiration. In the next article we will share Signup page code. Thank You.