Skip to main content

Flutter Design

EasyManage generated code is modular and developer friendly. Easymanage is used for apps in the categories of customer facing apps, business facing apps, internal tools, and more.

EasyManage Flutter Design​

Design Considerations​

EasyManage generated code has simplified design pattern with below goals

  • Easy for freshers, begginers and Learning to Code.
  • We expect individual team members to customize and extend code. As opposed to new "from scratch" projects, where UI teams and backend teams are separate and working on their own areas in parallel.
  • The screens and classes are designed to cater to CRUD type apps. Which consitutes 50-80% parts of any of our catered-to apps.

Design Details​

  • Screens are generated for database tables and views. So screens and classes at Data domain level (meaning database table or view)
  • Data domain level classes (which have 1:1 representation of database table or view) are separated in their own folders under \pages.
  • State management (at screen or local widget level) is managed in each screen level class, and is for local state.
  • App level state management, e.g. for user authentication, is handled via local device storage and retrieval of data, using Hive. Same strategy can be used for bulding cart from item selections across multiple screens for an e-commerce app.
  • Routing and memory footprint: It is good idea to clear routes / widgets (other than Dashboard screen) and thus reduce memory footprint of app in runtime. Easymanage uses and facilitates this approach.

Overall Structure

Below are some important parts of flutter code folders and structure.

em_app\
------\lib
------\main.dart (Dashboard Page)
------\em_nav.dart (Navigation)
------\pages
------------\customer (Screens for customer)
---------------------\customer_data_table.dart (Display Screens: List View, List Cards)
---------------------\customer_lib.dart (Display Record Detail Screen)
---------------------\customer_dropdown.dart (DropDown Widget + Edit)
---------------------\customer_edit.dart (Edit Screen)
---------------------\customer_filter.dart (Data Filter Screen)
---------------------\customer_form.dart (Input Screen)
---------------------\customer_graph.dart (Graph Screen)
---------------------\customer_search.dart (Search Record by Key Screen)
---------------------\customer_model.dart (Data domain model)
---------------------\customer_service.dart (Data API Services GraphQL and REST)
------------\product (Screens for product)
...

Comparing with Other Design Patterns​

App State Management in Flutter using Provider​

When you need to share application state between screens, across your app, there are many approaches you can take. Using Provider is one of the option.

  • Flutter documentation page Simple app state management shows how to use Provider + ChangeNotifier.
  • EasyManage Roadmap (Coming soon): feature to handle state management with Provider for data filter selections.

MVVM in Flutter​

Model-View-ViewModel (MVVM) is a software architectural pattern that supports the separation of the UI (which is View) from the development of the business logic or the backend logic (Model). The view model inside MVVM is the bridge responsible for the conversion of data in a way that behaves in accordance with the changes happening on the UI

EasyManage has not considered MVVM for generated code due to its disadvantages listed below (but we could consider it in future):

  • It has steep learning curve. How all the layers work together is difficult to understand for non-experienced.
  • It adds a lot of extra classes.
  • Keeping many Model-View classes instantiated will require more memory and resources.
  • So it’s not ideal candidate for most apps in the categories of non-complex CRUD type apps.