QR Code-Enabled Form Submission Component for Flutter: Simplifying Digital Interactions

[Taherabharmal]

Description:

Recognizing the discomfort some users face with digital tools, this project aims to develop a Flutter-based UI component tailored to streamline form submission processes. The core concept involves generating a printable form with a unique QR code assigned to each form instance. Users can then fill out the printed form manually and scan the QR code using the associated Flutter app. Upon scanning, the app automatically retrieves the corresponding form, populates the fields with the user-entered data, and presents it for review and submission. By integrating QR code technology with Flutter-based applications, this component seeks to bridge the gap between traditional paper-based interactions and digital platforms, making form submission more accessible and user-friendly for all individuals.

Goals

• Implement QR code generation functionality so each form can be associated with a unique QR Code
• Automated generation of PDF format of form that may be printed by users. The PDF should contain the unique QR Code.
• Implement QR code scanning capability within the Flutter App
• Integrate QR code scanning with form retrieval and data population.

Expected Outcome

• Design and implement user-friendly screens/end points and interactions within the Flutter framework to scan QR codes. Implement QR code scanning functionality using the device's camera, allowing users to scan printed forms.
• Use DIGIT’s QR Code functionality for generating unique QR codes within the Flutter app.
• Design and build UI components to automatically convert flutter forms into printable PDF Forms. All validations for the fields to be printed as part of the pdf form to guide users to fill the form effectively.
• User should be able to view scanned data in a filled form and make edits where necessary
• Errors should be highlighted once data is scanned
• Develop logic to populate form fields with data retrieved from scanned forms. Implement mechanisms to match filled data to master data in forms. Ensure proper mapping of data to corresponding fields in the form UI.
• Provide clear feedback to users throughout the process, including confirmation of successful QR code scans, data population, and form submission.
• Create APIs to facilitate communication between the Flutter frontend and backend systems.
• Define endpoints for retrieving form data based on QR code scans and submitting completed forms.
• Should support local languages through integration with translation services/inhouse localization capabilities

Acceptance Criteria

• Each form instance must be associated with a unique QR code.
• The QR code generation process should be automated and seamlessly integrated into the Flutter UI component.
• The Flutter UI component should provide functionality to automatically generate a PDF format of the form.
• The generated PDF should include the unique QR code associated with the form.
• The Flutter app must include QR code scanning functionality using the device's camera.
• Users should be able to scan printed forms containing the unique QR code.
• Upon scanning a QR code, the app must retrieve the corresponding form data.
• The scanned data should populate the form fields within the Flutter UI automatically.
• Users should be able to view the scanned data presented in a filled form within the app.
• Mechanisms for editing filled data within the form should be provided where necessary.
• Errors encountered during data scanning, retrieval, or population must be clearly highlighted within the app interface.
• Users should receive prompt feedback on any errors encountered during the process.
• The Flutter app must implement mechanisms to match filled data from scanned forms with master data and Ensure accurate mapping of filled data to corresponding fields in the form UI.
• APIs must be created to facilitate communication between the Flutter frontend and backend systems.

Implementation Details:

• Libraries/3rd Party tools may be used but must be open-source
• DIGIT uses Java Spring Boot in the backend and Flutter for the frontend for mobile applications
• Staging environment of DIGIT will be provided and an existing form from a product may be used.

Mockups / Wireframes To be created by the selected contributor with support from DIGIT product manager

Product Name DIGIT

Project Name QR Code-Enabled Form Submission Component for Flutter: Simplifying Digital Interactions

Organization Name: eGovernments Foundation

Domain Public Services

Tech Skills Needed: Flutter, Java Spring Boot

Mentor(s) Naveen J

Complexity High

Category Feature

Sub Category API, Frontend, Backend,

[bruno-noir]

Hello Team, I am a prefinal year student at IIT Kharagpur, and I had the opportunity to complete a project under DIKSHA as part of C4GT '23 last year. This project sparked my interest in user-friendly solutions that merge traditional and digital interactions. I am eager to contribute to the QR Code-Enabled Form Submission Component for Flutter project. Before diving in, I have a few initial queries: Is there an existing codebase available?, Is there a channel to communicate with mentor? Additionally, where should I send my proposal for review before the final submission?

[rupss14]

Hello @Taherabharmal , I hope this message finds you well. I recently came across this project aimed at streamlining form submission processes using Flutter and QR code technology. I was immediately captivated by the project's goal of making digital tools more accessible and user-friendly, particularly for individuals who may face discomfort with such technologies.

As someone with experience in Flutter development and a strong interest in contributing to projects that have a positive impact on user experiences, I would love to become a part of your team. The concept of generating unique QR codes for each form instance and seamlessly integrating QR code scanning with form retrieval and data population resonates with me, and I'm eager to lend my skills and enthusiasm to this endeavor.

Could you please provide me with more information on how I can get involved with the project and potentially connect with a mentor for guidance? I am eager to learn more about the project's goals, current progress, and how I can contribute effectively.

Best regards, Rupali Tripathy (BTech, pre-final year student)

[J0SAL]

Hi @naveen-egov. Would love to work on this project

[AbhimanyuSamagra]

Do not ask process related questions about how to apply and who to contact in the above ticket. The only questions allowed are about technical aspects of the project itself. If you want help with the process, you can refer instructions listed on Unstop and any further queries can be taken up on our Discord channel titled DMP queries. Here's a Video Tutorial on how to submit a proposal for a project.

[Vikas-Konaparthi]

Could you provide more details on how users will fill out the printed form manually? Once the QR code is scanned, how does the app determine the corresponding form instance and retrieve the associated data? After scanning the QR code, how does the app populate the fields with the user-entered data from the printed form?

[anmolzan]

Hello @naveen-egov I am a B.Tech final year student from SATI vidisha. As a cross platform app development framework Flutter always draw my attention with help of this project i would like to follow my passion for this tech . I am having experience of developing a ecom app project with flutter but i am very curious to contribute in this full fledge project with API and QR code . I would love to contribute in this project because i will help to sharpen my knowledge of flutter and learn new tech as a challenge. Please give me this opportunity to work on it i will try my best to add more value on this. Thanks and Regards Anmol Jain

[goyal02aditi]

Hello Team I am a computer science student with proficiency in flutter and good knowledge in backend. I found the project QR Code-Enabled Form Submission Component for Flutter very innovative and strongly aligning with my capabilities. I would love to work on it and make some meaningful contributions. Before moving forward, I have a couple of questions since I'm participating in C4GT’s DMP event for the first time and wish to familiarize myself more on how things work on the other end :-

1. How many teammates can I expect working on a project
2. Will the backend and frontend be tackled by different set of people or everyone is expected to work on both aspects
3. Would there be a separate platform to communicate with my team and the mentors, apart from the common discord portal
4. Whom should I connect with regarding the technical queries about the project details

Thanks for your consideration, looking forward to be part of the team asap! Warm regards Aditi Goyal

[common-cold]

@Taherabharmal is there any slack channel for digit or any discussion channel available to discuss project ideas and doubts

[VIDHIGUPTA17]

Subject: Request to Contribute to QR Code-Enabled Form Submission Component Project

Dear Naveen J and Taherabharmal,

I hope this message finds you well. My name is Vidhi Gupta, and I am interested in contributing to the "QR Code-Enabled Form Submission Component for Flutter: Simplifying Digital Interactions" project under eGovernments Foundation.

I have a strong background in Flutter development and API integration, and I am excited about the potential impact of this project. I am eager to bring my skills to the team and contribute to enhancing digital interactions.

Could you please provide more details on how I can start contributing and any specific areas where my expertise might be most beneficial?

Thank you for considering my request. I look forward to the opportunity to discuss how I can contribute to this meaningful project.

[Sumsum1231]

issue link https://github.com/egovernments/egov-rnd/issues/22

Weekly Learnings & Updates

Week 1

• What is OCR Model? link
• AWS Textract Model and usage of it. link
• Usage in our Project is zero because its cloud based and our project demands for Offline Model Usage.

Week 2

• Google Tesseract OCR open source
• Working with the Flutter Application using Flutter_Tesseract_ocr
• Google ML Kit Open Source link

Week 3

• What is AWS Textract link
• Working with Flutter using Python boto3 connection.
• Working of Flask Server for communication between Python and Flutter.

Week 4

• Python connection to AWS suing boto3 library.
• Flutter Demo UI for Demo Application.

Week 5

• Flutter libraries like image_picker, http etc, usage.
• Flutter Application with proper UI and selection of Images from on device gallery.

Week 6

• Python with Flask Server to communicate with Flutter Application.
• Integration of Python and Flutter with Flask Server.

Week 7

• Demo Application with Successful Scanning of Text in French and Portuguese language.
• Documentation of Demo Application.

[hitesh-bhatnagar]

cam i still contribute to this open source project