Project structure

The project structure (folder-structure)

There are two general approaches when developing mobile apps regarding the project's folder structure. The main difference is in the way the project Widgets are structured. Mainly we have also two types of widgets, Parent/Container/Page Widgets responsible for the main screens of the app, and Component/Dummy Widgets responsible for displaying pieces of information with less to none logic involved.

Based on the size of the app we can structure these Widgets, feature-based or just group by type so we just separate them from each other. In most cases, the mobile app gets too large, especially when using Reactive paradigms when developing, including here platforms like react-native and flutter which both use the same reactive-style views/widgets. Therefore, in my opinion, is better to take the feature-based approach to structure the project, and that's why the structure in this demo is feature-based.  Here is the general overview of the structure.

/lib
--/assets
  --/mocks
  --/fonts
--/components   #General use components (e.g. AppHeader, AppFooter)
--/config       #General app config files
--/features
   ../feature-1
   ../feature-2
--/models        #Data clases 
--/store         #Contains the redux store & setup.
  --/actions
  --/models      # redux related models, used to mange data inside the store.
  --/reducers
  --/view_models
--/template      #Used for styling and UI related data.
--/utils         #To store helper functions/utils (e.g. dateUtils)

This is pretty much the gist of the setup, but you can definitely tweak it to your needs.

App styling. The template

As you are probably aware by now, Flutter as a notable verbose way of styling every widget. For this reason, I thought it best to create a /template module in the app to store generally used styling classes/methods or widgets that can be imported and used in the entire app. Think of it as a template or theme of the app.

Main files present:

1. colors.dart: Sustaining all the colors used in the app, or gradients.
2. spacing.dart: Might be used to create general spacing widgets for the app, let's say a SectionPaddingWidget that can be reused in the app. Nothing is actually present in the demo app. But so you know what the purpose of this file is.
3. typography.dart: My favorite one! Add here all the text styles used in the app and general utils related to the text typography used to create the UI.

These files are all imported as part of the index.dart file inside the template so all of them can be used as a package or module as so:

import 'package:flutter_redux_mvvm/template/index.dart' as template;

/// ... Widget code

Text('some_text': style: template.Typography.defaultText);