pubspec.yaml
avatar_glow:
main.dart
import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:reflectly_flutter_loginpage/delayed_animation.dart';
void main() {
SystemChrome.setEnabledSystemUIOverlays([]);
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
final int delayedAmount = 500;
double _scale;
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: Duration(
milliseconds: 200,
),
lowerBound: 0.0,
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
@override
Widget build(BuildContext context) {
final color = Colors.white;
_scale = 1 - _controller.value;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color(0xFF8185E2),
body: Center(
child: Column(
children: <Widget>[
AvatarGlow(
endRadius: 90,
duration: Duration(seconds: 2),
glowColor: Colors.white24,
repeat: true,
repeatPauseDuration: Duration(seconds: 2),
startDelay: Duration(seconds: 1),
child: Material(
elevation: 8.0,
shape: CircleBorder(),
child: CircleAvatar(
backgroundColor: Colors.grey[100],
child: FlutterLogo(
size: 50.0,
),
radius: 50.0,
)),
),
DelayedAimation(
child: Text(
"Hi There",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: color),
),
delay: delayedAmount + 1000,
),
DelayedAimation(
child: Text(
"I'm Reflectly",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35.0,
color: color),
),
delay: delayedAmount + 2000,
),
SizedBox(
height: 30.0,
),
DelayedAimation(
child: Text(
"Your New Personal",
style: TextStyle(fontSize: 20.0, color: color),
),
delay: delayedAmount + 3000,
),
DelayedAimation(
child: Text(
"Journaling companion",
style: TextStyle(fontSize: 20.0, color: color),
),
delay: delayedAmount + 3000,
),
SizedBox(
height: 100.0,
),
DelayedAimation(
child: GestureDetector(
onTapDown: _onTapDown,
onTapUp: _onTapUp,
child: Transform.scale(
scale: _scale,
child: _animatedButtonUI,
),
),
delay: delayedAmount + 4000,
),
SizedBox(height: 50.0,),
DelayedAimation(
child: Text(
"I Already have An Account".toUpperCase(),
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: color),
),
delay: delayedAmount + 5000,
),
],
),
)
// Column(
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// Text('Tap on the Below Button',style: TextStyle(color: Colors.grey[400],fontSize: 20.0),),
// SizedBox(
// height: 20.0,
// ),
// Center(
// ),
// ],
// ),
),
);
}
Widget get _animatedButtonUI => Container(
height: 60,
width: 270,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
color: Colors.white,
),
child: Center(
child: Text(
'Hi Reflectly',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Color(0xFF8185E2),
),
),
),
);
void _onTapDown(TapDownDetails details) {
_controller.forward();
}
void _onTapUp(TapUpDetails details) {
_controller.reverse();
}
}
delayed_animation.dart
import 'dart:async';
import 'package:flutter/material.dart';
class DelayedAimation extends StatefulWidget {
final Widget child;
final int delay;
DelayedAimation({@required this.child, this.delay});
@override
_DelayedAimationState createState() => _DelayedAimationState();
}
class _DelayedAimationState extends State<DelayedAimation>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _animOffset;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 800));
final curve =
CurvedAnimation(curve: Curves.decelerate, parent: _controller);
_animOffset =
Tween<Offset>(begin: const Offset(0.0, 0.35), end: Offset.zero)
.animate(curve);
if (widget.delay == null) {
_controller.forward();
} else {
Timer(Duration(milliseconds: widget.delay), () {
_controller.forward();
});
}
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
child: SlideTransition(
position: _animOffset,
child: widget.child,
),
opacity: _controller,
);
}
}