flutter_template

This project was created by flutter create PROJECT_NAME command.

Flutter framework starter repository.

Docs

• Flutter
• Material Design 3
• Material Icons | Rounded

Accessibility

I strongly recommend reading the Styles of Material Design 3 website, very informative.

• About Icons

Project structure

This project is designed with feature-first architecture.

Note

To understand this architecture, the below articles are very imformative.

• https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/
• https://codewithandrea.com/articles/flutter-project-structure/
• https://www.cinnamon.agency/blog/post/cinnamon_flutter_riverpod_template

Development

First, you must install packages.

flutter pub get

Second, you must create the environment files and set the variables.

There are three environments dev, stage and prod.

I've prepared templates for each. Copy them and fill in the blank parts (means: "") with your values (e.g. api-key, token).

In the end, there should be three files in the following directory.

Directory: (repo)/.env/

Files:

• dev.json
• prod.json
• stage.json

Before running the app

You must lunch the device, iOS or Android.

Running on iOS

Before running the app on iOS, you must grant execution permission to the script set in the Pre-actions of Runner.

The file is located at (repo)/ios/PreActions/extract_dart_defines.sh.

Tip

Execution permission can be granted using the following command:

chmod +x ios/PreActions/extract_dart_defines.sh

Git Hooks

In this repository, I use Lefthook for Git Hooks. By using Git Hooks, you can check the code before committing.

Refer to the Lefthook installation instructions and set up according to your environment.

Packages

1. build_runner
2. freezed
3. json_serializable
4. retrofit
5. flutter_hooks
6. hooks_riverpod
7. permission_handler

1. build_runner

This package is required by other packages to generates code automatically.

You must run the below script before use these packages.

flutter pub run build_runner watch --delete-conflicting-outputs

Note

Also, you have the choice to run the script below each time.

flutter pub run build_runner build --delete-conflicting-outputs

2. freezed

This package is needed to define the model.

Important

build_runner is required.

3. json_serializable

In Dart, you need to define methods if you want to convert a JSON object (of Map<String, dynamic> type) to a model (defined by freezed).

This package helps generate methods automatically.

Important

build_runner is required.

4. retrofit

According to the Flutter documentation, the http package is recommended for fetching data from APIs.

However, since this method requires specifying a URL each time, there is a lot of duplication.

This package simplifies such cases.

Tip

It will be used in combination with Dio. (Dio is already installed)

Important

build_runner is required.

5. flutter_hooks

For easier state management, refer to hooks_riverpod for more details.

6. hooks_riverpod

Riverpod is a state management package that automatically changes the rendering scope through caching and state handling, thereby optimizing performance.

Riverpod has three types of packages.

• riverpod
• flutter_riverpod
• hooks_riverpod

Riverpod is used for managing global state, while Hooks is utilized for managing state within narrower scopes.

Tip

See this article for more details: Riverpod+Hooks の導入についてのメモ

Let's use the code generator to speed up our coding.

Article: riverpod_generator を使ってプロバイダを簡潔な記法で生成する

Important

To use the code generator, build_runner is required.

7. permission_handler

This package is used to check/request permission to access the device's features. (e.g. camera, location, notification, bluetooth, etc...)

---

🐢