In this tutorial, we’ll learn how to create a beautiful Flutter animated login screen UI design. The complete source code of the mentioned animated Flutter login design will be provided in the end.
Outline
- Introduction: Flutter Animated Login Screen UI Design
- Flutter Animated Login Screen UI Template Design Source Code
- Conclusion
Introduction: Flutter Animated Login Screen UI Design
We’ve used a tween animation to animated the background of our login screen template. Widgets that are used in creating this beautiful Flutter animated login screen design are listed below:
- Flutter Column Widget
- Flutter Stack Widget
- Flutter Container Widget
- Flutter Textfield Widget
- Flutter Gesture Detector Widget
- Flutter Inkwell Widget
- Flutter Text Widget
- Flutter Positioned Widget
- Flutter Single Child Scroll View Widget
- Flutter Padding Widget
- Flutter Snackbar Widget
I’ve written detailed articles on these widgets, you can check them out as well.
The complete source code of this beautiful Flutter animated login screen design is available in the below section.
Try to understand how every Flutter widget is doing its role in this beautiful animated login design.
You can paste this code inside your main file. No additional packages required. Hope you’ll like it.
Flutter Animated Login Screen UI Template Design Source Code
import 'package:flutter/material.dart';
main() {
runApp(myApp());
}
class myApp extends StatelessWidget {
const myApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
// beautiful Flutter animated login screen UI
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen>
with TickerProviderStateMixin {
Animation? animation1;
AnimationController? controller1;
Animation? animation2;
AnimationController? controller2;
Animation? animation3;
AnimationController? controller3;
Animation? animation4;
AnimationController? controller4;
Animation? animation5;
AnimationController? controller5;
bool showPassword = false;
@override
void initState() {
super.initState();
controller1 = AnimationController(
vsync: this, duration: Duration(milliseconds: 6000));
animation1 = Tween<double>(begin: 20, end: 100).animate(controller1!)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller1!.reverse();
} else if (status == AnimationStatus.dismissed) {
controller1!.forward();
}
});
controller1!.forward();
controller2 = AnimationController(
vsync: this, duration: Duration(milliseconds: 6000));
animation2 = Tween<double>(begin: 20, end: 150).animate(controller2!)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller2!.reverse();
} else if (status == AnimationStatus.dismissed) {
controller2!.forward();
}
});
controller2!.forward();
controller3 = AnimationController(
vsync: this, duration: Duration(milliseconds: 6000));
animation3 = Tween<double>(begin: 20, end: 100).animate(controller3!)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller3!.reverse();
} else if (status == AnimationStatus.dismissed) {
controller3!.forward();
}
});
controller3!.forward();
controller4 = AnimationController(
vsync: this, duration: Duration(milliseconds: 9000));
animation4 = Tween<double>(begin: -100, end: 800).animate(controller4!)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller4!.reverse();
} else if (status == AnimationStatus.dismissed) {
controller4!.forward();
}
});
controller4!.forward();
controller5 = AnimationController(
vsync: this, duration: Duration(milliseconds: 9000));
animation5 = Tween<double>(begin: 0, end: 300).animate(controller5!)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller5!.reverse();
} else if (status == AnimationStatus.dismissed) {
controller5!.forward();
}
});
controller5!.forward();
}
@override
void dispose() {
controller1!.dispose();
controller2!.dispose();
controller3!.dispose();
controller4!.dispose();
controller5!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
child: Stack(
children: [
Positioned(
top: 50,
left: 100,
child: customContainer(animation1!.value, animation1!.value)),
Positioned(
top: 50,
right: 70,
child: customContainer(animation2!.value, animation2!.value)),
Positioned(
top: 100,
right: 150,
child: customContainer(animation3!.value, animation3!.value),
),
Positioned(
bottom: animation5!.value,
right: animation5!.value,
child: customContainer(50, 50),
),
Positioned(
bottom: animation4!.value,
left: animation4!.value,
child: customContainer(100, 100),
),
SingleChildScrollView(
padding: EdgeInsets.only(top: 250),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
emailField(),
passwordField(),
forgotPassword(),
loginButton(),
registerButton()
],
),
)
],
),
),
),
);
}
// Beautiful flutter gradient login screen ui template design
Widget customContainer(height, width) {
return Container(
height: double.parse(height.toString()),
width: double.parse(width.toString()),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
);
}
Widget emailField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 60),
child: TextField(
style: TextStyle(color: Colors.white70, fontSize: 14),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.email,
color: Colors.white70,
size: 20,
),
),
hintText: 'Enter email',
hintStyle: TextStyle(color: Colors.white60, fontSize: 14),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white60, width: .4)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white70, width: .4))),
));
}
Widget passwordField() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 60).copyWith(top: 12),
child: TextField(
obscureText: showPassword ? false : true,
style: TextStyle(color: Colors.white70, fontSize: 14),
decoration: InputDecoration(
prefixIconConstraints: BoxConstraints(minWidth: 24),
suffixIconConstraints: BoxConstraints(minWidth: 24),
prefixIcon: Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.lock,
color: Colors.white70,
size: 20,
),
),
suffixIcon: Padding(
padding: EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
showPassword = !showPassword;
});
},
child: Icon(
showPassword ? Icons.visibility : Icons.visibility_off,
color: Colors.white70,
size: 20,
),
),
),
hintText: 'Enter password',
hintStyle: TextStyle(color: Colors.white60, fontSize: 14),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white60, width: .4)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white70, width: .4))),
));
}
Widget forgotPassword() {
return Align(
alignment: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.only(top: 10, right: 58, bottom: 50),
child: InkWell(
onTap: () {
// navigate to other screen
},
child: Text(
'Forgot password?',
style: TextStyle(
color: Colors.white70,
fontSize: 12,
fontWeight: FontWeight.w700),
),
),
),
);
}
Widget loginButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Login clicked')));
},
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 60).copyWith(bottom: 15),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(3, 3),
blurRadius: 4,
spreadRadius: 1,
color: Colors.black12.withOpacity(.08))
],
borderRadius: BorderRadius.circular(50)
.copyWith(topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.blue,
Colors.red,
])),
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white70, fontSize: 14, fontWeight: FontWeight.w700),
),
),
);
}
// Beautiful flutter login screen ui design
Widget registerButton() {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Register clicked')));
},
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.symmetric(horizontal: 60).copyWith(bottom: 15),
height: 50,
width: double.infinity,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(3, 3),
blurRadius: 4,
spreadRadius: 1,
color: Colors.black12.withOpacity(.08))
],
borderRadius: BorderRadius.circular(50)
.copyWith(topRight: Radius.circular(0)),
gradient: LinearGradient(colors: [
Colors.red,
Colors.blue,
])),
child: Text(
'Register',
style: TextStyle(
color: Colors.white70, fontSize: 14, fontWeight: FontWeight.w700),
),
),
);
}
}Conclusion
To conclude this tutorial, hope you now have a complete and in-depth practical knowledge of how to create this animated Flutter login screen UI design. I’d be looking forward to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.
You might also like:
How To Use Flutter FloatingActionButton OnPressed [Flutter Easy Guide]
[Solved] Flutter Elevated Button Remove Padding Implementation
How To Use Flutter TextButton OnPressed [Flutter Easy Guide]
How To Easily Customize Flutter FloatingActionButton Widget
[Solved] How To Use Flutter OutlinedButton OnPressed
How To Use Animated Container In Flutter? Explained With Example
How To Set Flutter Raised Button Rounded Corners [Easy Flutter Guide]
