How to properly show Route as a Dialog about auto_route_library

[herna]

Ok, I answer to myself, it seems the widget you pass to DialogRoute must be a Dialog itself, which in my case it was not, so I had to enclose it in a Dialog.

In my case I wanted to show the page as either a Dialog or a regular page so I created a CustomRoute like the following, this is the real example in case anyone needs it.

main.dart

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_dialog/app_router.dart';
import 'package:auto_route_dialog/app_router.gr.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  MainApp({super.key});

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

@RoutePage()
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () => context.pushRoute(LoginRoute(isDialog: true)),
              child: const Text('Login Dialog'),
            ),
            ElevatedButton(
              onPressed: () => context.pushRoute(LoginRoute(isDialog: false)),
              child: const Text('Login Regular'),
            ),
          ],
        ),
      ),
    );
  }
}

@RoutePage()
class LoginPage extends StatelessWidget {
  const LoginPage({super.key, required this.isDialog});

  final bool isDialog;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Login page'),
      ),
    );
  }
}

app_router.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'app_router.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends $AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: '/',
          page: HomeRoute.page,
          initial: true,
        ),
        MyCustomRoute(
          path: '/login',
          page: LoginRoute.page,
        ),
      ];
}

// CustomRoute is coming from auto_route
class MyCustomRoute<T> extends CustomRoute {
  MyCustomRoute({required PageInfo page, String? path})
      : super(
          page: page,
          path: path,
          customRouteBuilder: myRouteBuilder,
        );

  // must be static and public
  static Route<T> myRouteBuilder<T>(
    BuildContext context,
    Widget child,
    AutoRoutePage<T> page,
  ) {
    bool isDialog = false;
    if (page.arguments is LoginRouteArgs) {
      LoginRouteArgs loginRouteArgs = page.arguments as LoginRouteArgs;
      isDialog = loginRouteArgs.isDialog;
    }
    if (isDialog) {
      return DialogRoute<T>(
        context: context,
        settings: page, // must assign page to settings
        builder: (context) => Dialog(child: child),
      );
    } else {
      return PageRouteBuilder(
        settings: page,
        pageBuilder: (context, animation, secondaryAnimation) => child,
      );
    }
  }
}