My first flutter project is essentially doing what it is supposed to and has reached a size of ~6000 lines of code. However, it has a fundamental design flaw, as I understand it: I have mostly written the code in one single dart file, making heavy usage of global variables (defined outside any class or method).
As an amateuer, I find it challenging to understand how to effectively split code into multiple files (using the import), for instance move classes and methods to sub folders. My main issue is that my code relies on these global variables. For instance, there is one globally declarated class of variables for user settings, one for various user statistics, one for the current state of the game, one for session details etc.
I know that I can route variables into classes via the constructor or into methods when calling them, even if these are defined in other dart files. My problem is:
These methods then often change multiple variables and it seems I can essentially only return one variable back to the original caller. Also, the returned value then would need to be fed from there to the next relevant method, this flow seems super complicated. Much easier to just save the variable globally and let another method somewhere in the code pick it up when needed.
This up to know has led me to keeping everything in one dart file, where everyone can access everything globally.
I know that my current approach is not optimal. How should I change my approach? Do I need to use provider or something? But, for me the main issue is not notifying everyone but to keep variables aligned across methods and files...
Do you know of any reading material online that would give me a better grasp in how to approach this in general?
This is definitely not the only solution, but I chose it because I really like how it works in Angular. I think the thing that will help you solve your problem is state management. There are many videos on Youtube about Flutter's state management approaches, but I decided to use flutter_redux and I don't regret it so far.
Speaking of structure, I would suggest using the following:
├── modules # Can be grouped by feature / domains / entities
│ ├── feed
│ │ ├── actions # Redux actions directory
│ │ ├── components # Components directory (Contains representation only, should not contain any logic)
│ │ ├── containers # Containers directory (Contains business logic / or it can be moved to services etc, returns components)
│ │ ├── models # Models directory
│ │ ├── reducers # Redux reducers directory
│ │ └── ...
│ └── ...
├── app_state.dart # Your immutable state here
├── app_sizes.dart # Class with static paddings, heights, font sizes
├── app_colors.dart # Class with static colors
└── main.dart
To better understand the purpose of certain entities, read more articles about redux.