swipeable_page_route 0.2.4
swipeable_page_route: ^0.2.4 copied to clipboard

πŸ”™ Swipe to navigate back and admire beautifully morphing widgets

πŸ”™ Swipe to navigate back and admire beautifully morphing widgets.

swipeable_page_route demo

SwipeablePageRoute #

SwipeablePageRoute is a specialized CupertinoPageRoute that allows your users to go back by swiping anywhere on the current page. Use it instead of MaterialPageRoute or CupertinoPageRoute:

Navigator.of(context).push(SwipeablePageRoute(
  builder: (BuildContext context) => MyPageContent(),
));

If your page contains horizontally scrollable content, you can limit SwipeablePageRoute to only react on drags from the start (left in LTR, right in RTL) screen edge — just like CupertinoPageRoute:

Navigator.of(context).push(SwipeablePageRoute(
  onlySwipeFromEdge: true,
  builder: (BuildContext context) => MyHorizontallyScrollablePageContent(),
));

You can get the SwipeablePageRoute wrapping your current page using context.getSwipeablePageRoute<T>().

MorphingAppBar & MorphingSliverAppBar #

As you can see in the demo above, there's a beautiful animation happening to the AppBar. That's a MorphingAppBar!

You can construct MorphingAppBar (corresponds to AppBar) and MorphingSliverAppBar (corresponds to SliverAppBar) just like the originals:

MorphingAppBar(
  backgroundColor: Colors.green,
  title: Text('My Page'),
  actions: [
    IconButton(
      key: ValueKey('play'),
      icon: Icon(Icons.play_arrow),
      onPressed: () {},
    ),
    IconButton(
      key: ValueKey('favorite'),
      icon: Icon(Icons.favorite),
      onPressed: () {},
    ),
    PopupMenuButton<void>(
      key: ValueKey('overflow'),
      itemBuilder: (context) => [
        PopupMenuItem<void>(child: Text('Overflow action 1')),
        PopupMenuItem<void>(child: Text('Overflow action 2')),
      ],
    ),
  ],
  bottom: TabBar(tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ]),
)

Both MorphingAppBars internally use Heros, so if you're not navigating directly inside a MaterialApp, you have to add a HeroController to your Navigator:

Navigator(
  observers: [HeroController()],
  onGenerateRoute: // ...
)

To animate additions, removals, and constants in your AppBars actions, we compare them using Widget.canUpdate(Widget old, Widget new). It compares Widgets based on their type and key, so it's recommended to give every action Widget a key (that you reuse across pages) for correct animations.

92
likes
120
pub points
87%
popularity

Publisher

wanke.dev

πŸ”™ Swipe to navigate back and admire beautifully morphing widgets

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

black_hole_flutter, collection, flutter, list_diff, meta, supercharged

More

Packages that depend on swipeable_page_route