- Arunava Chakraborty, UI Engineering Manager
- Sharath Hegde, Technical Lead – Mobile Apps
- Harsha Pai, AVP & Head of Engineering
We at Chai Point have been at the heart of the chai-led beverage revolution in India for more than 10 years now. Serving over 7 lakh cups per day and fulfilling more than 100 million cups delivered over the past year, our omnichannel network of physical stores, cloud kitchens, virtual stores, 3rd party vending sites at offices, F&B players etc. make us the largest chai-led beverage platform in the world.
Our aspiration is to reach a scale of 60,000+ distribution points and achieve a daily cup count of 10 million beverages.
Aspiration of this scale is only possible through deep investments in our cloud connected brewing systems.
This series of blogs is to share greater details on different building blocks of our technology stack.
In this blog, we focus on how we re-wrote our Native apps to get the best user experience and scalable architecture. In the ever-evolving world of mobile app development, staying ahead of the curve is essential to create seamless user experiences. One platform that has gained significant attention in recent years is Flutter. Flutter, an open-source UI software development toolkit from Google, has quickly become a favorite among developers for its speed, flexibility, and cross-platform capabilities. Read along to understand how we leveraged Flutter’s power to build a food ordering app that not only saves time compared to native Android and iOS development but also ensures feature consistency across both platforms.
So the first question that arises is, why Flutter? Flutter’s biggest advantage lies in its ability to create a single codebase that can run natively on Android, iOS & the web. This means developers can write code once and have it work seamlessly on all platforms, reducing development time and effort significantly. This approach also streamlines the maintenance process, as updates and bug fixes can be implemented universally, reducing the chances of platform-specific errors. Flutter being the most compatible for the web platform helped it trump over other frameworks such as Xamarin.
Flutter’s rich set of pre-designed widgets and a customizable UI allows for stunning visuals and a consistent look and feel across devices. This is crucial for a food ordering app, where user experience is paramount. Additionally, Flutter’s hot reload feature accelerates the development process by allowing developers to instantly see changes made in the code, making iteration faster and more efficient.
Traditional native app development requires separate teams for Android and iOS, as the codebases and technologies for each platform are distinct. This often leads to duplicated efforts, longer development cycles, and increased complexity. With Flutter, we drastically reduced development time by sharing a single codebase, leading to a faster time-to-market.
According to a survey by Codemagic, a CI/CD platform for Flutter, Flutter developers reported that they were 30% more productive, spent 33% less time debugging, and saw a 50% reduction in the time required to add new features compared to traditional native development.
For us ensuring feature consistency on all platforms was an important factor. We wanted our users to have the same experience no matter which platform they were on. Building such a consistency for a food ordering app was a challenge. We achieved this using Flutter’s cross-platform capabilities combined with the Bloc architecture to provide an elegant solution. The key points to note here being:
- Platform-Specific Adaptations: Flutter allows you to create platform-specific adaptations when needed, ensuring that the app feels native on each platform.
- Uniform User Experience: Users on both platforms get a consistent experience, reducing confusion and increasing user satisfaction.
The power of Bloc architecture helped gave us a number of advantages. We chose to implement the Bloc (Business Logic Component) architecture in our Flutter app. This architectural pattern separates the app’s components into three layers: the UI (Presentation layer), the Bloc (Business Logic layer), and the Data layer. This separation enhances maintainability, scalability, and testability.
Each feature in the app has its Bloc, which handles the business logic for that feature. This ensures that each part of the app is modular, making it easier to manage and update. Additionally, Blocs communicate with the UI through streams, providing a clear and reactive way to manage state and user interactions.
The advantages of Bloc Architecture with Flutter are:
- Reusability: Blocs can be reused across different parts of the app, promoting code reusability and reducing redundant code.
- Testability: Blocs are easy to test in isolation, making it simpler to write unit tests and ensure the reliability of the app.
- Scalability: As the app grows, the Bloc architecture allows for easier management of complex features by breaking them into smaller, manageable components.
- State Management: The Bloc pattern ensures a clear separation of state from the UI, preventing unexpected changes and improving the predictability of the app’s behaviour
Here is a simple diagram of our Bloc architecture:
Let us look at how we have built some of the key features on our app:
Catalogue Page
Flutter’s advantage here lies in its ability to create visually appealing and responsive user interfaces. The food catalogue page needed to showcase a variety of food items, each with images, descriptions, and pricing. With Flutter’s rich set of pre-designed widgets and customizable UI, we created a stunning and consistent look for our food items, ensuring that they are presented attractively to users on both Android and iOS.
Additionally, Flutter’s hot reload feature is a game-changer for rapid UI development. As we refined the layout, we could instantly see the changes we made, which was crucial for fine-tuning the appearance of your food catalogue to make it as appealing as possible.
Cart Page
The cart page is where users review their selected items before proceeding to payment. Flutter’s state management capabilities, coupled with the Bloc architecture mentioned, ensured that the cart state remains consistent and reactive. This was crucial for real-time updates as users add or remove items from their cart. The ability to handle complex state changes effortlessly was a significant advantage in this scenario, as it ensured a smooth and reliable user experience.
Payment Page
When it comes to payment, security is paramount. Flutter benefits from the robust security features provided by the underlying platforms (Android and iOS). Additionally, the consistent design across both platforms ensured that users felt familiar with the payment process, regardless of the device they are using. This reduced user confusion and helped build trust in the app. Flutter’s cross-platform capabilities also made it easier to integrate with payment gateways. A single codebase for payment logic has been utilized for both Android and iOS, reducing development and maintenance efforts.
Loyalty, Rewards & Coupons
Consistency in the presentation of coupons and loyalty rewards is vital for user engagement. Flutter ensured that the coupons and loyalty pages looked and functioned the same way on both platforms. This consistency was essential for conveying a professional image and providing a unified user experience. Furthermore as the app grows and introduces more complex coupon and loyalty mechanisms, the modularity offered by Flutter and the Bloc architecture will prove beneficial. Each feature can have its Bloc, making it easier to manage and test these functionalities individually.
Homepage
The home page sets the tone for the entire app, and consistency in design and user experience was crucial. Flutter allowed us to create a visually appealing and engaging home page that remained consistent across Android and iOS. The hot reload feature enabled rapid iterations, allowing us to fine-tune the home page design until it was just right. Additionally, implementation of any custom animations or transitions on the home page was enabled by Flutter’s animation capabilities which made it relatively straightforward. We created eye-catching animations that enhanced the user experience and made our app stand out.
In conclusion, Flutter, with its time-saving advantages, ability to ensure feature consistency across platforms, and the power of Bloc architecture has allowed us to create a cutting-edge food ordering app that delivers a superior user experience. As technology continues to evolve, adopting innovative tools and methodologies is crucial for staying ahead, and Flutter combined with Bloc architecture has proven to be a winning combination for our development team.