Process behind each Screens :
Screen 1:
Screen Description:
Man hours:15 mins
There are two distinct routes within the Screen1, each functioning as separate pages. These routes are associated with buttons that facilitate navigation to different screens. The first button allows existing users to access the login screen, enabling them to authenticate their accounts. On the other hand, the second button leads to the sign-up screen, which is specifically designed for new users who wish to create an account.
By utilizing these buttons, users can seamlessly navigate between the login and sign-up screens, facilitating a smooth user experience within the application. The presence of these two routes enhances the versatility and accessibility of the system.
In the given code snippet, we import all the necessary packages to establish a connection between Firebase and Flutter. We have also defined two routes for navigation from Screen1 to Screen2 and Screen3. Additionally, the buttons on the screen are aligned vertically at the center. The title of the application displayed on the first screen is set as “Qr App”.
Code:
import ‘package:flutter/material.dart’;
import ‘package:firebase_core/firebase_core.dart’;
import ‘package:qr_code02/screen2.dart’;
import ‘package:qr_code02/screen3.dart’;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘QR Code Generator’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const LoginPage(),
routes: {
‘/screen2’: (context) => const screen2(),
‘/screen3’: (context) => const screen3(),
});
}
}
class LoginPage extends StatelessWidget {
const LoginPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘QR APP’),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, ‘/screen3’);
},
child: const Text(‘Login In’),
),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, ‘/screen2’);
},
child: const Text(‘SIGN UP’),
),
],
),
),
),
);
}
}
Audit:
Screen2:
Screen Description:
This screen provides a platform for new users to create an account within the app. Upon successful creation, they are directed to Screen 4 for further interactions.
On this screen, users are required to input three fields: their name, phone number, and OTP (One-Time Password). A dedicated button is provided to generate the OTP corresponding to the entered mobile number. Once the OTP is generated, users can enter it into the designated OTP field for verification. After successful verification, the verified number is securely stored in Firebase, and users are seamlessly redirected to their newly created dashboard.
Additionally, this screen includes the terms and conditions as well as the privacy policy that users are required to review and acknowledge before proceeding with the registration process. It is essential for users to acknowledge their understanding and acceptance of these terms in order to successfully register.
Code:
Audit:
Screen3:
Screen Description:
Screen3 serves as a dedicated login interface for existing users, offering them the convenience of generating a QR code. Users are required to input their phone number, which undergoes a thorough validation process. Upon successful validation, the app seamlessly guides the user to the home screen, granting access to all app features and functionalities. This streamlined process ensures a hassle-free experience for users, allowing them to effortlessly utilize the app’s services. By simplifying the login and QR code generation process, Screen3 enhances user satisfaction, promoting continued engagement and utilization of the application’s capabilities. Overall, Screen3 significantly contributes to a user-friendly and efficient app experience for existing users.
Code:
Audit:
Screen4:
Screen Description:
In this screen, users have the ability to generate a customized QR code based on their preferred color selection. The screen features a single text field where users can enter the desired input for which they want the QR code to be generated.
Additionally, users can choose from a range of colors and apply them to their generated QR code. This screen provides a user-friendly interface for creating QR codes, enhancing user engagement and convenience.
Furthermore, the generated QR code and its corresponding input are securely stored in Firestore. This ensures that the data is preserved and can be retrieved or utilized for future reference or analysis. By storing the QR code and associated input in Firestore, the application maintains a reliable and persistent record of the generated codes, allowing for seamless access and management of the data.
Code:
Audit:
Screen5:
Screen description:
This screen presents the user with the generated QR code and offers the convenient functionality of sharing it across multiple social media platforms. Two distinct menu options are available: one for creating a new QR code and the other for viewing the existing QR code. Users can easily explore the application’s versatility by generating new QR codes or accessing their previously created ones. This user-friendly approach streamlines the QR code management process and enhances the overall experience. Whether users want to share their QR codes with friends on social media or create new ones for various purposes, this screen provides a seamless and efficient platform for achieving their objectives.
Code:
Audit:
Screen6:
Screen Description:
In this screen, users are provided with versatile facilities that enable them to effortlessly view their generated QR codes and share their previously created ones. This advantageous feature offers users the freedom to access and review their QR codes at their convenience, promoting enhanced organization and accessibility. By allowing users to share QR codes with ease, the app facilitates seamless information exchange among individuals and groups. This user-centric approach enhances overall user satisfaction, empowering them with efficient QR code management tools. Whether users wish to revisit important QR codes or effortlessly share them with others, this screen optimizes user experience and ensures a hassle-free process for both viewing and sharing QR codes.
Code:
Audit: