Skip to main content

Creating Flutter Projects

1. Creating New Project

Example: Create a new Flutter project

flutter create my_flutter_app
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.dart file is the starting point of every Flutter app.
  • The pubspec.yaml file is crucial for managing dependencies and app metadata.
  • Platform-specific folders (like android/ and ios/) contain native code.
  • Assets must be declared in pubspec.yaml to 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>

Example: iOS Bundle Identifier

PRODUCT_BUNDLE_IDENTIFIER = com.example.my_flutter_app

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>

Example: iOS Info.plist Configuration

<key>LSMinimumSystemVersion</key>
<string>12.0</string>

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
  • 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

Example: Create a new Flutter project

flutter create my_flutter_app
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

Example: Building for Release

flutter build ios --release
flutter build android --release
Note: Release builds are optimized for performance and size, ideal for production deployment.

Example: Building with Custom Configuration

flutter:
  build:
    release:
      target: ios
      mode: release
      signing:
        key: "path/to/key.p12"
        cert: "path/to/cert.pem"

Was this article helpful?