how to add ainmation in GoRouter flutter and also if the animation class can sit in a stand alone file so that i can have so many animation classes to call on different pages. code source

void main() => runApp(App());

class App extends StatelessWidget {
  App({Key? key}) : super(key: key);

  static const String title = 'GoRouter Example: Declarative Routes';

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routerConfig: _router,
        title: title,
      );

  final GoRouter _router = GoRouter(
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) =>
            const Page1Screen(),
        routes: <GoRoute>[
          GoRoute(
            path: 'page2',
            builder: (BuildContext context, GoRouterState state) =>
                const Page2Screen(),
          ),
        ],
      ),
    ],
  );
}

CodePudding user response：

"The builder is responsible for building the Widget to display on screen. Alternatively, you can use pageBuilder to customize the transition animation when that route becomes active."

CodePudding user response：

You can extend the CustomTranstionPage to create a custom transition animation.

An example:

import 'package:flutter/widgets.dart';
import 'package:go_router/go_router.dart';
    
class CustomSlideTransition extends CustomTransitionPage<void> {
      CustomSlideTransition({super.key, required super.child})
          : super(
              transitionDuration: const Duration(milliseconds: 250),
              transitionsBuilder: (_, animation, __, child) {
                return SlideTransition(
                  position: animation.drive(
                    Tween(
                      begin: const Offset(1.5, 0),
                      end: Offset.zero,
                    ).chain(
                      CurveTween(curve: Curves.ease),
                    ),
                  ),
                  child: child,
                );
              },
            );
    }


// In your router:

GoRoute(
    name: 'my_page',
    path: '/my_page',
    pageBuilder: (_, state) {
      return CustomSlideTransition(
        key: state.pageKey,
        child: MyPage(),
      );
   },
),