title: Flutter: Adding Custom Transition with AutoRoute
body: <p>In my App i want to add Custom Transitions. I use the Plugin Auto_Route for my Routing, inside the Doc there is written how to do it, but when i do the same i get thrown Error's. For the &quot;Normal&quot; Routing without a Custom Tranisition i use &quot;ExtendedNavigator.root.push(Routes.shoppingFormScreen),&quot;.</p>
  <p><a href="https://pub.dev/packages/auto_route#Customizing-routes" rel="noreferrer">Link to the Plugin</a></p>
  <p><strong>Code</strong></p>
  <pre><code>import 'package:auto_route/auto_route.dart';
  import 'package:auto_route/auto_route_annotations.dart';
  import 'package:cloud_firestore/cloud_firestore.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter_bloc/flutter_bloc.dart';
  import 'package:mealapp/features/shopping_plan/presentation/pages/shopping_form.dart';
  
  import '../../../../core/models/shopping_list.dart';
  import '../../../../core/router/router.gr.dart';
  import '../../../../core/services/repositories/shopping_list_repository.dart';
  import '../../../../core/util/firestore_collections.dart';
  import '../../../../core/util/global.dart';
  import '../../../../injection_container.dart';
  import '../../../auth/presentation/bloc/auth/auth_bloc.dart';
  import '../../../auth/presentation/bloc/auth/auth_state.dart';
  
  class ShoppingPage extends StatelessWidget {
    @CustomRoute(transitionsBuilder: TransitionBuilders.slideBottom,durationInMilliseconds: 400)
    ShoppingFormScreen shoppingFormScreenTest;
  
    @override
    Widget build(BuildContext context) {
      final authBloc = context.bloc&lt;AuthBloc&gt;();
  
      return Scaffold(
        backgroundColor: darkGreyColor,
        floatingActionButton: FloatingActionButton(
          onPressed: () =&gt; CustomRoute(page: shoppingFormScreenTest(), transitionsBuilder: zoomInTransition),
          child: Icon(Icons.add),
          backgroundColor: redColor,
        ),
        body: Column(
          children: &lt;Widget&gt;[
            Container(
              padding: EdgeInsets.only(left: 20, top: 30),
              height: 160,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(50),
                  bottomRight: Radius.circular(50),
                ),
                color: Colors.white,
              ),
              child: Text(
                'Shop Plan',
                style: mealPlanTitleStyle,
              ),
            ),
            Expanded(
              child: BlocBuilder&lt;AuthBloc, AuthBlocState&gt;(
                cubit: authBloc,
                builder: (context, state) {
                  if (state is! UserAuthenticated) {
                    return Center(child: CircularProgressIndicator());
                  }
                  return StreamBuilder&lt;QuerySnapshot&gt;(
                    stream: FirebaseFirestore.instance
                        .collection(FirestoreCollections.shoppingLists)
                        .where(
                          'creatorId',
                          isEqualTo: (state as UserAuthenticated).user.uid,
                        )
                        .snapshots(),
                    builder: (context, snapshot) {
                      if (snapshot.connectionState == ConnectionState.waiting ||
                          snapshot.hasData == false) {
                        return Center(child: CircularProgressIndicator());
                      }
                      final shoppingListDocsData =
                          snapshot.data.docs.map((e) =&gt; e.data()).toList();
                      final items =
                          ShoppingList.fromMapList(shoppingListDocsData);
  
                      if (items.isEmpty) {
                        return Center(
                          child: Text(
                            'You have no shopping lists.',
                            style: TextStyle(color: Colors.white),
                          ),
                        );
                      }
  
                      return ListView.builder(
                        itemCount: items.length,
                        shrinkWrap: true,
                        primary: false,
                        padding: const EdgeInsets.all(16),
                        itemBuilder: (context, index) {
                          return ShoppingListCard(items[index]);
                        },
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      );
    }
    Widget zoomInTransition(BuildContext context, Animation&lt;double&gt; animation, Animation&lt;double&gt; secondaryAnimation, Widget child) {
      return ScaleTransition(scale: animation, child: child);
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Yf0br.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Yf0br.png" alt="TransitionBuilders Error" /></a></p>
  <p><a href="https://i.stack.imgur.com/1EWqM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1EWqM.png" alt="shoppingFormScreenTest Error" /></a>
  <a href="https://i.stack.imgur.com/ZfMqv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZfMqv.png" alt="Plugin Transition Documentation" /></a></p>