import 'package:flutter/material.dart';

class PositionedTransitionWidget extends StatefulWidget {
@override
_PositionedTransitionWidgetState createState() =>
_PositionedTransitionWidgetState();
}

class _PositionedTransitionWidgetState extends State<PositionedTransitionWidget>
with SingleTickerProviderStateMixin {
final RelativeRectTween relativeRectTween = RelativeRectTween(
begin: RelativeRect.fromLTRB(100, 100, 0, 0),
end: RelativeRect.fromLTRB(0, 0, 50, 50),
);
AnimationController controller;
bool status = true;

@override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
super.initState();
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
color: Colors.pink,
width: 300,
height: 300,
child: Stack(
children: <Widget>[
PositionedTransition(
rect: relativeRectTween.animate(controller),
child: Container(
color: Colors.orange,
width: 200,
height: 200,
padding: EdgeInsets.all(20),
child: FlutterLogo(),
),
),
],
),
),
RaisedButton(
onPressed: () {
status ? controller.forward() : controller.reverse();
status = !status;
},
child: Text("Change Positione"),
)
],
);
}
}

هل يوجد سؤال عن الكود

Feel free to use the code in your projects but do not forget to give me the credits adding my app (Flutter Animation Gallery) where you are gonna use it.

------------------------------------------




import 'package:animator/animator.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MyCustomWidget extends StatefulWidget {
@override
_MyCustomWidgetState createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget> {
@override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
return Scaffold(
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: _width / 2.7,
width: _width / 2.7,
child: Animator<double>(
duration: Duration(milliseconds: 1000),
cycles: 0,
curve: Curves.elasticIn,
tween: Tween<double>(begin: 20.0, end: 25.0),
builder: (context, animatorState, child) => Icon(
Icons.favorite,
size: animatorState.value * 5,
color: Color(0xFFFF5757),
),
),
),
Container(
height: _width / 2.7,
width: _width / 2.7,
child: Animator<double>(
duration: Duration(milliseconds: 1000),
cycles: 0,
curve: Curves.elasticInOut,
tween: Tween<double>(begin: 20.0, end: 25.0),
builder: (context, animatorState, child) => Icon(
Icons.favorite,
size: animatorState.value * 5,
color: Color(0xFFFF5757),
),
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
height: _width / 2.7,
width: _width / 2.7,
child: Animator<double>(
duration: Duration(milliseconds: 1000),
cycles: 0,
curve: Curves.bounceOut,
tween: Tween<double>(begin: 20.0, end: 25.0),
builder: (context, animatorState, child) => Icon(
Icons.favorite,
size: animatorState.value * 5,
color: Color(0xFFFF5757),
),
),
),
Container(
height: _width / 2.7,
width: _width / 2.7,
child: Animator<double>(
duration: Duration(milliseconds: 1000),
cycles: 0,
curve: Curves.elasticOut,
tween: Tween<double>(begin: 20.0, end: 25.0),
builder: (context, animatorState, child) => Icon(
Icons.favorite,
size: animatorState.value * 5,
color: Color(0xFFFF5757),
),
),
),
],
),
],
),
);
}
}

Feel free to use the code in your projects but do not forget to give me the credits adding my app (Flutter Animation Gallery) where you are gonna use it.

------------------------------------------




import 'package:flutter/material.dart';

class MyCustomWidget extends StatefulWidget {
@override
_MyCustomWidgetState createState() => _MyCustomWidgetState();
}

class _MyCustomWidgetState extends State<MyCustomWidget>
with TickerProviderStateMixin {
Animation _heartAnimation;
AnimationController _heartAnimationController;

bool isTapped = false;

@override
void initState() {
super.initState();

_heartAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1500),
reverseDuration: Duration(milliseconds: 400));
_heartAnimation = Tween(begin: 120.0, end: 170.0).animate(CurvedAnimation(
curve: Curves.elasticOut,
reverseCurve: Curves.ease,
parent: _heartAnimationController));

_heartAnimationController.addStatusListener(
(AnimationStatus status) {
if (status == AnimationStatus.completed) {
_heartAnimationController.reverse();
} else if (status == AnimationStatus.dismissed) {
_heartAnimationController.forward();
}
},
);
}

@override
void dispose() {
super.dispose();
_heartAnimationController?.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: secondChild(),
),
);
}

Widget secondChild() {
return AnimatedBuilder(
animation: _heartAnimationController,
builder: (context, child) {
return Center(
child: AnimatedBuilder(
animation: _heartAnimationController,
builder: (context, child) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.favorite,
color: Colors.red, size: _heartAnimation.value),
Column(
children: [
ElevatedButton(
onPressed: () => _heartAnimationController.forward(),
child: Text(
'Start beating',
),
),
ElevatedButton(
onPressed: () => _heartAnimationController.stop(),
child: Text(
'Stop beating',
),
),
],
),
],
),
);
},
),
);
},
);
}
}