Cinnamon Flutter Template Overview
Samantha Holstead
2022-10-03
3min
Development
By having everything ready before starting a new project, we save time and assure consistency. This blog goes through the use of our Flutter template.
Share this blog:
As with anything in development, there are pros and cons to everything. When it came to creating and using a template for our Flutter projects, we realized the pros definitely outweigh the cons. Whenever we are starting a new project, not only do we save a lot of time by having everything setup beforehand, we also ensure that all of our projects follow the same architecture, and if at any time any other developer needs to jump in on the project, they know exactly how the project is set up and where to find everything.
About the Template Setup
There are many different ways developers can setup and structure their projects. There isn’t really “one best way” to do this, but we have found that for our projects and for our team this is something that works best. Of course, there is always room for improvement, and we are actively working on updating our template when new upgrades are released. Here is our templates’ basic folder structure:
Constants: This one is pretty self-explanatory. Here we place all of the global variables that stay the same throughout the whole application. Assets, colors, endpoints and text styles and more. This is also useful if we are to change any of these variables, the change will be made throughout the whole project, we don’t need to manually search for each color and change it (this would take forever and is prone to errors if we miss a specific place where that color is used).
Services: In this folder we place files that will provide services (in other words, actions) in the application. Some examples of services that we have in our template are dio_service (here we place all of the logic of calling API endpoints), storage_service (this handles the logic of locally saving data), and more.
Util: Here we place globally used functionalities. In this template we have placed the functions that show success and error Snackbars.
Widgets: In the widgets folder we place any widget that is used throughout the whole application. These are usually buttons or headers or, in the case of this template, animations.
Screens: Here we place all of the UI and business logic for certain screens. For example, if we have a home screen, we will create a folder called home and in it we will place both the home screen file, a controller that handles all the logic for that screen, and a binding which will initialise / dispose of said controller when necessary.
Aside from these folders, we also have the following files that are used in our projects. These are pretty self explanatory.
localization.dart: Here we define all of the strings used in the project. By doing this we can easily add more languages later and adapt the project to the language used on the device.
pages.dart: Here we place all of the pages used in the application. In this file we also bind the controller to the necessary screen, declaring that the controller will be initialized only when that screen is shown.
responsive.dart: As mentioned in the comments in this file, this is a widget that is wrapped around any screen ensuring that the layout is responsive based on the screen that the user is viewing the screen on. This is useful when our application is to be run on different platforms, such as on mobile, desktop and tablet.
theme.dart: As the name suggests here we place all the code related to the theme of the application, the colors that will be used throughout the project, etc.
main.dart: Here we call the runApp() method that loads the app onto the screen.
analysis_options.yaml: We place this file outside of the ‘lib’ folder. Here we define specific linting rules to be used in our projects. This ensures that all our projects follow better practices.
When it comes to using State Management in our applications, we primarily use GetX. We have found that for the type of applications that we receive, this seems to be the best approach to them. Aside from providing high-performance state management, GetX is also useful for managing routes, localization and more.
Miscellaneous template additions
FVM :We use FVM in our projects to manage various Flutter SDK versions. This was especially useful when Flutter released their null-safety update, for some legacy projects we couldn’t just run the ‘flutter upgrade’ command as this would cause many errors and we needed to push out new features to the project. So with FVM we could define which version of Flutter we wanted to use and one our older projects we could stay on the older version until we upgraded to null-safety, while on our newer projects we could use the latest flutter version.
FVM is easy to use and set up. You can run the command ‘fvm init’ and the .fvm folder will be created in which you can define the Flutter version you want to use
Alice: One package that we find useful in our projects is alice. This is especially helpful for debugging API requests. It shows what we send to and what we receive from the server in the form of a notification.
Packages: In our pubspec we have included packages that are frequently used in our projects. For example, when it comes to using the audio functionality we use the ‘just_audio’ plugin.
How to use our template
Our template is easily installed and run. After cloning the GitHub project https://github.com/Cinnamon-Agency/template-flutter and ensuring you have Flutter properly installed on your machine, you can easily run the project and checkout what we have made.
The template is created on Flutter 3.3.3. and you will need to run flutter pub get before you are able to run the project.
Final Words
In short, this has been a guide through our template that is used in our projects. As mentioned above, we use GetX in most of our projects so this template is also based on that state management. It’s possible that in the future we will use other various state managements and create other templates based on that.
In future blogs to come we will write about how we have set up Firebase in the template, we will also write more about local storage, animations, and other cool features we have added to our template that we find useful in every project.
Share this blog:
Subscribe to our newsletter
We send bi-weekly blogs on design, technology and business topics.
