https://github.com/spkersten/flutter_coast
PageView wrapper that supports Hero-like animations
https://github.com/spkersten/flutter_coast
animation dart flutter hero pageview
Last synced: 3 months ago
JSON representation
PageView wrapper that supports Hero-like animations
- Host: GitHub
- URL: https://github.com/spkersten/flutter_coast
- Owner: spkersten
- License: mit
- Created: 2021-01-10T09:03:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-27T10:38:17.000Z (about 3 years ago)
- Last Synced: 2025-03-27T00:21:59.589Z (4 months ago)
- Topics: animation, dart, flutter, hero, pageview
- Language: Dart
- Homepage: https://pub.dev/packages/coast
- Size: 1.38 MB
- Stars: 22
- Watchers: 1
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# coast
PageView wrapper supporting Hero-like animations
## Example
Create a `Coast` with a number of `Beaches` and add a `CrabController` as observer
to the `Coast`. Wrap a widget that you want to animate between beaches with a
`Crab` widget with the same `tag`.
```dart
class CoastExampleApp extends StatefulWidget {
@override
_CoastExampleAppState createState() => _CoastExampleAppState();
}
class _CoastExampleAppState extends State {
final _beaches = [
Beach(builder: (context) => Cadzand()),
Beach(builder: (context) => Westkapelle()),
Beach(builder: (context) => Zoutelande()),
];
final _coastController = CoastController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Coast(
beaches: _beaches,
controller: _coastController,
observers: [
CrabController(),
],
),
);
}
}
class Cadzand extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text("Cadzand"),
backgroundColor: Colors.deepOrange,
),
body: Stack(
children: [
Positioned(
top: 40,
left: 40,
child: Crab(
tag: "container",
child: Container(
color: Colors.green,
width: 80,
height: 60,
),
),
),
],
),
);
}
class Westkapelle extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text("Westkapelle"),
backgroundColor: Colors.amber,
),
body: Stack(
children: [
Positioned(
top: 80,
right: 40,
child: Crab(
tag: "container",
child: Container(
color: Colors.green,
width: 200,
height: 100,
),
),
),
],
),
);
}
class Zoutelande extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text("Zoutelande"),
backgroundColor: Colors.deepPurple,
),
body: Stack(
children: [
Positioned(
bottom: 40,
left: 20,
child: Crab(
tag: "container",
child: Container(
color: Colors.green,
width: 100,
height: 200,
),
),
),
],
),
);
}
```