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

[naveen-egov]

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,

[Sumsum1231]

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.