skip to Main Content

After pressing the "Kayıt Ol" button on the "Giriş Yap (Login)" page, I should go to the "Kayıt Ol (Signup)" page, but it adds the Login page to the stack and I can’t see the Signup page. Am I missing something? I can’t go another page from "Giriş Yap (Login)" page. I showed the case at below gif. I’m waiting your helping.

enter image description here

app_router.dart


part 'app_router.gr.dart';

@AutoRouterConfig(replaceInRouteName: AppRouter._replaceInRouteName)
final class AppRouter extends _$AppRouter {
  static const _replaceInRouteName = 'View,Route';
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          page: LoginRoute.page,
          initial: true,
          children: [
            AutoRoute(page: SignUpRoute.page),
          ],
        ),
      ];
}

login_view.dart

/// [LoginView] is a [StatefulWidget] that displays the sign up view.
@RoutePage()
final class LoginView extends StatefulWidget {
  /// Constructor
  const LoginView({super.key});

  @override
  State<LoginView> createState() => _LoginViewState();
}

class _LoginViewState extends State<LoginView> with AuthCommonViewMixin {
  double _expandedHeight = 200.0;

  @override
  Widget build(BuildContext context) {
    log('LoginView build');
    return Form(
      key: loginFormKey,
      child: BaseView(
        sliverAppBar: SliverAppBar(
          pinned: false,
          expandedHeight: _expandedHeight,
          flexibleSpace: FlexibleSpaceBar(
            background: CurvedImage(
              image: Assets.icons.icLoginLogistic.svg(
                fit: BoxFit.fill,
                package: 'gen',
              ),
            ),
          ),
        ),
        onPageBuilder: (context, value) => SliverList(
          delegate: SliverChildListDelegate(
            [
              const AuthTitle(
                titleText: LocaleKeys.authentication_login,
              ),
              CustomTextFormField(
                controller: emailController,
                prefixIcon: const Icon(Icons.email_outlined),
                labelText: LocaleKeys.authentication_email.tr(),
                hintText: LocaleKeys.authentication_email_placeholder.tr(),
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
              ),
              CustomTextFormField(
                controller: passwordController,
                prefixIcon: const Icon(Icons.lock_outline),
                labelText: LocaleKeys.authentication_password.tr(),
                hintText: LocaleKeys.authentication_password_placeholder.tr(),
                keyboardType: TextInputType.visiblePassword,
                textInputAction: TextInputAction.done,
                obscureText: true,
              ),
              Align(
                alignment: Alignment.centerRight,
                child: TextButton(
                  onPressed: () {},
                  child: const Text(LocaleKeys.authentication_forgot_password).tr(),
                ),
              ),
              Padding(
                padding: PaddingManager.paddingManagerNormalPaddingSymmetricVertical,
                child: CustomElevatedButton(
                  onPressed: () {},
                  child: const Text(LocaleKeys.authentication_login).tr(),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(LocaleKeys.authentication_dont_have_account).tr(),
                  TextButton(
                    onPressed: () {
                      context.router.push(SignUpRoute());
                    },
                    child: const Text(LocaleKeys.authentication_sign_up).tr(),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

signup_view.dart

/// [SignUpView] is a [StatefulWidget] that displays the sign up view.
@RoutePage()
final class SignUpView extends StatefulWidget {
  /// Constructor
  const SignUpView({super.key});

  @override
  State<SignUpView> createState() => _SignUpViewState();
}

class _SignUpViewState extends State<SignUpView>
    with AuthCommonViewMixin, SignUpViewMixin {
  @override
  Widget build(BuildContext context) {
    log('SignUpView build');
    return Form(
      key: signupFormKey,
      child: BaseView(
        onPageBuilder: (context, value) => SliverList(
          delegate: SliverChildListDelegate(
            [
              const AuthTitle(
                titleText: LocaleKeys.authentication_sign_up,
              
              Padding(
                padding: PaddingManager.paddingManagerNormalPaddingSymmetricVertical,
                child: CustomElevatedButton(
                  onPressed: () {},
                  child: const Text(LocaleKeys.authentication_sign_up).tr(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2

Answers


  1. Instead of nesting SignUpRoute inside LoginRoute you can just place them at the same level in your AppRouter

    part 'app_router.gr.dart';
    
    @AutoRouterConfig(replaceInRouteName: AppRouter._replaceInRouteName)
    final class AppRouter extends _$AppRouter {
      static const _replaceInRouteName = 'View,Route';
      @override
      List<AutoRoute> get routes => [
            AutoRoute(page: LoginRoute.page, initial: true),
            AutoRoute(page: SignUpRoute.page),
      ];
    }
    
    Login or Signup to reply.
  2. check this docs: https://autoroute.vercel.app/basics/nested_routes

    And can you watch: https://www.youtube.com/watch?v=GINXiO5Te4U

    So, we before is children create and later EmptyRouter. I not like this 🙁

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search