SLC S23W4 - Real-Time Accessibility Feedback App – Implementing Language Translation in Flutter

mohammadfaisal (75)in #techclub-s23w4 • 3 days ago

Hello everyone!

I warmly welcome you to the third week of the Steemit Learning Challenge and especially I invite you in the Technology and Development Club where you can share and learn tech.

Designed with ^Canva

I am working on a real-time accessibility feedback application. Last week we developed the issue tracking, admin dashboard, and comment system screens. I made the complete design of the screen while allowing the user to see the submitted reports and the status of the issue. The admin dashboard where the admin can see and view the details of the issue while having the facility to update the status of the issue. The students and admin can interact with each other through the comment section. Today I will continue to develop the next feature of this application which is the language translation.

The language translation feature will have the following attributes:

Detection of language
List of the languages for the translation
Text to speech

This screen will have the following design elements to make it look better:

App Bar
Text input section
Input clear button
Language detection section
List of languages and translation button
Translation output section
Speech button inside the output section

Let us build user interface of the translation screen first so that we can implement the functionality accordingly.

This is the app bar of the screen which has gradient background colour with the combination of two colours. The text is in the center of the app bar with the white colour which is making it look more pretty.

Then in the body of the screen I have used a container with the gradient colour for the consistent UI. This is the first design element of the translation screen. As the complete interface is vertical so I have used a column widget. At the top in the center I have placed an icon to make it look like a translation screen.

Then there is the text area to get the input of the language for the translation. I have used Stack to place the text field at the bottom and then the icon to clear the input field. I have placed the clear button at the top and right side of the text input area. When the user will press this button then the text field which is getting input from the user will be cleared.

Right after the text field I have used a text element which is dynamic and display the name of the language which is written in the input field. It detects the input language and display it on the screen.

I have used an API to detect the language type. The API which I am using is from this free source website https://detectlanguage.com/. It allows to detect 164 different languages. It works very smoothly and very easy to integrate in the system. It offers ready made code some platforms but in flutter I can use json data to access this API in my application.

Here you can see I have written the code to cal the API by using http request. For the working it needs authorization to our API key which is unique for each account. I have already made my account and defined the api key in a variable named apiKey. After authorization it is accessing the json data from the api.

Then at the end it checks the received response from the api. If the response is valid then it returns the detected language name and if that language is not supported by the api then it returns unknown language. If the connection is not stable or if there is any error in the detection then it notify the user by displaying the appropriate message failed to detect language.

These are both important elements in this translation screen. The first holds the list of the languages for the translation. The second is the translation button which is used to translate teh input text to the selected languages from the list of languages. This translation is carried out with the help of the flutter package translator. It is very efficient and free to use and is available for everyone. It supports many languages and we can define the list of the languages as I have defined in the application.

This is the translate text functions which accepts the text from the input field and then by using the translate packages it translates the text and returns the translation in the translated text variable. It also handles the error of translation and shows the message in the bottom of the screen.

This is the output section. It is designed with the help of the Stack and the text to speech icon button is displayed on the top right side of the container. I have used two icons using the ternary operator. This icon button checks if _isSpeaking is true then it displays stop button which allows the user to stop the text to speech. And if _isSpeaking is false then it displays the volume_up button which allows the user to start text to speech. When this button is pressed then the speakTranslatedText is called and it is offered by the flutter package flutter_tts.


French Translation	Hindi Translation

Urdu Translation	Spanish Translation

I am working on this project and It will have a lot of more features but so far I have shared the login and sign up screens with complete user authentication in week 1, issue page and location picker screens with their user interface as well as with the Firebase Authentication, Cloudinary Storage and Firestore Database in week 2, in the week 3 I designed reports tracking page, admin dashboard, issue details page with comment section and made all the pages working. Today for thsi week I have developed complete language translation feature of this application which detects the language automatically and translates from the selected languages. The user can listen to the translated text as well.

GitHub Repository

In this GitHub repository I have shared login_screen.dart, signup_screen.dart, splash_screen.dart, issue_page.dart, and location_picker_page.dart and other screens for the learning purpose only and as I will progress I will share the other files as well.

What I have learnt

I have learnt these things while working on the project:

Firebase authentication and Firestore integration
Handling user inputs and validation
State management in Flutter while managing the user session and controlling the user inputs through controllers.
Enhanced user experience and UI design with the implementation of the multi-step sign up process. The use of the gradient in the layout to make it look more attractive.
Error handling and debugging. I managed the error handling of the duplicate accounts, invalid credentials and empty fields.
Image uploading and accessing it via Cloudinary.
Storing the data in firestore database.
Implementation of OpenStreetMap and Nominatim API.
Tracking of the reports.
Handling comment section on the basis of the user role.

What can you share in the club?

Our club is all about technology and development including:

Web & Mobile Development
AI & Machine Learning
DevOps & Cloud Technologies
Blockchain & Decentralized Applications
Open-source Contributions
Graphic Design & UI/UX

Any posts related to technology, reviews, information, tips, and practical experience must include original pictures, real-life reviews of the product, the changes it has brought to you, and a demonstration of practical experience

The club is open to everyone. Even if you're not interested in development, you can still share ideas for projects, and maybe someone will take the initiative to work on them and collaborate with you. Don’t worry if you don’t have much IT knowledge , just share your great ideas with us and provide feedback on the development projects. For example, if I create an extension, you can give your feedback as a user, test the specific project, and that will make you an important part of our club. We encourage people to talk and share posts and ideas related to Steemit.

For more information about the #techclub you can go through A New Era of Learning on Steemit: Join the Technology and Development Club. It has all the details about posting in the #techclub and if you have any doubts or needs clarification you can ask.

Our Club Rules

To ensure a fair and valuable experience, we have a few rules:

No AI generated content. We want real human creativity and effort.
Respect each other. This is a learning and collaborative space.
No simple open source projects. If you submit an open source project, ensure you add significant modifications or improvements and share the source of the open source.
Project code must be hosted in a Git repository (GitHub/GitLab preferred). If privacy is a concern, provide limited access to our mentors.
Any post in our club that is published with the main tag #techclub please mention the mentors @kafio @mohammadfaisal @alejos7ven
Use the tag #techclub, #techclub-s23w4, #country, other specific tags relevant to your post.
In this first week's #techclub you can participate from Monday, March 10, 2025, 00:00 UTC to Sunday, March 16, 2025, 23:59 UTC.
Post the link to your entry in the comments section of this contest post. (Must)
Invite at least 3 friends to participate.
Try to leave valuable feedback on other people's entries.
Share your post on Twitter and drop the link as a comment on your post.

Each post will be reviewed according to the working schedule as a major review which will have all the information about the post such as AI, Plagiarism, Creativity, Originality and suggestions for the improvements.

Other team members will also try to provide their suggestions just like a simple user but the major review will be one which will have all the details.

Rewards System

Sc01 and Sc02 will be visiting the posts of the users and participating teaching teams and learning clubs and upvoting outstanding content. Upvote is not guaranteed for all articles. Kindly take note.

Each week we will select Top 4 posts which has outperformed from others while maintaining the quality of their entry, interaction with other users, unique ideas, and creativity. These top 4 posts will receive additional winning rewards from SC01/SC02.

Note: If we find any valuable and outstanding comment than the post then we can select that comment as well instead of the post.

Best Regards
Technology and Development Club Team