Flutter：使用 AutoRoute 添加自定义转换答案

【问题标题】：Flutter: Adding Custom Transition with AutoRouteFlutter：使用 AutoRoute 添加自定义转换
【发布时间】：2021-01-06 20:09:24
【问题描述】：

在我的应用程序中，我想添加自定义过渡。我使用插件 Auto_Route 进行路由，在 Doc 里面写了如何做，但是当我做同样的事情时，我会抛出错误。对于没有自定义 Tranisition 的“正常”路由，我使用“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);
  }
}

【问题讨论】：

标签： flutter dart transition flutter-dependencies

【解决方案1】：

我不确定它是否可以帮助任何人。现在使用 AutoRoute 的自定义转换。我就是这样用的。

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

我在收到示例问题时看到此帖子，并在我解决问题后返回。希望可以帮助像我这样的人。

【讨论】：

【解决方案2】：

对于 transitionsBuilder 属性，您已提供 TransitionBuilders 作为值，但实际上是TransitionsBuilders

将TransitionBuilders 更改为TransitionsBuilders。

在documentation 中是TransitionBuilders 我认为是错误的。

【讨论】：