I'm writing a Flutter app and using the following packages:
go_routerAmplify 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.
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.')
),
);
}
}
