Flutter:使用 AutoRoute 添加自定义过渡

Question

在我的应用程序中，我想添加自定义过渡。我使用插件 Auto_Route 进行路由，在 Doc 里面写了如何做，但是当我这样做时，我会抛出错误。对于没有自定义过渡的“正常”路由，我使用“ExtendedNavigator.root.push(Routes.shoppingFormScreen)”。
Link to the Plugin
代码

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

我不确定它是否可以帮助任何人。现在将自定义过渡与 AutoRoute 结合使用。我是这样用的。

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

我在收到示例问题时看到了这篇文章，并在我解决了我的问题时回来了。希望可以帮助像我这样的人。