[go_router] Add default pageBuilder to GoRouter

Use case

For custom transitions there's already the possibility to declare a GoRoute with a pageBuilder. In cases where the same custom transition is needed for every page in the app, this method becomes repetitive and redundant.

  GoRouter(
    routes: [
      GoRoute(
        path: '/',
        pageBuilder: (context, state) => MyCustomTransitionPage(
          child: RootPage(),
        ),
        routes: [
          GoRoute(
            path: 'page2',
            pageBuilder: (context, state) => MyCustomTransitionPage(
              child: Page2(),
            ),
          ),
          GoRoute(
            path: 'page3',
            pageBuilder: (context, state) => MyCustomTransitionPage(
              child: Page3(),
            ),
          ),
          GoRoute(
            path: 'page4',
            pageBuilder: (context, state) => MyCustomTransitionPage(
              child: Page4(),
            ),
          ),
        ],
      ),
    ],
  );

Proposal

To solve this issue it would be really great to add a custom pageBuilder to GoRouter constructor and use it (if present) as the default pageBuilder for every GoRoute that only declares a builder

  GoRouter(
    pageBuilder: (context, state, child) => MyCustomTransitionPage(
      child: child,
    ),
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => RootPage(),
        routes: [
          GoRoute(
            path: 'page2',
            builder: (context, state) => Page2(),
          ),
          GoRoute(
            path: 'page3',
            builder: (context, state) => Page3(),
          ),
          GoRoute(
            path: 'page4',
            builder: (context, state) => Page4(),
          ),
        ],
      ),
    ],
  );

@Skogsfrae

Hello @Skogsfrae. Can you provide a complete and minimal, reproducible example of the current behavior so that I may verify the issue?

@Skogsfrae

Use case

For custom transitions there's already the possibility to declare a GoRoute with a pageBuilder. In cases where the same custom transition is needed for every page in the app, this method becomes repetitive and redundant.

Proposal

To solve this issue it would be really great to add a custom pageBuilder to GoRouter constructor and use it (if present) as the default pageBuilder for every GoRoute that only declares a builder

@Skogsfrae I really like the idea it makes the code much cleaner , testable and reduce the risk of errors
@exaby73 I'm confused, the proposal looks super clear to me

@exaby73

Hi @exaby73
This is not a bug, but a feature proposal.

I provided a minimal snipped of the current behaviour in the Use Case section and a proposal of improvement in the Proposal section.

I didn't provide a runnable snippet of code to keep the focus on GoRouter interface. If still needed let me know, I'll try to write something more detailed.

This would be especially helpful when using WidgetsApp, not MaterialApp. In that case, go_router defaults to NoTransitionPage which does nothing. It's annoying to overwrite it for every Route.

What would also be nice would be to be able to give a default page builder to a GoRoute or a ShellRoute so it is applied to all its nested children.

GoRoute(
  subRoutesDefaultPageBuilder: _pageBuilder,
  routes: [/* ... */],
);
ShellRoute(
  subRoutesDefaultPageBuilder: _pageBuilder,
  routes: [/* ... */],
);

Any progress on this?

Go router uses default page transaction present in the theme data, so If someone wants a custom transaction for all routes they can just provide it to the root material app. Below is a minimal example which use slide animation for all routes transaction. After this you just continue to builder instead of pageBuilder and whatever page transaction you have provided in theme, will be used all over the app.

import 'package:flutter/material.dart';

class SlidePageTransition extends PageTransitionsBuilder {
  const SlidePageTransition();

  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1, 0),
        end: Offset.zero,
      ).animate(animation),
      child: child,
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      theme: ThemeData(
        pageTransitionsTheme: const PageTransitionsTheme(
          builders: {
            TargetPlatform.android: SlidePageTransition(),
            TargetPlatform.iOS: SlidePageTransition(),
            TargetPlatform.linux: SlidePageTransition(),
          },
        ),
      ),
    );
  }
}

Navigation Menu

Repository navigation

[go_router] Add default pageBuilder to GoRouter #113282

Use case

Proposal

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[go_router] Add default pageBuilder to GoRouter #113282

Description

Use case

Proposal

Activity

exaby73 commented on Oct 11, 2022

iapicca commented on Oct 11, 2022

Use case

Proposal

Skogsfrae commented on Oct 11, 2022

passsy commented on Dec 19, 2022

ValentinVignal commented on Mar 17, 2023

jeroen-meijer commented on Sep 11, 2023

shivamkj commented on Mar 27, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions