Habitual — The Flutter Ecommerce App

Edilson Matola
5 min readFeb 28, 2023

Leia esta publiçacão em Português.

Introduction:

As an avid Web Developer and Mobile developer with Flutter, I decided to create an eCommerce app called Habitual that is not only easy to use but also customizable to meet different business needs.

Before I jump into the details of the app, I wanted to share a bit about my background. I’ve been taking a course on Udemy about UI/UX Design, which has provided me with a solid foundation in the principles of design.

Inspired by the course, I decided to take on the challenge of actually developing the design of the eCommerce app from scratch using Flutter. In this publication, I’ll be sharing the features of the app, its development process, and how you can access its source code on my GitHub profile.

Features

The app will be designed with responsive design principles in mind, making it accessible and easy to use on a variety of devices. Whether you’re using a desktop computer, a tablet, or a mobile phone, the app will adapt to the screen size and provide an optimal viewing experience. The responsive design ensures that all features and functionality are available to users, regardless of their device.

In addition to responsive design, the app will include a range of features that make it a fully-featured platform for browsing and purchasing products. Here are some of the app’s key features:

The app will have a user-friendly interface that allows users to easily navigate through different sections. Some of the features that the app offers include:

  • User authentication: This feature allows users to register and log in to the app, which is necessary for making purchases and accessing their order history.
  • Product listing: The app has a section that displays all the available products, complete with descriptions, prices, and product images.
  • Cart management: Users can add items to their cart and view the total cost of their purchases before checking out.
  • Payment integration: The app supports different payment methods, making it convenient for users to pay for their purchases.
  • Order tracking: Once users have placed an order, they can track the progress of their shipment right from the app.
  • Checkout: The app includes a checkout feature that allows users to complete their purchases securely and efficiently. Users can choose their preferred payment method, enter their shipping and billing information, and track their order status.
  • Profile: The app includes a profile feature that allows users to create and manage their account information. Users can view their order history, update their contact information, and manage their preferences.
  • Search Filters: The app includes search filters that allow users to quickly find the products they’re looking for. Users can filter their search results based on criteria such as price, category, brand, and more.
  • Customizable Empty Pages: The app includes customizable empty pages that can be used to display personalized messages with images or promotions when there are no products or results to display.

Screenshots

Here are some screenshots of how the app will be in action:

Leia esta publiçacão em Português.product screen, splash screen and home screen
boarding screen, checkout screen
profile screen

Development process:

I will be actively developing this application throughout this year, and I’ll be documenting my progress and sharing my insights on Medium.

I will be using Flutter, which is a powerful cross-platform development framework. I will also be using some third-party packages in Flutter to accelerate the development process, which will be listed in the GitHub repository’s readme file.

For the backend and API, I will be using Node.js, which is a popular JavaScript runtime that allows for easy backend development. I will also be using a database management system to store the app’s data. Currently, I am considering using either PostgreSQL or MongoDB. If you have any suggestions, please feel free to share your thoughts in the comments.

To make it easier to deploy the app, I will be using Docker, which is a containerization platform that allows for easy deployment and scaling of applications. By using Docker, I will be able to containerize the app and all its dependencies, making it easier to deploy to different environments.

Overall, the development process it is being a great learning experience, and I’m excited to share the app with the open-source community. If you have any questions about the development process or the tools used, please feel free to ask in the comments.

Project Roadmap

The first step of the project will be focused on UI development, creating an appealing and modern interface that makes the application more user-friendly and engaging for your customers.

The second step will be integrating GetX, a powerful state management tool for Flutter, which will improve the application’s performance and user experience by providing a more efficient and organized data flow.

Finally, in the third step, we will be developing the API, which will enable you to connect your ecommerce store to other applications, databases, and services, and provide a more seamless and integrated experience for your customers.

The App will be based on GetX architecture. If you are not familiar with GetX you should start with the official documentation.

Shoutout to the design authors:

Before I conclude, I would like to give a shoutout to the authors of the design that inspired the look and feel of the Habitual eCommerce app. The design was created by Daniel Schiffano who is a very talended designer with a passion for creating beautiful and intuitive interfaces. The course was created by Andrei Neagoie, who is a developer and a teacher who runs the tech school called ZTM. Their course and design were instrumental in giving the app its sleek and modern appearance, and I’m grateful for their contribution.

GitHub link:

If you’re interested in exploring the source code behind the app, you can find it on my GitHub profile at edilsonmatola. The repository contains all the files and documentation necessary to set up the app and customize it to meet your business needs. Whether you’re an experienced developer or a beginner, you can also contribute to the project by submitting bug reports, feature requests, or even code changes.

Conclusion:

I hope this publication has given you a glimpse of the features of the open-source Habitual eCommerce app that I’m developing in Flutter. The app will be designed to provide an intuitive and seamless shopping experience for users and is customizable to meet different business needs.

Follow my Medium blog to stay updated on the latest developments and best practices for Web and Mobile Development. If you have any feedback or questions, please don’t hesitate to reach out to me on Twitter, Instagram and Github, which you are also welcome to follow.

Thanks for reading, have a nice day!

--

--

Edilson Matola

Full-Stack Web & Mobile App Developer Engineer | Livelong learner | Happy about sharing my knowledge to the community