Amazing animation effects in flutter and dart.
1. Water Drops Animations 💦💦💦 ( water_drop )
A simple package for adding water drops to your Widgets!
Why?
Why?
Why not?!
How?
Just wrap your widget in WaterDrop and provide params:
Widget build(BuildContext context) {
return WaterDrop(
child: _StaticCard(color: Colors.green),
params: [
WaterDropParam(top: 50, height: 70, left: 100, width: 50),
WaterDropParam(top: 10, height: 100, left: 280, width: 100),
WaterDropParam(top: 155, height: 35, left: 135, width: 35),
WaterDropParam(top: 135, height: 40, left: 250, width: 30),
WaterDropParam(top: 20, height: 40, left: 20, width: 40),
WaterDropParam(top: 140, height: 50, left: 15, width: 40),
WaterDropParam(top: 20, height: 30, left: 200, width: 30),
WaterDropParam(top: 120, height: 20, left: 360, width: 20),
],
);
}
Or if you want a single drop, use WaterDrop.single:
@override
Widget build(BuildContext context) {
return WaterDrop.single(
top: 50,
height: 70,
left: 100,
width: 50,
child: _StaticCard(color: Colors.green),
);
}2. Creating Instagram Story Designer with flutter
Designed & Developed By Hamed Hamedi
If You Want to Know and Learn more about this App UI/UX, Then Click on the link below to watch the tutorial video.
3. Flutter Fractal Tree
Following is the Source Code For This Project.
import 'dart:html' as html; import 'dart:math' as math; import 'dart:ui'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Fractal Tree', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { double _progress = 0.01; Animation<double> animation; AnimationController controller; @override void initState() { super.initState(); final curve = Cubic(.49, 0, .04, 1); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); final Animation curveAnimation = CurvedAnimation(parent: controller, curve: curve); animation = Tween<double>(begin: 0.01, end: 0.26).animate(curveAnimation) ..addListener(() => _onSliderChanged(animation.value)) ..addStatusListener((status) async { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } }); controller.forward(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Flexible( flex: 1, child: AspectRatio( aspectRatio: 1, child: CustomPaint( painter: TreePainter(_progress), ), ), ), FlatButton.icon( textColor: Colors.white, icon: Icon(Icons.favorite_border), label: Text('Follow me on Twitter'), onPressed: () { html.window.open('https://twitter.com/a_tarek360', ''); }, ), SizedBox( height: 24, ) ], ), ), ); } void _onSliderChanged(double progress) { setState(() { _progress = progress; }); } } class TreePainter extends CustomPainter { final double progress; static const int _depth = 12; TreePainter(this.progress); static const degToRed = math.pi / 180.0; Paint _paint = Paint(); @override void paint(Canvas canvas, Size size) { final lineLength = math.min(size.width, size.height) * 0.008; final x = size.width / 2; final y = size.height * 0.8; _drawTree(canvas, x, y, -90, 90 * progress, _depth, lineLength); } void _drawTree(Canvas canvas, double x1, double y1, double angle, double offset, int depth, double lineLength) { if (depth != 0) { _paint ..strokeWidth = depth * 0.2 ..color = _colors[(depth % _colors.length)]; final x2 = x1 + (math.cos(angle * degToRed) * depth * lineLength); final y2 = y1 + (math.sin(angle * degToRed) * depth * lineLength); canvas.drawLine(Offset(x1, y1), Offset(x2, y2), _paint); _drawTree(canvas, x2, y2, angle - offset, offset, depth - 1, lineLength); _drawTree(canvas, x2, y2, angle + offset, offset, depth - 1, lineLength); } } final _colors = [ Color(0xFF70d6ff), Color(0xFFff70a6), Color(0xffff006e), Color(0xff3a86ff), Color(0xffffbe0b), Color(0xff39ff14), ]; @override bool shouldRepaint(TreePainter oldDelegate) { return progress != oldDelegate.progress; } }
4. Flutter Loading/Progress Indicator
import 'dart:ui'; import 'package:flutter/material.dart'; import 'dart:html' as html; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.black, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ SizedBox( width: 200, height: 200, child: Spinner(), ), FlatButton.icon( textColor: Colors.white, icon: Icon(Icons.favorite_border), label: Text('Follow me on Twitter'), onPressed: () { html.window.open( 'https://twitter.com/a_tarek360', ''); }, ) ], ), ), ), ); } } class Spinner extends StatefulWidget { @override _SpinnerState createState() => _SpinnerState(); } class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin { AnimationController _controller; Offset _c1 = Offset(1.0, 0.5); Offset _c2 = Offset(0.75, 0.5); Offset _c3 = Offset(0.5, 0.5); Offset _c4 = Offset(0.25, 0.5); Offset _c5 = Offset(0.0, 0.5); @override void initState() { super.initState(); _controller = AnimationController( duration: Duration(milliseconds: 3000), vsync: this); AnimationSet _animationSet = AnimationSet(_controller); _controller.addListener(() { if (_controller.value < 0.8) { _c1 = _animationSet.c1p1.value; } else { _c1 = _animationSet.c1p2.value; } if (_controller.value < 0.6) { _c2 = _animationSet.c2p1.value; } else if (_controller.value < 0.8) { _c2 = _animationSet.c2p2.value; } else { _c2 = _animationSet.c2p3.value; } if (_controller.value < 0.4) { _c3 = _animationSet.c3p1.value; } else if (_controller.value < 0.6) { _c3 = _animationSet.c3p2.value; } else { _c3 = _animationSet.c3p3.value; } if (_controller.value < 0.2) { _c4 = _animationSet.c4p1.value; } else if (_controller.value < 0.4) { _c4 = _animationSet.c4p2.value; } else { _c4 = _animationSet.c4p3.value; } if (_controller.value < 0.2) { _c5 = _animationSet.c5p1.value; } else { _c5 = _animationSet.c5p2.value; } setState(() {}); }); _controller.repeat(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return AspectRatio( aspectRatio: 1, child: CustomPaint( size: Size(double.infinity, double.infinity), painter: _SpinnerPainter(_c1, _c2, _c3, _c4, _c5), ), ); } } class AnimationSet { static Curve _curveOfCurve = Cubic(.51, .23, .8, .38); AnimationSet(this.controller) : // ********** C1 ********** c1p1 = _OffsetTween(Offset(1.0, 0.5), Offset(0.0, 0.5)) .animate(CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.8, curve: Curves.linear, ), )), c1p2 = _CurveTween().animate( CurvedAnimation( parent: controller, curve: Interval( 0.8, 1.0, curve: _curveOfCurve, ), ), ), // ********** C2 ********** c2p1 = _OffsetTween(Offset(0.75, 0.5), Offset(0.0, 0.5)) .animate(CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.6, curve: Curves.linear, ), )), c2p2 = _CurveTween().animate( CurvedAnimation( parent: controller, curve: Interval( 0.6, 0.8, curve: _curveOfCurve, ), ), ), c2p3 = _OffsetTween(Offset(1.0, 0.5), Offset(0.75, 0.5)).animate( CurvedAnimation( parent: controller, curve: Interval( 0.8, 1.0, curve: Curves.linear, ), ), ), // ********** C3 ********** c3p1 = _OffsetTween(Offset(0.5, 0.5), Offset(0.0, 0.5)) .animate(CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.4, curve: Curves.linear, ), )), c3p2 = _CurveTween().animate( CurvedAnimation( parent: controller, curve: Interval( 0.4, 0.6, curve: _curveOfCurve, ), ), ), c3p3 = _OffsetTween(Offset(1.0, 0.5), Offset(0.5, 0.5)).animate( CurvedAnimation( parent: controller, curve: Interval( 0.6, 1.0, curve: Curves.linear, ), ), ), // ********** C4 ********** c4p1 = _OffsetTween(Offset(0.25, 0.5), Offset(0.0, 0.5)) .animate(CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.2, curve: Curves.linear, ), )), c4p2 = _CurveTween().animate( CurvedAnimation( parent: controller, curve: Interval( 0.2, 0.4, curve: _curveOfCurve, ), ), ), c4p3 = _OffsetTween(Offset(1.0, 0.5), Offset(0.25, 0.5)).animate( CurvedAnimation( parent: controller, curve: Interval( 0.4, 1.0, curve: Curves.linear, ), ), ), // ********** C5 ********** c5p1 = _CurveTween().animate( CurvedAnimation( parent: controller, curve: Interval( 0.0, 0.2, curve: _curveOfCurve, ), ), ), c5p2 = _OffsetTween(Offset(1.0, 0.5), Offset(0.0, 0.5)).animate( CurvedAnimation( parent: controller, curve: Interval( 0.2, 1.0, curve: Curves.linear, ), ), ); final AnimationController controller; final Animation<Offset> c1p1; final Animation<Offset> c1p2; final Animation<Offset> c2p1; final Animation<Offset> c2p2; final Animation<Offset> c2p3; final Animation<Offset> c3p1; final Animation<Offset> c3p2; final Animation<Offset> c3p3; final Animation<Offset> c4p1; final Animation<Offset> c4p2; final Animation<Offset> c4p3; final Animation<Offset> c5p1; final Animation<Offset> c5p2; } class _CurveTween extends Tween<Offset> { static Rect _bounds = Rect.fromLTWH(0, 0, 1, 1); PathMetric metric = (Path() ..moveTo(_bounds.centerLeft.dx, _bounds.centerLeft.dy) ..quadraticBezierTo(_bounds.topCenter.dx, _bounds.topCenter.dy, _bounds.centerRight.dx, _bounds.centerRight.dy)) .computeMetrics() .first; _CurveTween() : super(begin: _bounds.centerLeft, end: _bounds.centerRight); @override Offset lerp(double time) { return metric.getTangentForOffset(time * metric.length).position; } } class _OffsetTween extends Tween<Offset> { _OffsetTween(Offset begin, Offset end) : super(begin: begin, end: end); @override Offset lerp(double t) { return Offset.lerp(begin, end, t); } } class _SpinnerPainter extends CustomPainter { static Color _mango = Color(0xffffbe0b); static Color _orange = Color(0xfffb5607); static Color _winterSky = Color(0xffff006e); static Color _blueViolet = Color(0xff8338ec); static Color _azure = Color(0xff3a86ff); final Offset circle1; final Offset circle2; final Offset circle3; final Offset circle4; final Offset circle5; _SpinnerPainter( this.circle1, this.circle2, this.circle3, this.circle4, this.circle5, ); @override void paint(Canvas canvas, Size size) { final radius = size.width * 0.08; canvas.drawCircle(_map(circle1, size), radius, Paint()..color = _mango); canvas.drawCircle(_map(circle2, size), radius, Paint()..color = _orange); canvas.drawCircle(_map(circle3, size), radius, Paint()..color = _winterSky); canvas.drawCircle( _map(circle4, size), radius, Paint()..color = _blueViolet); canvas.drawCircle(_map(circle5, size), radius, Paint()..color = _azure); } Offset _map(Offset offset, Size size) { return Offset(offset.dx * size.width, offset.dy * size.height); } @override bool shouldRepaint(_SpinnerPainter old) => this.circle1 != old.circle1 || this.circle2 != old.circle2 || this.circle3 != old.circle3 || this.circle4 != old.circle4 || this.circle5 != old.circle5; }
5. SlimyCard - Animated Flutter Package
SlimyCard provides a beautiful slime-like animation of a Card that separates into two different Cards, one at the top and then the other at the bottom. It is possible to put any custom widget in these two separate cards.
How to install this package
More About This Package
1. Depend on it
Add this to your flutter app's pubspec.yaml file:
dependencies: slimy_card: ^1.0.42. Install it
You can install packages from the command line:
with Flutter:
$ flutter pub getAlternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
How to use this package
1. Import it
In your Dart code, import the package as mentioned below:
import 'package:slimy_card/slimy_card.dart';2. Use It
Create a ListView, and in its children use SlimyCard()
ListView( children: <Widget>[ SlimyCard(), ], );3. Customize It
You can customize SlimyCard as per need, by using the following parameters:
ListView( children: <Widget>[ SlimyCard( color: Colors.red, width: 200, topCardHeight: 400, bottomCardHeight: 200, borderRadius: 15, topCardWidget: myWidget01(), bottomCardWidget: myWidget02(), slimeEnabled: true, ), ], ),myWidget01 & myWidget02 are your custom widget which you can display in Top Card & Bottom Card respectively.
More About This Package
6. Flutter Light Effect
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(debugShowCheckedModeBanner: false, home: HomeScreen());
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: [
Container(
color: Color.fromRGBO(52, 53, 64, 1.0),
//color: Color.fromRGBO(11,0,0, 1.0),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Center(
child: _Body(),
),
),
],
),
);
}
}
class _Body extends StatefulWidget {
@override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<_Body> {
double localX = 0;
double localY = 0;
bool defaultPosition = true;
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
double percentageX = (localX / (size.width - 40)) * 100;
double percentageY = (localY / 230) * 100;
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateX(defaultPosition ? 0 : (0.3 * (percentageY / 50) + -0.3))
..rotateY(defaultPosition ? 0 : (-0.3 * (percentageX / 50) + 0.3)),
alignment: FractionalOffset.center,
child: Container(
width: double.infinity,
height: 230,
decoration: BoxDecoration(
color: Color(0xFFCCCCCC),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
offset: Offset(0, 60),
color: Color.fromARGB(120, 0, 0, 0),
blurRadius: 22,
spreadRadius: -20),
],
),
child: GestureDetector(
onPanCancel: () => setState(() => defaultPosition = true),
onPanDown: (_) => setState(() => defaultPosition = false),
onPanEnd: (_) => setState(() {
localY = 115;
localX = (size.width - 40) / 2;
defaultPosition = true;
}),
onPanUpdate: (details) {
if (mounted) setState(() => defaultPosition = false);
if (details.localPosition.dx > 0 &&
details.localPosition.dy < 230) {
if (details.localPosition.dx < size.width - 40 &&
details.localPosition.dy > 0) {
localX = details.localPosition.dx;
localY = details.localPosition.dy;
}
}
},
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Container(
color: Colors.black,
child: Stack(
fit: StackFit.expand,
children: [
Transform(
transform: Matrix4.identity()
..translate(
defaultPosition ? 0.0 : (8 * (percentageX / 50) + -8),
defaultPosition ? 0.0 : (8 * (percentageY / 50) + -8),
0.0),
alignment: FractionalOffset.center,
child: Opacity(
opacity: 0.4,
child: Image.network(
'https://firebasestorage.googleapis.com/v0/b/sfxp-crossplatform.appspot.com/o/resources%2Fcardbg.jpg?alt=media',
fit: BoxFit.cover,
),
),
),
Stack(
children: <Widget>[
Transform(
transform: Matrix4.translationValues(
(size.width - 90) - localX,
(230 - 50) - localY,
0.0,
),
child: AnimatedOpacity(
opacity: defaultPosition ? 0 : 1,
duration: Duration(milliseconds: 500),
curve: Curves.decelerate,
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.22),
blurRadius: 100,
spreadRadius: 40,
)
]),
),
),
),
],
),
Transform(
transform: Matrix4.identity()
..translate(
defaultPosition
? 0.0
: (15 * (percentageX / 50) + -15),
defaultPosition
? 0.0
: (15 * (percentageY / 50) + -15),
0.0),
alignment: FractionalOffset.center,
child: Padding(
padding: const EdgeInsets.only(right: 22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 22, top: 15),
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: Image.network(
"https://firebasestorage.googleapis.com/v0/b/sfxp-crossplatform.appspot.com/o/resources%2Fsfxp_white.png?alt=media",
width: 90,
color: Colors.white),
),
),
),
Expanded(child: Container()),
Text(
'5048 3817 4921 8497',
style: TextStyle(
fontFamily: "CreditCard",
color: Colors.white.withOpacity(0.9),
fontSize: 18,
),
),
SizedBox(height: 10),
Row(
children: [
Expanded(child: Container()),
Text(
'Naseer Ullah Coding Flutter',
style: TextStyle(
fontFamily: "CreditCard",
color: Colors.white.withOpacity(0.8),
fontSize: 12),
),
],
),
SizedBox(height: 20),
],
),
),
)
],
),
),
),
),
),
);
}
}7. flutter_box2d
Physics example with Flutter.
Download Source Code
If You Like These Animations Collections, Please Comment Us And Also Email Subscribe For Daily Updates.
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You