Cinnamon Flutter Riverpod Template
Pavel Ryabov
2022-11-10
4min
Development
Setting up a new Flutter project can be a tough task. We created this template to bring all the essential features and modern Riverpod architecture to your new app.
The starting point of an application is one of the most important in development. The question always arises of what can and should be used, and what should not. What architecture to choose? How to make the code as clean and reusable as possible? These and many other questions torment programmers every day, because the future fate of development depends on those decisions that were made. But what if we can offer a lightweight and versatile solution that has everything to get your project off to a good start? It was with this idea that we started developing our new template for Flutter.
About the Template Setup
Project structure is an extremely important part of development. Sadly, there is no perfect solution for this, so we decided to turn to the experience of our developers in order to understand what is convenient both for them and for future newcomers to projects. Of course, there is no limit to perfection, so we always follow the news, update our templates, and add the latest features.
As for the state management tool choice, we went with Riverpod. Riverpod is a complete rewrite of the Provider package with numerous improvements. With Riverpod, you can create providers to keep your app state and business logic outside the widget tree.
To fully demonstrate the process of fetching and processing data from remote sources, we decided to use a real REST API called The Movie Database.
Project Architecture
This template architecture is specially designed with Riverpod as the state management tool in mind. It’s based on the MVC architecture, where the views (Widgets) communicate with the controllers, whichupdate the widgets’ state and manipulate with data models. This template is built with architecture that consists of four main layers: Features (UI), Services, Domain (Models, DTOs) and Data (Repositories).
Here is our project’s top-level folder structure:
Let’s take a deeper dive into the folder structure and discuss every folder in detail.
1. Constants - this is where we place all the global variables that stay the same throughout the application. For example, the template has a file endpoints.dart which contains the static information about the REST API used in the application.
2. Features - this folder contains only UI elements (widgets) and controllers that handle events and update user interface. For example, if we have a home page, we will create a folder called home and create three sub-folders: pages where we place the home_page.dart file, controllers, that will contain a controller that handles all the logic for that screen, and widgets, containing the custom widgets that are only used in this part of the application. The same pattern is repeated for every feature.
3. Models - contain object and data transfer object classes used in the application. We use the Freezed package to generate serializable and easily modifiable object models.
4. Providers - stores all global providers, i.e. services and repositories providers.
5. Repositories - this is where all repositories are contained. In this template, we have a repository called HttpMovieRepository which implements the abstract class called MovieRepository.
6. Router - contains the application’s router and routes. We use go_router package for declarative routing in Flutter.
7. Services - this folder contains all services used in the application. For this template, we added all the essential services required to start working on a Flutter application. For example, we have API service which uses Dio package to fetch data from remote sources; Auth service that provides all authentication methods via Firebase Auth; Storage service that provides means of storing data on the device with Hive, and many more.
8. The Shared folder contains UI elements that are used across the application.
9. Finally, the Theme folder is where we place all the code related to the theme of the application, the colors that will be used throughout the project, etc.
Aside from the folders, we also have a couple of files that are used in the project:
main.dart: Here we call the runApp() method that initializes and loads the application.
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.
A .env file needs to be created in the core folder of the application. It’s a basic environmental variables file, where you can, for example, put the token for your REST API.
How to use our template
Our template is easily installed and run. After cloning the GitHub project https://github.com/Cinnamon-Agency/template-riverpod-flutter and ensuring you have Flutter properly installed on your machine, you can easily run the project and check out what we have made.
In order to use real REST API, you need to acquire an API Key for TMDB, create a .env file in the core folder of the project and store the key like this: “TMDB_TOKEN=YOUR_API_KEY”.
The template is created on Flutter 3.3.5. and you will need to run flutter pub get before you are able to run the project.
Final Words
That's all we'd like to share about our new Flutter template. We did not go into deep details, but talked about the architecture of the project and its main features. We hope this template will give you a boost in development of your own amazing applications!
In future blogs, we'll cover even more of the services required by modern apps, as well as talk more about such a powerful developer tool as Firebase. Stay tuned!
Subscribe to our newsletter
We send bi-weekly blogs on design, technology and business topics.