Loginscreen.dart
Screen Description:
Code:-
import ‘package:flutter/material.dart’;
import ‘package:firebase_auth/firebase_auth.dart’;
import ‘package:cloud_firestore/cloud_firestore.dart’;
import ‘package:footer/footer.dart’;
import ‘package:footer/footer_view.dart’;
import ‘package:tis_root01/Screens/add_member.dart’;
import ‘package:tis_root01/common/CommonFooter.dart’;
import ‘package:tis_root01/dash.dart’;
import ‘package:tis_root01/common/CommonFooter.dart’;
import ‘../common/CommonHeader.dart’;
// The main class representing the login screen.
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key});
@override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
String? otpCode;
User? user;
String verificationId = ”;
FirebaseFirestore _firestore = FirebaseFirestore.instance;
final _phoneController = TextEditingController();
final _codeController = TextEditingController();
final FirebaseAuth _auth = FirebaseAuth.instance;
// Function to initiate phone number verification.
Future<void> loginUser(String phone, BuildContext context) async {
await _auth.verifyPhoneNumber(
phoneNumber: phone,
timeout: Duration(seconds: 60),
verificationCompleted: (PhoneAuthCredential credential) async {
Navigator.of(context).pop();
try {
final result = await _auth.signInWithCredential(credential);
final User? user = result.user;
if (user != null) {
// Handle successful login here, you can navigate to any screen you want.
print(“Logged in as ${user.uid}”);
} else {
print(“Error”);
}
} catch (e) {
print(“Error verifying code: $e”);
}
},
verificationFailed: (FirebaseAuthException exception) {
print(exception);
},
codeSent: (String verificationId, [int? forceResendingToken]) {
// Show a dialog for entering the verification code.
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: Text(“Enter the verification code”),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextField(
controller: _codeController,
),
Text(
‘By verifying, accepting the terms and conditions’,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 10,
),
)
],
),
actions: <Widget>[
ElevatedButton(
child: Text(“Verify”),
onPressed: () async {
final code = _codeController.text.trim();
final PhoneAuthCredential credential = PhoneAuthProvider.credential(
verificationId: verificationId,
smsCode: code,
);
try {
final result = await _auth.signInWithCredential(credential);
final User? user = result.user;
if (user != null) {
// Navigate to the dashboard upon successful login.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Dash(user: user),
),
);
} else {
print(“Error”);
}
} catch (e) {
print(“Error verifying code: $e”);
}
},
)
],
);
},
);
},
codeAutoRetrievalTimeout: (String verificationId) {
// Handle the timeout if needed.
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
// App bar with a preferred size.
appBar: PreferredSize(
preferredSize: const Size.fromHeight(80.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[Color.fromRGBO(233, 30, 99, 1), Colors.blue],
),
),
child: const CommonHeader(),
),
),
body: FooterView(
children: [
Center(
child: Container(
padding: EdgeInsets.all(32),
child: Form(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
“LOGIN”,
style: TextStyle(
color: Colors.blue,
fontSize: 36,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 16),
TextFormField(
controller: _phoneController,
decoration: InputDecoration(
labelText: ‘Phone Number’,
prefix: Padding(
padding: EdgeInsets.all(4),
child: Text(‘+91’),
),
),
maxLength: 10,
keyboardType: TextInputType.phone,
),
SizedBox(height: 16),
Container(
width: double.infinity,
child: ElevatedButton(
child: Text(“LOGIN”),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.all(16),
),
onPressed: () {
// Concatenate ‘+91’ with the entered phone number.
final phoneNumber = ‘+91’ + _phoneController.text.trim();
// Initiate phone number verification.
loginUser(phoneNumber, context);
},
),
),
],
),
),
),
),
],
footer: new Footer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
‘TISROOT(0.0.1v),’,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontSize: 10,
),
),
SizedBox(height: 1), // Add some spacing
Text(
‘a cloud ERP “MAKEININDIA” software of Trust Infosys Incorporation,’,
style: TextStyle(
fontSize: 10,
),
),
Text(
‘Govt. of India accredited STARTUPINDIA venture.’,
style: TextStyle(
fontSize: 10,
),
),
],
),
),
flex: 1,
),
);
}
}
Code description:
In the above code, the main class is for the login screen. It’s a StatefulWidget because it maintains some state.
This is the state class _LoginScreenState that defines the behavior and appearance of the login screen.
It includes the following components:
- Variables and Controllers: The code comments indicate that there are variable and controller declarations related to phone number verification. However, the actual code for these variables and controllers is not provided.
- Firebase Declarations: Declarations for Firebase Authentication (_auth) and Firestore (_firestore) instances are made.
- build Method: This method defines the entire UI layout of the login screen.
- App Bar: A custom app bar with a gradient background is configured using PreferredSize. It includes a common header widget.
- Body: The body of the screen contains a centered login form.
- “LOGIN” Title: A large “LOGIN” title with custom styling is displayed.
- Phone Number Input Field: A text input field for entering the phone number is provided. It includes a prefix for the country code.
- “LOGIN” Button: An elevated button labeled “LOGIN” is used to initiate phone number verification. It triggers the loginUser function when pressed.
- Footer Section: The footer section displays version information and information about the application, including its accreditation as a STARTUP INDIA venture.
- loginUser Function: The loginUser function is mentioned in the code, but its implementation is not provided in this snippet. It’s responsible for initiating phone number verification using Firebase Authentication.
The loginUser function’s implementation is also expected to handle Firebase Authentication, but it’s not detailed here. The code serves as a foundation for a login screen with phone number verification, which can be extended with Firebase-related logic.
Audit: