👋 Login Screen
Build a login screen with Anonymous sign in.
Anonymous Auth
Enable anonymous auth in the Firebase console, then implemment it in the auth service.
services/auth.dart
import 'package:firebase_auth/firebase_auth.dart';
class AuthService {
// ..
/// Anonymous Firebase login
Future<void> anonLogin() async {
try {
await FirebaseAuth.instance.signInAnonymously();
} on FirebaseAuthException {
// handle error
}
}
Future<void> signOut() async {
await FirebaseAuth.instance.signOut();
}
}
Login Screen
Create a login screen and resuable button to support multiple login methods.
login.dart
class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
const FlutterLogo(
size: 150,
),
Flexible(
child: LoginButton(
icon: FontAwesomeIcons.userNinja,
text: 'Continue as Guest',
loginMethod: AuthService().anonLogin,
color: Colors.deepPurple,
),
)
],
),
),
);
}
}
class LoginButton extends StatelessWidget {
final Color color;
final IconData icon;
final String text;
final Function loginMethod;
const LoginButton(
{super.key,
required this.text,
required this.icon,
required this.color,
required this.loginMethod});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: 10),
child: ElevatedButton.icon(
icon: Icon(
icon,
color: Colors.white,
size: 20,
),
style: TextButton.styleFrom(
padding: const EdgeInsets.all(24),
backgroundColor: color,
),
onPressed: () => loginMethod(),
label: Text(text, textAlign: TextAlign.center),
),
);
}
}
Sign Out
Use the signout method in the Profile screen.
profile.dart
import 'package:flutter/material.dart';
import 'package:quizapp/services/auth.dart';
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile'),
),
body: ElevatedButton(
child: Text('signout'),
onPressed: () async {
await AuthService().signOut();
Navigator.of(context)
.pushNamedAndRemoveUntil('/', (route) => false);
}),
);
}
}