swipeable_page_route 0.1.4

🔙 Swipe to navigate back and admire beautifully morphing widgets

🔙 Swipe to navigate back and admire beautifully morphing widgets.

SwipeablePageRoute

To allow your users to go back by swiping anywhere on the current page, use SwipeablePageRoute 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(),
));

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: <Widget>[
    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) {
        return [
          PopupMenuItem<void>(child: Text('Overflow action 1')),
          PopupMenuItem<void>(child: Text('Overflow action 2')),
        ];
      },
    ),
  ],
  bottom: TabBar(
    tabs: <Widget>[
      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 will be reused across pages) for correct animations.