Posted By
Bajarangi soft ,
Posted On 23-09-2020
Lets start with creating a new flutter project in Android Studio by going to File => New => New Flutter Project+>Lib=>Animation Folder Create=>FadeAnimation.Dart File.In order to download any custom package in our flutter project, all we need to do is to specify the package name into pubspec.yaml file.
Step 1
we will add simple_animations: ^2.2.1 dependency name to
our pubspec.yaml file as shown below:
dependencies:
flutter:
sdk: flutter
simple_animations: ^2.2.1
flutter pub get
import 'package:simple_animations/simple_animations.dart';
import 'package:flutter_login_page/Animation/FadeAnimation.dart';
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
class FadeAnimation extends StatelessWidget {
final double delay;
final Widget child;
FadeAnimation(this.delay, this.child);
@override
Widget build(BuildContext context) {
final tween = MultiTrackTween([
Track("opacity").add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)),
Track("translateY").add(
Duration(milliseconds: 500), Tween(begin: -30.0, end: 0.0),
curve: Curves.easeOut)
]);
return ControlledAnimation(
delay: Duration(milliseconds: (500 * delay).round()),
duration: tween.duration,
tween: tween,
child: child,
builderWithChild: (context, child, animation) => Opacity(
opacity: animation["opacity"],
child: Transform.translate(
offset: Offset(0, animation["translateY"]),
child: child
),
),
);
}
}
Column(
children: <Widget>[
ClipPath(
clipper: DiagonalPathClipperOne(),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.red[500], Colors.red[200]]
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: FadeAnimation(1.8, Text("Login Screen", style: TextStyle(
color: Colors.white,
fontSize: 30
),)),
)
],
),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
child: FadeAnimation(1.8, TextField(
decoration: InputDecoration(
hintText: "Email or Phone number",
hintStyle: TextStyle(
color: Colors.grey[500])),
)),
),
Container(
padding: EdgeInsets.all(8.0),
child: FadeAnimation(1.8, TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(
color: Colors.grey[500])
),
)),
)
],
),
),
SizedBox(height: 30,),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.red[500], Colors.red[200]]
)
),
child: Center(
child: FadeAnimation(1.8,Text("Sign Up", style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),)),
),
),
SizedBox(height: 20,),
FadeAnimation(1.8,Text("Forgot Password?", style: TextStyle(color: Colors.grey[500]),)),
Container(
child: Row(
children: <Widget>[
FadeAnimation(1.8,Text('Does not have account?',style: TextStyle(color: Colors.grey[500]),)),
FlatButton(
textColor: Colors.red[300],
child:FadeAnimation(1.8, Text(
'Sign in',
style: TextStyle(fontSize: 20),
)),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)
)
]
)
import 'package:simple_animations/simple_animations.dart';
import 'package:flutter_login_page/Animation/FadeAnimation.dart';
import 'package:flutter_custom_clippers/flutter_custom_clippers.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
ClipPath(
clipper: DiagonalPathClipperOne(),
child: Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.red[500], Colors.red[200]]
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: FadeAnimation(1.8, Text("Login Screen", style: TextStyle(
color: Colors.white,
fontSize: 30
),)),
)
],
),
),
),
Padding(
padding: EdgeInsets.all(30.0),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(8.0),
child: FadeAnimation(1.8, TextField(
decoration: InputDecoration(
hintText: "Email or Phone number",
hintStyle: TextStyle(
color: Colors.grey[500])),
)),
),
Container(
padding: EdgeInsets.all(8.0),
child: FadeAnimation(1.8, TextField(
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(
color: Colors.grey[500])
),
)),
)
],
),
),
SizedBox(height: 30,),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [Colors.red[500], Colors.red[200]]
)
),
child: Center(
child: FadeAnimation(1.8,Text("Sign Up", style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),)),
),
),
SizedBox(height: 20,),
FadeAnimation(1.8,Text("Forgot Password?", style: TextStyle(color: Colors.grey[500]),)),
Container(
child: Row(
children: <Widget>[
FadeAnimation(1.8,Text('Does not have account?',style: TextStyle(color: Colors.grey[500]),)),
FlatButton(
textColor: Colors.red[300],
child:FadeAnimation(1.8, Text(
'Sign in',
style: TextStyle(fontSize: 20),
)),
onPressed: () {
//signup screen
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
))
],
)
)
]
)
),
)
);
}
}