Flutter

Build a Flutter application from Figma using Webflow and DhiWise in a week.

280
Saved hours
$8400
Saved money
iconiconicon

The world is changing. And to fit in, businesses need to evolve. From healthcare to entertainment to e-commerce, every vertical in the new age needs mobile app-specific exposure to thrive. And even though we would love to discuss every niche out there, for now, we will focus on ubiquitous e-commerce— a grocery app, to be precise.

And the reason for picking e-commerce isn’t random. As reported by Statista, the global e-commerce sales (retail only) added up to $4.9 trillion worldwide. And that too in 2021 alone. That’s not it— the figures are expected to rise to $7.4 by the end of 2025. Now imagine getting a piece of this rich pie with just a fully functional mobile application at your disposal. Sounds enticing, right?

But wait, this isn’t an app development tutorial. Well, not exactly. Instead, we would show you how DhiWise has the capability to get your e-commerce business up and running, eliminating grunt work, adding responsiveness, helping you get the most impactful UI/UX in place, and achieving holistic perfection.

Trust this experience to be a wholesome one. Sit back and give it a read.

The Challenge

Building a full-fledged Grocery application and managing the real-time data is not a cakewalk.

A production-ready application’s must-haves are:

  1. Attractive UI and UX
  2. Authorized User-access
  3. Accurate live information
  4. Seamless Navigations
  5. Exception Handling to avoid App-crashes

This Applications’ feature basket contains Login/SignUp with Google, Facebook, and Email, Categories, Products and their details, Addresses, Cart, and Wishlist.

The Solution

Webflow

Webflow is a popular no-code Software-as-a-Service, that provides an online visual editor platform that allows users to design, build, and launch websites. As most websites interact with users and live data, for that Webflow provides its in-built CMS where you can store data in collections, and moreover, they provide REST APIs to access those collections.

TL;DR: Webflow provides its super customizable CMS, which you can use to store and retrieve collections of items.

DhiWise

A sudden thought that might come to your mind, why DhiWise?

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.

In addition, unlike other low-code tools, DhiWise takes care of every little customization you can do right from the platform, starting from navigations, back navigations, and Splash screen setup, to bigger customizations like enabling Social and Email Authentication and API integrations.

Furthermore, DhiWise also provides in-built Supabase and Firebase Authentications and Data storage integrations in just a few steps.

With DhiWise, in its feature basket, it was a cake-walk to build such a demanding application in JUST about 50 Hours.

Application Tech Stack

  1. Flutter
  2. Webflow CMS APIs
  3. Authentication with Firebase

Implementation

If the typical development process is taken into account, the following steps are mandatory.

  1. Design Development
  2. Conversion of Design into UX
  3. User authentication
  4. App Navigations
  5. API integrations
  6. Business Logic Development

However, it can differ from app to app.

Enough of the talking, let’s jump directly into how Dhi Basket was built.

If you follow the Standard Design Guidelines while designing your Figma, You will get up to 90% accuracy of UX in your code.

Features offered by DhiWise

1. Component Identification and updating

Since the Figma was created in accordance with best practices, the code accuracy was almost 95%.

Despite certain incorrectly recognized components, it was possible to quickly update them from the platform. That resulted in avoiding the time-consuming feedback loop between engineers and designers.

2. Seamless Navigations

As the designer was smart enough to add the prototype in Figma, DhiWise automatically captured those, and navigations were taken care of.

The back button in the App bar was automatically recognized and back navigation was added.

There was a need to pass arguments from one screen to another. With DhiWise, it was very much possible to do this as well. Particularly for the Product detail page, it was necessary to pass the product's id from the List screen's API response.

3. Splash Screen

As the App had a splash screen as well, it was possible to set it as a “Splash screen” in the application using DhiWise.

Moreover, the navigation from there to the first screen was added along with the delay time.

4. Authentication

Security in a purchasing app is, obviously, quite important. In order to make it simple for application users to log in using their social media accounts, Social Authentication (With Google and Facebook) was implemented using DhiWise. Additionally, straightforward Email Sign in and Sign Up were also given as alternatives.

Firebase was integrated into the application from DhiWise to manage the authentication.

5. API Integration

For accessing the Webflow CMS data, all the APIs were integrated into the application using this feature of DhiWise. DhiWise helped in setting up API’s request with params, headers, request body, API’s response binding to the view, storing it in Preference, and handling the status code as well.

Using the combination of these features, 4 screens were configured with live data in just 8 hours.

Features Loved By Developers

1. App Preview

The interesting thing about using DhiWise is that you can actually run and see your application on different devices using its Preview feature in the browser itself. It's like a built-in emulator.

2. Source Code

Developers tend to resist seeing or touching someone else’s code, People at DhiWise, are pretty much intense about the developer experience you get while building any of the apps. It is understood how code quality is the superior thing in development.

That’s why you get full authority over the source code of the application that you build.

And for the source code, you do not have to rely on DhiWise once you build your application. DhiWise prefers the community-accepted libraries and packages inside the generated Flutter mobile application which fits just right! Take GetX as an example.

Also, the application follows MVC architecture which makes it easier for you to customize it and add other features to your application seamlessly.

A common thought…

Developers work with rotating requirements and when using no-code/low-code platforms, it might get difficult to manage the changes.

Well, with DhiWise by your side

  1. If your design changes, you can re-sync the Figma and get the changes. And the screens which are already configured and not changed remain untouchable.
  2. As DhiWise lets you take full ownership of the code, It also provides an Extension to get the latest build directly into your favorite IDEs, Visual Studio Code, Android Studio, and IntelliJ.