Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ npx skills update flutter/skills
| [flutter-building-layouts](skills/flutter-building-layouts/SKILL.md) | Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application. |
| [flutter-building-plugins](skills/flutter-building-plugins/SKILL.md) | Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality. |
| [flutter-caching-data](skills/flutter-caching-data/SKILL.md) | Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup. |
| [flutter-creating-projects](skills/flutter-creating-projects/SKILL.md) | Creates a new Flutter project using the CLI or an IDE. Use when initializing a new application, package, or plugin and understanding the generated project structure. |
| [flutter-embedding-native-views](skills/flutter-embedding-native-views/SKILL.md) | Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views. |
| [flutter-handling-concurrency](skills/flutter-handling-concurrency/SKILL.md) | Executes long-running tasks in background isolates to keep the UI responsive. Use when performing heavy computations or parsing large datasets. |
| [flutter-handling-http-and-json](skills/flutter-handling-http-and-json/SKILL.md) | Executes HTTP requests and handles JSON serialization in a Flutter app. Use when integrating with REST APIs or parsing structured data from external sources. |
Expand Down
17 changes: 16 additions & 1 deletion resources/flutter_skills.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1441,4 +1441,19 @@
rendering Flutter widgets as images for display in the native widget UI.
resources:
- https://codelabs.developers.google.com/flutter-home-screen-widgets#0
- https://pub.dev/packages/home_widget
- https://pub.dev/packages/home_widget
- name: flutter-creating-projects
description: Creates a new Flutter project using the CLI or an IDE. Use when initializing a new application, package, or plugin and understanding the generated project structure.
instructions: |
Creating a new Flutter project involves using the standard `flutter create`
command or the built-in project wizards in supported IDEs (VS Code,
Android Studio, IntelliJ). The process generates a standard directory
structure that includes a `lib/` folder for source code, a `test/` folder
for automated tests, and platform-specific directories for native code
integration. The `pubspec.yaml` file at the root of the project is used to
manage dependencies, assets, and app metadata.
resources:
- https://docs.flutter.dev/reference/create-new-app
- https://docs.flutter.dev/reference/flutter-cli
- https://docs.flutter.dev/app-architecture/guide#overview-of-project-structure
- https://docs.flutter.dev/get-started/test-drive
91 changes: 91 additions & 0 deletions skills/flutter-creating-projects/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
name: "flutter-creating-projects"
description: "Creates a new Flutter project using the CLI or an IDE. Use when initializing a new application, package, or plugin and understanding the generated project structure."
metadata:
model: "models/gemini-3.1-pro-preview"
last_modified: "Sun, 22 Mar 2026 07:50:00 GMT"

---
# Creating a New Project in Flutter

## Contents
- [Core Concepts](#core-concepts)
- [Architecture and Data Flow](#architecture-and-data-flow)
- [Workflow: Creating a Project with the CLI](#workflow-creating-a-project-with-the-cli)
- [Workflow: Creating a Project with an IDE](#workflow-creating-a-project-with-an-ide)
- [Examples](#examples)

## Core Concepts

Flutter development begins with creating a project structure that contains all necessary code, assets, and platform-specific configurations.

* **Project Types:** Flutter supports multiple project types depending on your goal:
* **Application (`app`):** A standard Flutter app for mobile, web, or desktop.
* **Package (`package`):** A reusable Dart library (e.g., a state management utility).
* **Plugin (`plugin`):** A package that includes native code for platform-specific integration (e.g., accessing camera APIs).
* **Module (`module`):** A Flutter component designed to be embedded into an existing native app (Add-to-App).
* **Creation Tools:** Projects can be initialized via the **Flutter CLI** (platform-agnostic) or **IDE Wizards** (VS Code, Android Studio, IntelliJ).

## Architecture and Data Flow

When a project is created, Flutter generates a standard directory structure. Understanding this structure is essential for organizing code and resources.

* **`lib/`**: The heart of the project. Contains Dart source code. `main.dart` is the default entry point.
* **`pubspec.yaml`**: The project's manifest. Manages dependencies, assets (images, fonts), and versioning.
* **`test/`**: Contains automated unit, widget, and integration tests.
* **`android/`, `ios/`, `web/`, `linux/`, `macos/`, `windows/`**: Platform-specific "runners" that host the Flutter engine and handle native integration.
* **`analysis_options.yaml`**: Configures linting rules for the project.

## Workflow: Creating a Project with the CLI

Use the Flutter CLI for precise control over project initialization and platform support.

1. **Open the Terminal** and navigate to your workspace.
2. **Run `flutter create`**:
* Basic command: `flutter create my_app_name`
* Specify platforms: `flutter create --platforms=ios,android,web my_app_name`
* Specify project type: `flutter create --template=plugin my_plugin_name`
* Specify organization (package name): `flutter create --org com.example my_app`
3. **Navigate to the directory**: `cd my_app_name`
4. **Verify the setup**: Run `flutter doctor` to ensure your environment is ready for the selected platforms.

## Workflow: Creating a Project with an IDE

IDEs provide a visual, guided experience for project creation.

### Visual Studio Code
1. Open the **Command Palette** (`Ctrl+Shift+P` or `Cmd+Shift+P`).
2. Type `Flutter: New Project` and press Enter.
3. Select the **Application** template (or another type).
4. Choose a parent folder for the project.
5. Enter the project name and press Enter.

### Android Studio / IntelliJ
1. Select **New Flutter Project** from the Welcome screen or `File > New > New Project`.
2. Select **Flutter** in the left sidebar.
3. Ensure the **Flutter SDK path** is correct and click Next.
4. Enter the Project name, location, and select supported platforms.
5. Click **Finish**.

## Examples

### Basic Application Creation (CLI)
Initialize a project for mobile and web with a custom organization name.

```bash
flutter create --org com.mycompany --platforms=android,ios,web my_awesome_app
```

### Creating a Dart Package (CLI)
Initialize a reusable library without platform-specific code.

```bash
flutter create --template=package my_utility_library
```

### Project Structure Checklist
After creation, verify the presence of these key files:
- [ ] `lib/main.dart` (entry point)
- [ ] `pubspec.yaml` (dependency management)
- [ ] `analysis_options.yaml` (linting)
- [ ] Platform folders for your targets (e.g., `android/`, `ios/`)