web analytics

How Flutter Mobile Application For Student’s Project Looks Like (Part 4)

Detail of the Mobile Application

Name of Project: Tabayyun Tool, A Quranic Directory
Platform: Flutter 3.1.0
Audio: Ali Hajjaj AlSuesy
Application type: Characterization of topics in Quran
Created on: 15 June 2022

Related Article:


This chapter consists of a survey on the Tabayyun Tool mobile application system, results of the proposed system where it contains the code, and the interface development of the mobile apps, which will be further explained in the next subsections.


 A survey was conducted to investigate several issues regarding the Tabayyun Tool mobile application system in general where a total of 20 respondents were involved in this survey. Figure below illustrates how familiar the public is with the application that arranges and categorizes the verse of the Quran according to the real-life topic. The pie chart shows that 70% of the respondents didn’t know or are familiar with this type of application, whereas only 10% have heard about it. The remaining 20% have heard about the term but have no clear idea of what it means.

The Public’s Familiarity with the Concept of the Tabayyun Tool System.

Subsequently, figure below shows the source where the public heard about the concept of the Tabayyun Tool system if they are familiar with it. The biggest percentage, which is 50%, shows that the public learns the term from their friends, whereas 37.5% of them learn it from their family. A total of 12.5% of the respondents have chosen that they came across the term from other sources. However, no respondents chose social media and Play Store/AppStore as their answers, due to not enough exposure to this type of application from other developers.

The Medium where the Public Knew about the Concept of the Tabayyun Tool

Furthermore, figure below displays the result of the public’s opinion on whether the Tabayyun Tool system, in general, is helpful. To no one’s surprise, all of the respondents answered ‘yes’. Thus, the result proves that this system is indeed useful and convenient, and well-received by society.

Survey if Society Thinks that the Tabayyun Tool Application is Helpful.

Last but not least, Figure below displays the result of whether the public would be more interested to download and explore the mobile application. Astoundingly, 90% of the respondents have chosen ‘yes’ as their answer. This further solidifies the relevance of the proposed system, as attracting more users while offering interactive and user-friendly features that can help them to learn more about the content of our holy book, the Quran. However, 10% of the public have chosen ‘maybe’ as their answer which explains that this system is only targeted at certain people that want to learn deeply about the Quran. 

The Interest to Explore and Download the Proposed Mobile Application.

Therefore, based on the results of the survey obtained from the public shows that the proposed system will be beneficial and can solve the issues faced by the existing systems. Thus, there is a relevancy to implement this project to overcome previous shortcomings.


First and foremost, when the user opens the app, they will be moved to the introduction screen where the user can grasp what is Tabayyun Tool application is at a glance. The user also has an option to skip all four pages of the introduction screen so that they can straight to the main interface of the application. 

Introduction Screen of the Mobile Application

After the brief introduction of the application, the user will be navigated to the main interface where all the topics of the Quran will be displayed. The user can scroll through all the available topics, and the topics are written in two languages, which are English and Malay since this app is for people in Malaysia. The number of verses for each topic is also displayed to give the user a brief idea of the topic. For example, as shown in figure below, there are 22 verses available in the Quran that mentioned about prayer. 

The Main Interface of the Application

From the main interface, we can also switch from light mode to dark mode to ease the user’s eye, especially at the night. This mode can be toggled at the top left of the screen and the screen will turn to dark mode. To turn back into the light mode, the user simply needs to click back on the mentioned button as shown in figure below.

Dark Mode 

Furthermore, the user can search the topics from the search bar at the top of the main page. This is to make users’ lives easier by not wasting time scrolling for available topics on the main page and going to the search bar by typing in the required topics. The system will show a suggestion corresponding to the user’s input at that time. As shown in the figure below, when the user types ‘fri’ in the search bar, the system instantly finds the topics that start with the letter ‘fri’ regardless of the case of the letter. 

Search Function 

Even when the user puts the letter that the word does not start with that specific letter, as long as that word has that letter, the system will try to find and recognize what topics are associated with that letter. For example, as shown in figure below, when the user puts the word ‘ed’, any topic that has that word whether from the start, middle, or end of the word will be displayed. This is to ensure the user gets to search for what they desired if somehow they mistype the keyword. 

How the Search Function Works

Next, when the user chooses to click one of the topics, all verses that were related to that topic will be displayed. The user needs to scroll to read each verse that has been displayed on that page. From each verse, the user also can read the translation in both languages which are English and Malay. Note that the font of the translation in Malay is in italic to differentiate between these two languages. This feature will make the user easier to refer to and understand the context of the verse. This interface also includes light and dark modes as shown in figure below.

The Topic’s Page

The audio of each verse was included. The user just needs to click the audio icon beside the name of the surah as shown in figure below to play the verse. The verse is recited by Ali Hajjaj AlSuesy. The reason why this reciter was chosen is because of the clarity of his voice and that the recitation is neither too short nor too long, which is suitable for all types of users who use this application. From the figure below, the number of the surah, the number of the verse, and the emoji representing the surah were included to give a better user experience.

The Audio icon, Name of the Surah, and the Number of the Surah and Verse 

Tabayyun Tool mobile application also can be run on both operating systems which are Android and IOS. That is why Flutter was chosen as the platform for app development where the Flutter already provided the source library for Android and IOS as shown in figure below. The system can be run on an iPhone X emulator as shown in figure belowwhich proves that this system applies to both operating systems so that the availability of the system is wider. 

Source Library for Android and IOS
Tabayyun Tool on iPhone X


A survey after testing the mobile application was conducted to investigate the feedback of the users regarding the Tabayyun Tool mobile application where 15 respondents of the IIUM community were involved in this survey. Figure below illustrates how familiar the public is with the concept of the Tabayyun Tool prior to using the Tabayyun Tool application. The pie chart shows only 13.3% of the public knew about the mentioned topic, whereas most of the respondents which are 86.7% have never heard about it. This result is almost the same as the preliminary result where most people doesn’t familiar with the concept of the system. 

The Public’s Familiarity with the Concept of the System Before Using the Tabayyun Tool Application

Next, figure below shows whether the users have used any other Quranic directory mobile application system. Almost all respondents voted no, indicating that they have never come across such an application. This finding shows that the Tabayyun Tool mobile application is innovative and is tackling the right medium to be utilized.    

Respondent’s experience using other Quranic directories prior to Tabayyun Tool Application

Furthermore, figure below displays the feedback of the users about the performance of Tabayyun Tool mobile application. It can be seen that the responses were very positive, where 73.3% voted it to be excellent, and 26.7% viewed the application to be good, with some room for improvement. No users that have tested the mobile application have considered it to be not good, which is proving to be a well-executed mobile application.

The Performance of the Tabayyun Tool Application

Subsequently, figure below shows the response from the users regarding which aspect in the system should be improved. 66.67% of the 15 respondents have voted that no improvement should be done further indicating that they are satisfied with the Tabayyun Tool’s appearance and features. Some of them vote for application features which are about 20%, whereas 6.7% of the users have voted for improving the performance and user interface. The improvements of both features and interface of the mobile application can be analyzed in future works.

The Percentage of Which Aspect of the Tabayyun Tool Application Should be Improved

Next, figure below displays the result of whether the users think that the implementation of the Tabayyun Tool Mobile Application system is more efficient compared to the existing systems which are available in the Play store. The result is all of the users think that this mobile application is a better choice than the current application in the digital store, thus further solidifies that the development of this mobile application is indeed helpful for the society. 

The Result of whether the Tabayyun Tool is Beneficial

Lastly, figure below displays whether the respondents support the usage of the Tabayyun Tool mobile application system if it is available, and all of the respondents voted ‘Yes’ which clearly shows that this mobile application has managed to gain the interest of the users. This clearly shows that the developed mobile application has the potential to replace all of the existing Quranic directory systems, which is one of the goals of this project.

The Result of whether Tabayyun Tool will be Utilized if It Is Available

Therefore, based on the results of the feedback obtained from the respondents that have tested the mobile application, it can be concluded that the developed Tabayyun Tool mobile application has fulfilled its duty to solve the problems identified while analyzing existing systems, even though there is always room for improvements in the application. Most importantly, comparison with the benchmark paper mentioned in part 2 which is from Tayan et al. [16] has been made after the testing of the Tabayyun Tool mobile application to assess the improvement and the upgrade achieved by the Tabayyun Tool mobile application. One of the most significant advantages of the Tabayyun application compared to the benchmark paper and existing applications in Play Store and App Store is that the Tabayyun Tool application can be run on both Android OS and iOS, whereas the existing application can only be run on Android OS. Next, Tabayyun Tool mobile application managed to display the upcoming as accomplished in the benchmark paper and current application in the digital store. However, Tabayyun Tool has successfully displayed multiple information such as audio of each verse, translation in Malay and English, search button, and dark mode which is not present in the benchmark paper. Thus, it can be said that the Tabayyun tool application managed to take advantage of applying a similar application as most of the benchmark papers, yet more interactive and informative features are able to be utilized by the Tabayyun Tool which is failed to be achieved by the benchmark paper, which is also one of their biggest weaknesses. Therefore, Tabayyun Tool mobile application has surely surpassed the existing application and benchmark paper’s application in most aspects.