How can I pop login page when user click on AppBar button in Flutter using Amplify Authenticator UI library?

66 views Asked by At

I'm writing a Flutter app and using the following packages:

  1. go_router

  2. Amplify authenticator UI library: Amplify UI Authenticator

My goal is to display a profile image in the AppBar along with a dropdown menu (eventually, visible when the user is not logged in). The menu should provide options for login and sign-up.

enter image description here

I'm unsure about how to proceed with the "onTap" property inside the PopupMenuItem in order to display the login or sign-up form to the user. My intention is to keep the user on the same page after they log in, rather than redirecting them to AuthenticatedView pages.

I could do onTap: () => context.go("/profile"), but it will redirect the user to the profile page instead of remaining on the home page and it is not what I want.

That is my code:

import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';


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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // configure amplify
  }

  static final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (BuildContext _, GoRouterState __) {
          return const HomeScreen();
        },
      ),
      GoRoute(
        path: '/profile',
        builder: (BuildContext _, GoRouterState __) {
          return const AuthenticatedView(child: Center(child: Text('Profile')));
        },
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp.router(
        routerConfig: _router,
      ),
    );
  }
}

/// The home screen
class HomeScreen extends StatelessWidget{
  /// Constructs a [HomeScreen]
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My home'),
        actions: <Widget> [
          PopupMenuButton(
            position: PopupMenuPosition.under,
            child: const CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                backgroundColor: Color(0xffE6E6E6),
                radius: 30,
                child: Icon(
                  Icons.person,
                  color: Color(0xffCCCCCC),
                ),
              )
            ),
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Routes>>[
              PopupMenuItem<Routes>(
                value: Routes.profile,
                onTap: ???????,
                child: const Text('Log in'),
              ),
              PopupMenuItem<Routes>(
                value: Routes.profile,
                onTap: ???????,
                child: const Text('Sign up'),
              )
            ],
          ),
        ]
      ),
      body: Center(
        child: Text('This is my home, anonymous users can view it.')
      ),
    );
  } 
}
0

There are 0 answers