Creating Flutter Projects
1. Creating New Project
| Option | Values | Description |
|---|---|---|
| --project-name | my_flutter_app |
Name of the project to create |
| --platforms | android,ios,web |
Platforms to create (comma-separated) |
| --org | com.example |
Organization identifier for package names |
| --template | app |
Project template to use (e.g., app, module) |
| --android | java |
Android project language (Java or Kotlin) |
| --ios | swift |
iOS project language (Swift or Objective-C) |
Note: The
flutter create command generates a complete Flutter project structure including source code, assets, tests, and configuration files.2. Understanding Project Structure
Example: Basic Flutter Project Layout
flutter_project/
├── lib/
│ └── main.dart
├── test/
├── pubspec.yaml
├── README.md
└── android/
└── app/
└── src/
└── main/
└── java/
└── com/example/myapp/
└── MainActivity.java
| File/Directory | Description | Notes |
|---|---|---|
| lib/main.dart | Main entry point of the app | Contains main() function and root widget |
| pubspec.yaml | Project configuration and dependencies | Defines app name, version, assets, dependencies |
| test/ | Unit and widget tests | Contains test files for app logic and UI |
| README.md | Project documentation | Explains how to set up and run the project |
| android/ | Android-specific files | Includes build configuration, Java/Kotlin code |
| ios/ | iOS-specific files | Includes build configuration, Swift code |
| web/ | Web-specific files | Contains HTML, JS, and CSS for web builds |
| assets/ | App assets (images, fonts, etc.) | Must be declared in pubspec.yaml |
Note: The
lib/ directory is where all Dart code lives. It's the core of your Flutter app.
Warning: Avoid placing Dart files directly in the root of your project. Always use
lib/ for Dart code.
Key Points
- The
lib/main.dartfile is the starting point of every Flutter app. - The
pubspec.yamlfile is crucial for managing dependencies and app metadata. - Platform-specific folders (like
android/andios/) contain native code. - Assets must be declared in
pubspec.yamlto be used in the app.
3. Using Flutter Templates
| Template Type | Description | Command | Notes |
|---|---|---|---|
| app | Creates a new Flutter project with a basic app structure | flutter create my_app |
Default template for a standard Flutter app |
| module | Creates a new Flutter module project (for embedding in existing apps) | flutter create --template module my_module |
Useful for integrating Flutter into existing iOS/Android apps |
| plugin | Creates a new Flutter plugin project (for platform-specific code) | flutter create --template plugin my_plugin |
Used to build plugins that can be shared across Flutter apps |
| web | Creates a new Flutter project with web support enabled | flutter create --platforms web my_web_app |
Enables Flutter to run on the web using the Flutter Web engine |
Example: Creating a Flutter Web App
flutter create --platforms web my_web_app
cd my_web_app
flutter run -d chrome
Note: The
--platforms web flag enables web support in the project configuration.
Warning: Not all Flutter plugins support web. Check plugin compatibility before using.
4. Setting App Names and Bundle IDs
| Field | Value | Description |
|---|---|---|
| name | my_flutter_app |
Display name of the app |
| description | A new Flutter project |
Short description of the app |
| version | 1.0.0 |
App version, following semantic versioning |
| platforms.android.packageName | com.example.my_flutter_app |
Android package name (bundle ID) |
| platforms.ios.bundleIdentifier | com.example.my_flutter_app |
iOS bundle identifier |
Example: pubspec.yaml configuration
name: my_flutter_app
description: A new Flutter project
version: 1.0.0
environment:
sdk: "^3.3.0"
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
Example: Android Manifest Configuration
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.my_flutter_app">
<application
android:name="${applicationName}"
android:label="my_flutter_app">
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
5. Configuring Platform-Specific Settings
| Setting | Platform | Configuration | Description |
|---|---|---|---|
| minSdkVersion | Android | 21 |
Minimum Android SDK version required |
| targetSdkVersion | Android | 33 |
Target Android SDK version for compatibility |
| deploymentTarget | iOS | 12.0 |
Minimum iOS version for deployment |
| bundleIdentifier | iOS | com.example.myapp |
Unique identifier for iOS app bundle |
| applicationId | Android | com.example.myapp |
Unique identifier for Android app package |
Example: Android Manifest Configuration
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="33" />
</manifest>
6. Setting Minimum SDK Versions
| Property | Value | Description |
|---|---|---|
| flutter.minSdkVersion | 16 |
Minimum Android SDK version required |
| flutter.targetSdkVersion | 33 |
Target Android SDK version for compilation |
| flutter.minIOSVersion | 12.0 |
Minimum iOS version supported |
| flutter.minMacOSVersion | 10.15 |
Minimum macOS version supported |
Example: Setting SDK versions in pubspec.yaml
name: my_flutter_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=3.0.0 <4.0.0"
flutter:
uses-material-design: true
minSdkVersion: 16
targetSdkVersion: 33
minIOSVersion: 12.0
minMacOSVersion: 10.15
7. Creating Flavors
Flavors in Flutter allow you to define different configurations for your app, such as development, staging, and production environments. This is useful for managing different API endpoints, feature flags, or other environment-specific settings.
| Flavor | Description | Configuration |
|---|---|---|
| dev | Development environment with local API endpoints and debug features enabled. | flutter run --flavor dev |
| staging | Staging environment with staging API endpoints and limited features. | flutter run --flavor staging |
| prod | Production environment with production API endpoints and all features enabled. | flutter run --flavor prod |
Example: Flavor Configuration in pubspec.yaml
flutter:
uses-material-design: true
# Flavor-specific configurations
assets:
- assets/config/
- assets/images/
# Define flavors
flavor:
dev:
name: "Dev"
package-name: "com.example.dev"
version: "1.0.0-dev"
staging:
name: "Staging"
package-name: "com.example.staging"
version: "1.0.0-staging"
prod:
name: "Production"
package-name: "com.example.prod"
version: "1.0.0"
Example: Using Flavors in Code
import 'package:flutter/material.dart';
void main() {
// Determine the current flavor
String? flavor = const String.fromEnvironment('FLAVOR', defaultValue: 'dev');
runApp(MyApp(flavor: flavor));
}
class MyApp extends StatelessWidget {
final String flavor;
MyApp({required this.flavor});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flavor App',
home: Scaffold(
appBar: AppBar(
title: Text('Flavor: $flavor'),
),
body: Center(
child: Text('Running in $flavor mode'),
),
),
);
}
}
Note: To use flavors, you must configure your project's build settings and define the necessary environment variables or build configurations in your IDE or build scripts.
8. Organizing Project Architecture
Example: Basic Flutter Project Structure
flutter_project/
├── lib/
│ ├── main.dart
│ └── screens/
│ └── home_screen.dart
├── test/
│ └── widget_test.dart
├── pubspec.yaml
└── README.md
| Directory/File | Description | Usage |
|---|---|---|
| lib/ | Source code directory for your app | Contains all Dart files and main entry point (main.dart) |
| lib/main.dart | Main entry point of the app | Bootstraps the app using runApp() |
| lib/screens/ | Organizes UI screens | Separates different screen components (e.g., HomeScreen, ProfileScreen) |
| lib/models/ | Business logic and data models | Stores domain-specific classes like User, Product |
| lib/services/ | External API or service integrations | Handles network calls, local storage, authentication |
| lib/widgets/ | Reusable UI components | Custom widgets shared across multiple screens |
| test/ | Unit and widget tests | Ensures correctness of components and logic |
| pubspec.yaml | Project configuration and dependencies | Defines metadata, assets, plugins, and version info |
Recommended Folder Structure
- lib/main.dart: Entry point for the app
- lib/screens/: Screen-level UI components
- lib/models/: Data models and business logic
- lib/services/: External services (e.g., APIs, Firebase)
- lib/widgets/: Reusable custom widgets
- test/: Unit and widget tests
Note: Flutter does not enforce a strict folder structure, but following a consistent pattern improves maintainability and scalability.
9. Using Flutter CLI Commands
| Command | Description | Flags |
|---|---|---|
| flutter create | Creates a new Flutter project | --org, --project-name, --platforms |
| flutter run | Runs the app on a connected device or emulator | --debug, --release, --target |
| flutter build | Builds the app for a specific platform | --release, --web, --linux |
| flutter pub get | Fetches dependencies from pub.dev | --offline, --verbose |
| flutter doctor | Checks the Flutter installation for issues | --android-licenses, --machine |
Note: Use
flutter help to see all available commands and their usage.10. Managing Build Configurations
| Configuration | Description | Usage |
|---|---|---|
| flutter build | Builds the Flutter app for a specific platform | flutter build ios, flutter build android |
| --release | Builds a release version of the app with optimizations | flutter build ios --release |
| --debug | Builds a debug version of the app with debugging support | flutter build android --debug |
| --profile | Builds a profile version for performance analysis | flutter build ios --profile |
Note: Release builds are optimized for performance and size, ideal for production deployment.