Flutter: Adding Custom Transition with AutoRoute

Question

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 "Normal" Routing without a Custom Tranisition i use "ExtendedNavigator.root.push(Routes.shoppingFormScreen),".

Link to the Plugin

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<AuthBloc>();

    return Scaffold(
      backgroundColor: darkGreyColor,
      floatingActionButton: FloatingActionButton(
        onPressed: () => CustomRoute(page: shoppingFormScreenTest(), transitionsBuilder: zoomInTransition),
        child: Icon(Icons.add),
        backgroundColor: redColor,
      ),
      body: Column(
        children: <Widget>[
          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<AuthBloc, AuthBlocState>(
              cubit: authBloc,
              builder: (context, state) {
                if (state is! UserAuthenticated) {
                  return Center(child: CircularProgressIndicator());
                }
                return StreamBuilder<QuerySnapshot>(
                  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) => 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<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return ScaleTransition(scale: animation, child: child);
  }
}

Answer 1

I not sure If it can help anyone. Now for using Custom Transition with AutoRoute. I using like this.

@MaterialAutoRouter(
  replaceInRouteName: 'Screen,Route',
  routes: <AutoRoute>[
    CustomRoute(page: ProfileScreen, transitionsBuilder: TransitionsBuilders.fadeIn),
    AutoRoute(page: SplashScreen, initial: true),
    AutoRoute(page: LoginScreen),
    ...
  ],
)

I see this post when I get the sample issue and comeback when I resolved my issue. Hope can help someone like me.

Answer 2

For transitionsBuilder property you have given TransitionBuilders as value but it is actually TransitionsBuilders

change TransitionBuilders to TransitionsBuilders.

In the documentation it is TransitionBuilders I think it is wrong.