Shell Route Transitions

A Flutter package that provides beautiful and customizable transitions for shell routes in Flutter applications. This package makes it easy to add professional-looking animations when navigating between routes.

Package Demo

Features

Multiple Animation Types: Choose from several pre-built animations:
- Fade transitions
- Horizontal slide transitions
- Vertical slide transitions
- Scale transitions
Customizable: Create your own custom transitions
Easy Integration: Simple to use with Go Router or other navigation solutions
Performant: Optimized for smooth animations

Transition Types

Fade Transition

Horizontal Slide Transition

Horizontal Slide

Vertical Slide Transition

Vertical Slide

Scale Transition

Getting Started

Add the package to your pubspec.yaml file:

dependencies:
  shell_route_transitions: ^0.0.2

Then run:

flutter pub get

Usage

Basic Usage

final goRouter = GoRouter(
  initialLocation: '/a',

  debugLogDiagnostics: true,
  routes: [
    AnimatedStatefulShellRoute(
      transitionDuration: const Duration(milliseconds: 300),
      transitionBuilder: ShellRouteTransitions.scale,
      builder: (context, state, navigationShell) {
        return ScaffoldWithNestedNavigation(navigationShell: navigationShell);
      },
      branches: [
        StatefulShellBranch(
          routes: [
            GoRoute(
              path: '/a',
              builder:
                  (context, state) =>
                      const RootScreen(label: 'A', detailsPath: '/a/details'),
            ),
          ],
        ),
        .....
        ```


### Available Transitions

```dart
// Fade transition
ShellRouteTransitions.fade

// Horizontal slide transition
ShellRouteTransitions.slideHorizontal

// Vertical slide transition
ShellRouteTransitions.slideVertical

// Scale transition
ShellRouteTransitions.scale