This page provides comprehensive instructions for setting up development environments for the Flutter Mobile Project Template. The template is configured to work primarily with Visual Studio Code and IntelliJ IDEA, with predefined configurations for each. For information about build configurations and flavors, see Build Configurations.
The template provides configurations for two main integrated development environments:
Sources: .vscode/settings.json .vscode/extensions.json .vscode/launch.json .idea/runConfigurations/ui_catalog.xml .idea/runConfigurations/samples_github_app.xml
The template recommends several VS Code extensions to enhance the development experience. These are defined in the .vscode/extensions.json file:
| Extension ID | Purpose |
|---|---|
| dart-code.dart-code | Dart language support |
| dart-code.flutter | Flutter framework support |
| blaugold.melos-code | Melos monorepo management |
| djbkwon.flutter-dependency-docs | Quick access to package documentation |
| esbenp.prettier-vscode | JSON and other file formatting |
| DavidAnson.vscode-markdownlint | Markdown linting |
| google.arb-editor | ARB localization file editor |
Sources: .vscode/extensions.json2-10
The .vscode/settings.json file contains important configuration that optimizes VS Code for Flutter development:
The template is configured to use Flutter via the mise version manager:
"dart.flutterSdkPath": "~/.local/share/mise/installs/flutter/3.27.1-stable",
"dart.sdkPath": "~/.local/share/mise/installs/flutter/3.27.1-stable/bin/dart",
Generated files are nested under their parent files for cleaner file explorer view:
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.dart": "$(capture).g.dart, $(capture).freezed.dart",
"pubspec.yaml": "pubspec.lock, pubspec_overrides.yaml"
}
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
}
Sources: .vscode/settings.json2-39
VS Code includes predefined launch configurations in .vscode/launch.json for running the application with different flavor configurations:
Each configuration specifies:
cwd)program)args) for flavor-specific buildsSources: .vscode/launch.json1-52
The template includes predefined run configurations for IntelliJ IDEA located in the .idea/runConfigurations/ directory:
| Configuration Name | Purpose | File Path |
|---|---|---|
| ui-catalog | Run the UI component catalog | apps/catalog/lib/main.dart |
| samples-github-app | Run the sample GitHub application | samples/github_app/lib/main.dart |
Unlike VS Code, flavor-specific configurations for the main app must be created manually in IntelliJ IDEA.
Sources: .idea/runConfigurations/ui_catalog.xml1-7 .idea/runConfigurations/samples_github_app.xml1-6
This project is configured to use Flutter 3.27.1-stable. It is recommended to use mise for managing Flutter versions:
mise use flutter@3.27.1-stable
Initialize the local workspace with:
melos bootstrap
This command configures the monorepo structure and establishes dependencies between packages.
The project uses several patterns for file organization:
Generated Code Files:
.g.dart - Generated for JSON serialization and other code generation.freezed.dart - Generated from the Freezed package.gitattributesLocalization Files:
l10n.dart, l10n_en.dart, l10n_ja.dart - Generated localization filesSources: .gitattributes1-7 .vscode/settings.json5-9
The template includes configuration for testing, including golden tests for UI components:
The apps/catalog/test/flutter_test_config.dart file configures Alchemist for golden tests with the light theme from the design system package. Golden tests are disabled when running in CI environments (controlled by the CI environment variable).
dart_test.yaml:
tags:
golden:
timeout: 1m
Sources: apps/catalog/test/flutter_test_config.dart1-27 apps/catalog/dart_test.yaml1-4 apps/catalog/.gitignore47-49
Both VS Code and IntelliJ IDEA create workspace-specific files that should be excluded from version control. The template includes appropriate .gitignore patterns for these files.
# IntelliJ related
*.iml
*.ipr
*.iws
.idea/
# VS Code (commented by default, as some VS Code settings are tracked)
#.vscode/
The .vscode directory is not ignored by default because it contains important shared configuration files, while most .idea files are ignored except for the run configurations.
Sources: apps/app/.gitignore15-24 packages/cores/designsystem/.gitignore13-22
Refresh this wiki