FlutterCrew Code Reglament
Everything is a widget
In every flutter app we use widgets. Everything in the app is made from widgets.
To create a widget we should use following recommendations:
- should be placed in the
- should be named accordingly to its content.
- should be easialy exported.
- should only export itself.
There are two simple rules to file structure.
- All content should be exported in one file.
- All content should be containted inside
The root folder is named after the widget and contains only the exporting file and
src folder there can be such folders:
| --------- | ----------- |--------------------------- | ------------------
| constants |
widget_name_const.dart | widget settings
| styles |
widget_name_style.dart | widget ui settings and functions
| models |
model_name_model.dart | models that this widget or its children will need
| utils |
util_name.dart | logic functions for the desired widget to work
| widgets |
widget_name.dart | other widgets that will this widget use
| sources |
source_namesource.dart | possibility to import files from other libraries and change something if needed
other.dart | Bloc, cubit, singletons, services and other logic
1. Single File
Though it is recommended to split your widget into folders, but as long as your widget is really small, you can have it all in one file. This is also usable with other folders. For example if you want to split your widget, but do not want to split it's style, you may leave it as is (but you still need to create a folder for that style).
- Even if
widgetsfolder has one file, it still should be named plural.
otherfolder should be named in respect to its plurality.
If your file is too big and you want to effectively split it you should use part / part of expressions. In your style folder create all the folders where you want to have your file splitted and name them accordingly to their content. You can also leave some content in main file if you want to.
When splitting using part, set the
library following style
- For example you can use
textfolder in style to define text styles for your widget with
In purposes of clean code and easy import we set 2 requirements:
- Widget class name should be identical to it's filename. For example, class named
HomeScreenshould be placed in a file
- Folder name should be identical to file in it's root. For example, file named
home_screen.dartshould be placed in a folder
For means of easy code and avoiding overcomplicating imports, we should import only the main folder file in the file type folders.
By default widget should export everything that can be needed when importing it. That means styles, constants, models, other widgets, logic, etc. For example if widget has custom models and/or utils, that can be used for creating that widget, or managing it's content from outside, they should be exported.
If you want to have more than one widget in the widget root and your widgets share the same suffix, you should create a folder named with this suffix and place your widgets there. For example, for files
home2_screen.dart you should create a folder named
screens and put files
home2.dart there. This also requires renaming widget folder name from
home and exporting widget content including all widgets in the file
home.dart. This concept can also be used with group of widgets in the
Quick Note on Export
If you have the same type of files from outside the current widget, that will this widget use, you should put them in this widget type file. For example, if you have main style file in the root of the app that you want to use in current widget, you should export it from the current widget's local style file and not import it in the widgets underneath this widget.
- File Structure
- Flutter Bloc (Cubit)
- Flutter Modular
- It is a good idea to have your code sorted and unified. You can use our predefined analysis options just for that.
- You should not export other libraries from your own.