# The Ultimate Guide to GoRouter: Navigation in Flutter Apps Part -3 (Custom Transitions)

Part -1: [https://tinyurl.com/k3f64hwv](https://tinyurl.com/k3f64hwv)

Part -2: [https://tinyurl.com/3azk6jjj](https://tinyurl.com/3azk6jjj)

Starting with custom transitions in GoRouter is a fantastic way to enhance the user experience of our Flutter application by adding visually appealing and smooth animations between routes.

GoRouter <mark>allows us to specify custom transitions using the </mark> `pageBuilder` <mark> instead of the basic </mark> `builder`<mark>.</mark> This enables us to define custom animations for each route transition.

# Custom Transitions

### **Step 1: Define the CustomTransition by CustomTransitionPage Widget**

You’ll need to create a `CustomTransitionPage` which is essentially a `Page` that allows you to define transitions. Here’s a basic implementation:

```dart
import 'package:flutter/material.dart';

class CustomTransitionPage extends Page {
  final Widget child;
  final Duration transitionDuration;
  final RouteTransitionsBuilder transitionsBuilder;

  CustomTransitionPage({
    required this.child,
    this.transitionDuration = const Duration(milliseconds: 300),
    required this.transitionsBuilder,
  }) : super(key: ValueKey(child));

  @override
  Route createRoute(BuildContext context) {
    return PageRouteBuilder(
      settings: this,
      pageBuilder: (context, animation, secondaryAnimation) => child,
      transitionDuration: transitionDuration,
      transitionsBuilder: transitionsBuilder,
    );
  }
}
```

### Step 2: Add CustomTransition to our `DetailsPage`

So let's setup our `pageBuilder` for our to implement it in our `app_router.dart`

```dart
GoRoute(
path: '/details/:itemId',
//This is Where custom Transition is used
pageBuilder: (BuildContext context, GoRouterState state) {
final params = state.pathParameters['itemId'];
final int itemId = int.tryParse(params ?? '') ?? 0;
return CustomTransitionPage(
key: state.pageKey,
child: DetailsPage(itemId: itemId),
//We are using Fade Transition here
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(opacity: animation, child: child);
            },
          );
        }
      ),
```

### **Key Updates**

1. **Custom Transition for DetailsPage**: The route now uses `pageBuilder` with a `FadeTransition` to provide a smooth fade-in effect when navigating to the `DetailsPage`.
    

So let's test the transition

![Fade Transition](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnI1d2VwNGdodWVwcjdrcG1iMGowYmN3djhydjZtM2Vhd2F0aWM2eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LMNd6lXngSyTTGXPRn/giphy.gif align="center")

If you want to see a prolonged animation. Then you can adjust the `transitionDuration` and get see the detailed animation.

Perfect. Now you know enough about GoRouter to work on any app that you need.

I'll be creating a new series on GoRouter + Riverpod . Which will cover Authentication, Preloading Data, Advanced Deep Linking with Firebase and everything in between. So stay tuned and subscribe to my blog.