local_hero

Creator: coderz1093

Last updated:

Add to Cart

Description:

local hero

local_hero #

A widget which implicitly launches a hero animation when its position changed within the same route.

Getting started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
local_hero:
copied to clipboard
In your library add the following import:
import 'package:local_hero/local_hero.dart';
copied to clipboard
Usage #
To be animated implicitly, a widget needs to be surrounded by a LocalHero widget with a unique tag:
const LocalHero(
tag: 'my_widget_tag',
child: MyWidget(),
),
copied to clipboard
A LocalHero widget must have a LocalHeroScope ancestor which hosts the animations properties (duration, curve, etc.).
At each frame we must have only one LocalHero per tag, per LocalHeroScope.
The following example shows the basic usage of a LocalHero widget:
class _LocalHeroPage extends StatelessWidget {
const _LocalHeroPage({
Key key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: LocalHeroScope(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
child: const _LocalHeroPlayground(),
),
),
);
}
}

class _LocalHeroPlayground extends StatefulWidget {
const _LocalHeroPlayground({
Key key,
}) : super(key: key);

@override
_LocalHeroPlaygroundState createState() => _LocalHeroPlaygroundState();
}

class _LocalHeroPlaygroundState extends State<_LocalHeroPlayground> {
AlignmentGeometry alignment = Alignment.topLeft;

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8),
child: Align(
alignment: alignment,
child: const LocalHero(
tag: 'id',
child: _Box(),
),
),
),
),
RaisedButton(
onPressed: () {
setState(() {
alignment = alignment == Alignment.topLeft
? Alignment.bottomRight
: Alignment.topLeft;
});
},
child: const Text('Move'),
),
],
);
}
}

class _Box extends StatelessWidget {
const _Box({
Key key,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
width: 50,
height: 50,
);
}
}
copied to clipboard

Sponsoring #
I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.
Changelog #
Please see the Changelog page to know what's recently changed.
Contributions #
Feel free to contribute to this project.
If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Customer Reviews

There are no reviews.