Flutter E-Commerce App: A Curious Study

  • My teammates — the real psycho workers, they don’t know why they are doing but they are still doing.
  • My PM — He told me to do this document, my psychotic level hates this definitely his too. Sadly I didn’t find another person to do this for me.
  • Our CTO — He proposed to do this, I found he is a psycho-being. (For public: please don’t say it out loud) (For CTO: If you see this please don’t take action.)
  • Other team members — These guys’ interference nature is directly proportional to their psychotic level.

Intro

  1. Performance
  1. High productivity — Easy to code and less time frame to achieve goals
  2. Flexibility when to comes to UI development
  3. Device Compatibility
  4. Future
  1. Not stabilized yet
  2. Number of issues reported is so high when it compared to other hybrid platform
  3. Issues resolving time frame are larger when we evaluate the current progress.
  4. iOS platform performance is not optimal till now.
  1. How feasible is this approach?
  2. How to provide optimal performance on both iOS and Android platforms?
  3. What are the best practices?
  • Reusable code
  • Decouple business logic and UI logic
  • Test driven development
  • Introduce a better package structure
  • Easy maintenance.
  • Hassle-free enhancement and feature add.
  • Cleanly separates the user interface from the application business logic. Reducing the risk of technological obsolescence.
  • Separates the user interface from application logic, upgrading involves minimal effort.
  • ViewModel projects the data from the Model into a format that fits the View. A way to achieve data communication is Observer Design Pattern, where changes in the model are represented in the view as well, by the ViewModel. So there is a two-way data binding between ViewModel and view UI component.
  • “One To Many” relationships between ViewModel and view .View is the entry point to the application
  • Should use a state management package as view and viewModel data binding.
  • Segregate routing layer
  • File structure should be transparent and easy to understand
  • ViewModal must satisfy general MVVM guidelines like views should never communicate directly with each, All data should be passed through view models etc..,
  • It’s even better to define view state as a data model and process or save it in the model, even if it’s transient.
  • Create reusable views which can bind to one or more view models.
  • Data should always provided through viewModel
  • Once data is changed at model layer view model will notify the view through notifyListeners or using another best approach.
  • some choices here are data binding using provider, delegation, etc,..
  • Flexibility
  • BLoC and providers are the most popular methods. Provider will surpass the BLoC pattern as it is actively recommended by the Flutter team.
  • Recommended approach by Google developers
  • As constructor parameters and through the named route. According to MVVM, constructor pattern is closer to the guidelines.
  • The Navigator provides the ability to navigate to a named route from any part of an app using a common identifier. In some cases, you might also need to pass arguments to a named route.
  • For example, you might wish to navigate to the /user route and pass information about the user to that route. You can accomplish this task using the arguments parameter of the Navigator.pushNamed() method. Extract the arguments using the ModalRoute.of() method or inside an onGenerateRoute() function provided to the MaterialApp or CupertinoApp constructor.
  • By separating the navigation routes
  • Introduce view modal provide menu items
  • Easier scalability, maintainability, reusability and testability.
  • Scalability allows you to expand your project as your business grows. It means that the project can handle new features and rapid growth of the user base. Developers can change front end design without touching the business logic and even able to change or migrate backend without affecting the front end.
  • Work on your app doesn’t end with its release. New libraries and operating system updates are constantly coming out, and keeping an app up to date is a necessity. As your business grows and changes, you need to add new features and change the interface according to your business design and current trends on the mobile market. Maintenance is something you don’t want to spend loads of time and money on. The easier it is to maintain your app, the less money you’ll spend.
  • Testability also becomes easier if your app’s architecture is built according to the separation of concerns. A QA engineer doesn’t need to test the whole application each time to check if new functionality works.Separation of concerns makes app parts independent from each other and helps to support scalability and maintainability.
We talk a lot about architecture, let’s check what are other major areas.

A case study of Widget Consideration

  • Which one is the ideal widget for listing?
  • How flexible are these listing components ?
  • How efficiently we can handle memory?
  • Is there a feature for listing components which facilitates just in time memory allocation?
  • How to give optimal performance to users ?
  • Things to consider a hassle free user experience ?
  • Column + Single child scroll view
  • Listview Widget
  • GridView Widget
  • Flow should be similar to native.
  • Transition should be similar to native
  • Routing should be easily manageable
  • Management should be easier
  • Reusable Widgets and components
  • Choosing right component or widget
  • Choosing flexible and easy to maintain architecture
  • Segregate Logics, Service layers, routing coordinators
  • Focus on test driven development
  • Facilitate animated but lightweight environment
  • Hassle free user experience
  1. Home screen
  2. Product listing screen
  3. Product Details screen
  4. Cart Screen
  5. Checkout Screens
  • Top appBar with search/cart/wishList navigation icon and hamburger menu
  • carousel slider for banners.
  • clickable image banner for promotions.
  • Horizontal slider, Row/Column widgets for featured items
  • Static bottom navigation bar with different screen routing. Mostly containing the frequently used screens like home, wishlist, bag, profile etc.
  • Product list can be build using gridView.builder
  • A wishlist icon on each rendered product by using a stack widget.
  • A carousel slider containing different images of a specific product.
  • Stack can be used for wishlist management.
  • Row and Column can b used for basic details like Price, discount, offer details using a combination of Product Name, brand name and Product description using ExpansionTile
  • floating action buttons can be used for cart and checkout buttons.
  • Gridview for similar products using
Animated Environment
  • The jank issue is one of the common animation issues reported so far and still no feasible solution for it.
  • Avoid clipping in an animation. If possible, pre-clip the image before animating it.
  • When using an AnimatedBuilder, avoid putting a subtree in the builder function that builds widgets that don’t depend on the animation. This subtree is rebuilt for every tick of the animation. Instead, build that part of the subtree once and pass it as a child to the AnimatedBuilder.
  • Performance considerations should take care for for opacity animation
Credit goes to
  • Me, of course all credits go to me only. Nobody can question it unless you are me. “Sarath Raveendran”
  • Nobody, This nobody is my junior, who reviewed and corrected all the mistakes on this doc, actually mistakes which are in perspective of his eyes, because I never make mistakes. He always works for me and I never and will never, mention his name anywhere. But for a change mentioning his name here because I said my team members are psychos in the beginning so If anything went wrong, I will give the half credit to him. If everything seems okay for a week after publishing this, I am planning to remove him. “Jyothish Johnson”
  • Two more Nobodies, again my juniors, these people actually did R & D and reported back to with their findings. Till now I don’t agree with their findings. Even though google, flutter dev team and some other peoples are agreeing with them. Still I don’t agree because a senior is unquestionable. Anyhow the credit only goes to me and nobody is going to know them as well. “Roshan Joy”, “Muhammed Shihab”
Thank you for reading

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store