Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Salby/morpheus
A Flutter package for easily implementing Material Design navigation transitions.
https://github.com/Salby/morpheus
flutter flutter-animation flutter-package material-design material-motion
Last synced: 3 months ago
JSON representation
A Flutter package for easily implementing Material Design navigation transitions.
- Host: GitHub
- URL: https://github.com/Salby/morpheus
- Owner: Salby
- License: mit
- Created: 2019-04-02T11:39:57.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-12T13:32:32.000Z (about 3 years ago)
- Last Synced: 2024-06-18T15:43:34.108Z (5 months ago)
- Topics: flutter, flutter-animation, flutter-package, material-design, material-motion
- Language: Dart
- Homepage: https://pub.dev/packages/morpheus
- Size: 13.2 MB
- Stars: 192
- Watchers: 3
- Forks: 14
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Morpheus
[](https://github.com/Salby/morpheus/actions)
A Flutter package for easily implementing Material Design navigation transitions.
## Examples
### Parent-child transition
You can use `MorpheusPageRoute` to create a [parent-child transition](https://material.io/design/navigation/navigation-transitions.html#hierarchical-transitions) between two screens.
```dart
import 'package:morpheus/morpheus.dart';
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
final _parentKey = GlobalKey();
return ListTile(
key: _parentKey,
leading: CircleAvatar(child: Text((index + 1).toString())),
title: Text('Item ${index + 1}'),
onTap: () => _handleTap(context, _parentKey),
);
}
);
}
void _handleTap(BuildContext context, GlobalKey parentKey) {
Navigator.of(context).push(MorpheusPageRoute(
builder: (context) => Scaffold(),
parentKey: parentKey,
));
}
}
```
### Top-level transition
You can use the `MorpheusTabView` widget to create a [top-level transition](https://material.io/design/navigation/navigation-transitions.html#peer-transitions) when the child widget changes.
```dart
import 'package:morpheus/morpheus.dart';
class MyTabScreen extends StatefulWidget {
@override
_MyTabScreenState createState() => _MyTabScreenState();
}
class _MyTabScreenState extends State {
final List _screens = [
Scaffold(backgroundColor: Colors.green),
Scaffold(backgroundColor: Colors.red),
Scaffold(backgroundColor: Colors.blue),
];
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: MorpheusTabView(
child: _screens[_currentIndex]
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.trending_up),
title: Text('Trending'),
),
BottomNavigationBarItem(
icon: Icon(Icons.star),
title: Text('Saved'),
),
],
onTap: (index) {
if (index != _currentIndex) {
setState(() => _currentIndex = index);
}
},
),
);
}
}
```