Flutter: Adding Custom Transition with AutoRoute

Viewed 2565

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);
  }
}

TransitionBuilders Error

shoppingFormScreenTest Error Plugin Transition Documentation

2 Answers

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.

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.

Related