## Learning Objectives

By the end of this chapter, you will be able to:

- Create and configure Flutter projects using CLI and IDE tools
- Understand project structure and key files (pubspec.yaml, main.dart, etc.)
- Manage dependencies and packages effectively
- Use Flutter DevTools for debugging and profiling
- Configure build variants and environments (dev, staging, production)
- Set up version control and project organization best practices

1

## Creating a New Flutter Project

### Using Flutter CLI

Create a new Flutter project from the command line:

### Create Project Command

    flutter create my_app
    cd my_app

### Project Options

- `--org`: Organization identifier (e.g., com.example)
- `--platforms`: Specify target platforms (android, ios, web, etc.)
- `--project-name`: Custom project name

### Example with Options

    flutter create --org com.afrilen --platforms android,ios course_catalog

2

## Project Structure

### Key Files and Directories

- `pubspec.yaml` — Project metadata, dependencies, assets, and configuration
- `lib/main.dart` — Application entry point
- `lib/` — Main source folder for Dart code
- `android/` — Android-specific configuration and native code
- `ios/` — iOS-specific configuration and native code
- `test/` — Unit and widget tests
- `assets/` — Images, fonts, and other resources
- `.dart_tool/` and `build/` — Generated files (exclude from version control)

### Suggested Folder Layout

    lib/
      main.dart
      app.dart
      models/
        user.dart
        course.dart
      screens/
        home_screen.dart
        detail_screen.dart
      widgets/
        custom_button.dart
        card_widget.dart
      services/
        api_service.dart
        storage_service.dart
      utils/
        constants.dart
        helpers.dart

3

## Understanding pubspec.yaml

### Key Sections

- `name`: Package name (lowercase with underscores)
- `description`: Project description
- `version`: Version number (e.g., 1.0.0+1)
- `dependencies`: Runtime dependencies
- `dev_dependencies`: Development-only dependencies
- `flutter`: Flutter-specific configuration (assets, fonts)

### Example pubspec.yaml

    name: course_catalog
    description: A Flutter course catalog app
    version: 1.0.0+1

    environment:
      sdk: '>=3.0.0 <4.0.0'

    dependencies:
      flutter:
        sdk: flutter
      http: ^1.1.0
      provider: ^6.1.0
      shared_preferences: ^2.2.0

    dev_dependencies:
      flutter_test:
        sdk: flutter
      flutter_lints: ^3.0.0

    flutter:
      uses-material-design: true
      assets:
        - assets/images/
        - assets/icons/
      fonts:
        - family: CustomFont
          fonts:
            - asset: assets/fonts/CustomFont-Regular.ttf

4

## Managing Dependencies

### Adding Packages

- Add package name and version to `pubspec.yaml`
- Run `flutter pub get` to download dependencies
- Import packages in your Dart files: `import 'package:http/http.dart';`

### Common Commands

    # Get dependencies
    flutter pub get

    # Upgrade dependencies
    flutter pub upgrade

    # Check for outdated packages
    flutter pub outdated

    # Add a package
    flutter pub add http

    # Remove a package
    flutter pub remove http

### Version Constraints

- `^1.2.3` — Compatible with 1.2.3, up to (but not including) 2.0.0
- `1.2.3` — Exact version
- `>=1.2.3 <2.0.0` — Range specification

5

## IDE Setup and Configuration

### VS Code Setup

- Install Flutter extension from VS Code marketplace
- Install Dart extension (usually installed with Flutter extension)
- Configure Flutter SDK path in settings if needed
- Use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) for Flutter commands

### Android Studio Setup

- Install Flutter and Dart plugins via Plugins settings
- Configure Flutter SDK path in Preferences
- Set up Android SDK and create AVD (Android Virtual Device)
- Use Flutter Device Selector to choose target device

### Useful IDE Features

- Hot Reload (r) — Apply code changes instantly
- Hot Restart (R) — Restart app with state reset
- Flutter Inspector — Visual widget tree debugging
- Code formatting (Shift+Alt+F / Shift+Option+F)
- Go to definition, Find references, Rename symbol

6

## Flutter DevTools

### Overview

Flutter DevTools is a suite of debugging and performance tools for Flutter apps.

### Accessing DevTools

- Run `flutter pub global activate devtools`
- Start DevTools: `flutter pub global run devtools`
- Or use IDE integration (VS Code/Android Studio)
- Connect to running app via the URL shown in console

### Key Tools

- Widget Inspector: Visualize widget tree, inspect properties
- Performance: Frame rendering analysis, CPU profiling
- Memory: Memory usage, heap snapshots, leak detection
- Network: HTTP request monitoring
- Logging: Real-time log viewing

7

## Build Variants and Environments

### Flavors (Android) and Schemes (iOS)

Configure different build variants for development, staging, and production environments.

### Using Dart Defines

    # Development
    flutter run --dart-define=ENV=dev --dart-define=API_URL=https://dev-api.example.com

    # Production
    flutter build apk --dart-define=ENV=prod --dart-define=API_URL=https://api.example.com

### Accessing in Code

    const String apiUrl = String.fromEnvironment('API_URL',
        defaultValue: 'https://api.example.com');
    const String env = String.fromEnvironment('ENV', defaultValue: 'dev');

    // Use in your app
    if (env == 'dev') {
      // Development-specific configuration
    }

8

## Version Control Setup

### Git Configuration

- Initialize repository: `git init`
- Create `.gitignore` file (Flutter provides a template)
- Commit initial project structure

### Essential .gitignore Entries

    # Flutter/Dart
    .dart_tool/
    .flutter-plugins
    .flutter-plugins-dependencies
    .packages
    .pub-cache/
    .pub/
    build/
    *.iml
    *.ipr
    *.iws
    .idea/

    # Android
    *.apk
    *.aab
    *.ap_
    *.dex
    local.properties

    # iOS
    *.mode1v3
    *.mode2v3
    *.moved-aside
    *.pbxuser
    *.xcuserdata
    *.xcworkspace
    Pods/
    *.app.dSYM.zip

### Best Practices

- Commit `pubspec.yaml` and `pubspec.lock`
- Don't commit `build/` or `.dart_tool/` directories
- Use meaningful commit messages
- Create branches for features and fixes

9

## Running and Debugging

### Running Apps

- `flutter run` — Run in debug mode
- `flutter run --release` — Run in release mode
- `flutter run --profile` — Run in profile mode (for performance testing)
- Use device selector: `flutter devices` to list available devices

### Debugging Techniques

- Set breakpoints in IDE
- Use `print()` or `debugPrint()` for logging
- Use `assert()` for development-time checks
- Inspect widget tree with Flutter Inspector
- Use `flutter analyze` for static analysis

### Useful Commands

    # Check for issues
    flutter doctor
    flutter analyze

    # Clean build
    flutter clean
    flutter pub get

    # Build for specific platform
    flutter build apk
    flutter build ios
    flutter build web

10

## Project Organization Best Practices

### Organization Guidelines

- Separate concerns: models, screens, widgets, services, utils
- One widget per file for major components
- Use meaningful file and folder names
- Keep `main.dart` minimal; extract app setup to separate files
- Create reusable widgets in a `widgets/` folder
- Centralize constants and configuration
- Document complex logic with comments

11

## Exercises

### 1. Project Setup

Create a new Flutter project named "my_first_app". Configure it with your organization identifier. Add three dependencies: http, provider, and shared_preferences. Verify the setup with `flutter doctor` and `flutter analyze`.

### 2. Project Structure

Organize your project with the suggested folder layout. Create placeholder files for models, screens, widgets, and services folders. Document your structure in a README.md file.

### 3. Environment Configuration

Set up environment configuration using Dart defines. Create a constants file that reads API_URL and ENV from environment variables with sensible defaults. Test with different build commands.