Flutter (Day 3) — The Perfect Layout
Over the past few years, I have tried a wide-wide range of different structures for my apps. I started with EVERY SINGLE piece of code in my ‘main.dart’ file (please do not judge me). Then I realized that I could break everything up a little and I had EVERY SINGLE piece of code in one of like three or four files. Recently I have seen the light, taken the red pill and gone with something more diversified, which we are going to use for this!
OKAY! What I like to do is have FIVE-main folders (seen below).
Assets: Images (no code)
Languages: .json files (no code)
Pages: Layout of widgets
Services: Data management
Standards: Useful widgets/methods/themes
Assets This folder is pretty self-explanatory. It has images and animations that you can call.
Languages This folder is pretty self-explanatory. It has ‘.json’ files. Each file represents a different language and has every string in the app in that specific language.
Pages For each screen in the app we have a file dedicated to it. In this file, we call widgets and position them in the right place.
Services Every single method that you may have to call for handling data is in one of the files in the services folder (we are going to be using Google Firebase for most of the data management in this app).
Standards Basically, the idea is this: Everything you need for a page is in that specific file unless it is used more than once. If you make a widget and use it in two or more places, then it goes into the standards folder under ‘interfaceStandards.dart’. All colors, fonts, animations, and methods (used more than once) are also in their own ‘…standard.dart’ files.
By breaking it up into these different files, each file is easier to read and understand. Also, once you finish setting up the ‘…standard.dart’ files, then all you have left to do is adjust things here and there.
AND THAT’S IT! That’s how I like to break up my applications. Obviously, there is the ‘main.dart’ file and some files here and there for setup, but 99.95% of the coding for this app will be done in these five folders.
