Building an Olfactory Detection App with Flutter opens a world of possibilities for enhancing our sense of smell through digital innovation. By harnessing the power of Flutter’s cross-platform framework, developers can create an intuitive and immersive app that enables users to explore and detect various scents in a virtual environment. This groundbreaking technology combines the art of fragrance with the convenience of mobile devices, revolutionizing the way we perceive and interact with the world of aromas.
The client approached us with a request to develop an app for Olfaction Detection that could run on both Android and iOS platforms. Following a thorough analysis of the project requirements, we suggested the use of Flutter after conducting a feasibility check to ensure its suitability. Once we were confident that Flutter would meet all the necessary criteria and cover all use cases, we recommended this framework to the client.
It is important to note that the project’s requirement elicitation phase ran for two months. The two-month requirement elicitation phase yielded a thorough and deep understanding of the client’s demands, which was essential to the successful creation of a high-quality solution using the Rapid Application Development methodology made possible by Flutter.
The objective was to address the issues, determine whether we have any sub-issues, gain an understanding of the current solutions, and to recommend the most appropriate technology. The creation of the app entailed many tasks, some vital and some not so important. A brief categorization follows:
It was crucial to establish communication with the edge device without delay, as real-time applications have a very low tolerance for delays.
To achieve the goals, a solution was developed that would allow our application to efficiently communicate with the edge device and perform tasks in real-time. Initially, there were two possible solutions for connecting the edge device to the mobile application: using the mobile device as a hotspot and connecting the edge device to it, or using the edge device’s hotspot and connecting the mobile device to it. However, finding the IP address of the device was tricky. Android (API >29) does not allow fetching the IP of the device that is connected to its own hotspot. While I could have found it out by rooting our device, I decided not to go that route.
Before going on to the following phase, we will look at a few issues we have run across and how we have resolved them. Moving on to the second option, everything was running smoothly until I noticed that there were a few lost connections that we were attempting to make or that we were hitting the server with a dummy app. Since a device might have numerous IP addresses for each network it is connected to, we spent almost an hour trying to reach an IPv4 address that belonged to a different network. As a result, I was able to easily determine the server’s IP from the perspective of the app, enabling me to proceed to the next step.
Flutter has gained a significant following in recent years due to its powerful and flexible widget system. A widget is a basic building block of a Flutter app that can be combined with other widgets to create a visually appealing and interactive user interface.
One of the major advantages of Flutter is the extensive collection of built-in widgets that it offers. These widgets cover a wide range of functionalities and are designed to comply with the latest design guidelines, such as Material Design by Google and Cupertino by Apple. This means that developers can create apps that look and feel consistent across different platforms and devices without having to worry about the nitty-gritty details of designing the UI from scratch.
Furthermore, the widget system in Flutter offers a high level of precision and control, allowing developers to customize each widget to their liking. Flutter’s widget system offers developers a comprehensive set of tools to create visually stunning and highly functional user interfaces. With a vast collection of built-in widgets and the ability to customize them to the smallest detail, developers can create UI designs that stand out and enhance the user experience.
Some images that can visually represent the UI elements mentioned earlier.
After completing the UI design, there are two crucial components to work with: a data stream from the Olfactometer to display as a sniﬀ signal at a frequency of 2 seconds, and a live video feed from a scientific-grade camera called Basler. The data stream from the Olfactometer was handled by the open-source software Open Ephys, which provided multidimensional data with channels ranging from 0 to ~5K, each having a capacity of 1 kHz. To handle the data stream, I chose to use Web Sockets (RFC 6455), as it made more sense than traditional HTTP (V2) (RFC 7540).
Regarding the video broadcast, the Basler camera comes with advanced features and settings not available in standard cameras, such as high-speed data transfer, precise colour reproduction, low-light sensitivity, and advanced image processing capabilities. It also has the ability to capture images and videos at very high resolutions, making it ideal for scientific research and industrial applications where accuracy and precision are critical. Although the camera did not support chunk data transmission necessary for transmission over RTSP (RFC 2336) or any other similar protocols, Web Sockets (RFC 6455) were used to transmit images over the network at a speed of around 90 frames per second.
When it comes to rendering real-time data and video streams in a Flutter application, there are two ways to achieve it: using the setState method or the StreamBuilder widget. While both approaches have their pros and cons, the choice depends on the specific use case and requirements of the application. The setState method is simpler and easier to use for small-scale updates, while the StreamBuilder widget is better for real-time updates and large-scale data rendering. Since the latter approach is more efficient, I chose to use StreamBuilder to handle the frequent changes to the UI. The graph part and video streaming were rendered separately from the entire screen, which improved performance and reduced the strain on system resources.
Below is the image for reference.
Experience the future of scent exploration with our Olfactory Detection App built with Flutter. Dive into a world of rapid APP Development, for more details contact us today!
Low-code platforms are known for their ease of use, allowing developers to create apps quickly without the need for extensive coding. These platforms often come with pre-built components and integrations, making it easy to assemble an app quickly. In contrast, frameworks like Flutter offer a higher degree of customization and control over the app development process. Developers can leverage the framework’s widgets and libraries to build robust and scalable apps that meet specific requirements.
Native app development provides the most comprehensive level of customization and control over the app development process. Developers can write code specifically tailored for the platform, allowing them to take full advantage of the device’s features and capabilities. However, this approach can be time-consuming and costly compared to the other two options.
To summarize, Flutter can be considered a hybrid approach, offering a balance between the benefits of native and low-code app development. With Flutter, developers can achieve both fast app development and a good degree of customization, making it an attractive option for many businesses. By leveraging the framework’s widgets and libraries, developers can create robust and scalable mobile apps that meet specific requirements while still maintaining a reasonable level of development speed. In addition, for Swift enterprise solution development, Flutter’s flexibility and customizability make it a viable option.
This blog post only scratches the surface of the topic. For a more comprehensive understanding of the development process, please refer to the white paper that is coming soon.
By Ankit Kumar Ojha
By Uma Raj
M. V. Anshul is a skilled web developer with a diverse background in web development, specializing in both back-end and frontend technologies. With a strong focus on critical problem-solving, he expertly designs and develops optimized code for efficient and high-performance web applications. With a keen eye for detail and a passion for delivering high-quality code, Anshul is dedicated to crafting seamless digital experiences. His ability to tackle complex challenges and find innovative solutions makes him an invaluable asset in the world of web development.