Cinnamon logo
Cinnamon logo
Cinnamon logo
Close

Home

Projects

Services

About Us

Careers

Blog

Contact Us

Close

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.

placeholderFlutter Template.png

Share this blog:

twitter logo
facebook logo
linkedin logo
link logo

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:

  1. 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).

  2. 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.

  3. Util: Here we place globally used functionalities. In this template we have placed the functions that show success and error Snackbars.

  4. 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.

  5. 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:

twitter logo
facebook logo
linkedin logo
link logo

Subscribe to our newsletter

We send bi-weekly blogs on design, technology and business topics.

Similar blogs

placeholderiOS_Project_Templatelast2.png

Development

Hana Spolador

2022-09-01

8min

Cinnamon iOS Project Template
placeholderCover_Img.png

Development

Nikola Meheš

2022-08-01

7min

Cinnamon’s Next.js Template
placeholderStateMagementInFlutter.jpg

Development

Josip K.

2021-02-11

7min

State Management in Flutter
Job application illustration

You could use our expertise?

Let's work together.