0 purchases
Description:
position animator
Position Animator #
A Flutter package that allows you to animate the movement of a widget from its current position to the position of another widget on the screen. This package also provides the flexibility to customize the animation's behavior and appearance.
Features #
Animate a widget from its current position to the position of another widget.
Customize the animation curve and duration.
Optionally resize the widget as it moves.
Use a custom builder to define how the widget is animated.
Getting Started #
Installation #
Add position_animator to your pubspec.yaml file:
dependencies:
position_animator: ^1.0.0
copied to clipboard
Then, run:
flutter pub get
copied to clipboard
Usage #
To use the PositionAnimator, wrap the widget you want to animate with a PositionAnimatorWidget, and provide a GlobalKey to both the widget to animate and the target widget.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:position_animator/position_animator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final GlobalKey appBarKey = GlobalKey();
final GlobalKey bottomBarKey = GlobalKey();
MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Builder(builder: (context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar'),
actions: [
Icon(
Icons.shopping_cart_outlined,
key: appBarKey,
),
const SizedBox(width: 20),
],
),
bottomNavigationBar: SizedBox(
height: kToolbarHeight,
child: AppBar(
title: const Text('BottomBar'),
actions: [
Icon(
Icons.shopping_cart_outlined,
key: bottomBarKey,
),
const SizedBox(width: 20),
],
),
),
body: ListView.separated(
itemCount: 20,
padding: const EdgeInsets.all(20),
itemBuilder: (BuildContext context, int index) {
final GlobalKey widgetKey = GlobalKey();
return Row(
children: [
PositionAnimatorWidget(
key: widgetKey,
child: SizedBox.square(
dimension: 100,
child: Card(
color:
Color.fromRGBO(Random().nextInt(255), Random().nextInt(255), Random().nextInt(255), 1),
child: const FittedBox(
fit: BoxFit.scaleDown,
child: Icon(Icons.shopping_basket_outlined),
),
),
),
),
const Spacer(flex: 2),
ElevatedButton(
onPressed: () {
final animator = PositionAnimator(
targetWidgetKey: bottomBarKey,
widgetKey: widgetKey,
duration: const Duration(seconds: 3),
curve: Curves.elasticInOut,
);
animator.start(context);
},
child: const Text('Add'),
),
const SizedBox(width: 20),
ElevatedButton(
onPressed: () {
final animator = PositionAnimator(
targetWidgetKey: appBarKey,
widgetKey: widgetKey,
duration: const Duration(seconds: 1),
curve: Curves.linear,
);
animator.start(context);
},
child: const Text('Add'),
),
],
);
},
separatorBuilder: (BuildContext context, int index) {
return const Divider();
},
),
);
}),
);
}
}
copied to clipboard
Parameters #
targetWidgetKey: The GlobalKey of the widget to which the animated widget should move.
widgetKey: The GlobalKey of the widget that should be animated.
duration: The duration of the animation.
curve: The curve that defines the animation's easing.
childSizeFactor: A factor by which the size of the child widget will decrease as it moves. The value must be greater than 0.
builder: A builder function to customize the animated widget. It provides the context, animation, child widget, size, and target position.
Example #
The example above demonstrates how to animate a red box to the position of a blue box on the screen when the floating action button is pressed. The red box will also shrink in size as it moves.
License #
This project is licensed under the MIT License - see the LICENSE file for details.
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files In This Product:
Customer Reviews
There are no reviews.
