Flutter Project Structure

Key Folders & Files

lib/
├── main.dart
├── screens/
└── widgets/

dependencies:
  flutter:
    sdk: flutter

assets/
├── images/
└── fonts/

test/
└── widget_test.dart

🔹 Complete Project Structure

Here's what a typical Flutter project looks like:

my_flutter_app/
├── android/              # Android-specific files
├── ios/                  # iOS-specific files
├── lib/                  # Main Dart code
│   ├── main.dart        # App entry point
│   ├── screens/         # Screen widgets
│   ├── widgets/         # Reusable widgets
│   ├── models/          # Data models
│   ├── services/        # API & services
│   └── utils/           # Helper functions
├── test/                # Test files
├── assets/              # Images, fonts, etc.
│   ├── images/
│   └── fonts/
├── pubspec.yaml         # Dependencies & config
├── pubspec.lock         # Locked versions
├── analysis_options.yaml # Linting rules
└── README.md            # Project documentation

🔹 main.dart - Entry Point

Every Flutter app starts with main.dart:

// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(child: Text('Hello Flutter!')),
    );
  }
}

🔹 pubspec.yaml Configuration

Manage dependencies and assets:

name: my_app
description: A new Flutter project
version: 1.0.0+1

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  http: ^1.1.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  
  # Add assets
  assets:
    - assets/images/
    - assets/icons/
  
  # Add fonts
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700

🔹 Organizing Code by Feature

Structure your lib/ folder for scalability:

lib/
├── main.dart
├── app.dart
├── features/
│   ├── authentication/
│   │   ├── screens/
│   │   │   ├── login_screen.dart
│   │   │   └── signup_screen.dart
│   │   ├── widgets/
│   │   │   └── login_form.dart
│   │   └── services/
│   │       └── auth_service.dart
│   └── home/
│       ├── screens/
│       │   └── home_screen.dart
│       └── widgets/
│           └── home_card.dart
├── shared/
│   ├── widgets/
│   │   ├── custom_button.dart
│   │   └── loading_indicator.dart
│   └── utils/
│       └── constants.dart
└── core/
    ├── theme/
    │   └── app_theme.dart
    └── routes/
        └── app_routes.dart

🔹 Example: Organized Screen

Create a screen in the proper location:

// lib/features/profile/screens/profile_screen.dart
import 'package:flutter/material.dart';
import '../widgets/profile_header.dart';
import '../widgets/profile_stats.dart';

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Column(
        children: [
          ProfileHeader(),
          ProfileStats(),
          // More widgets...
        ],
      ),
    );
  }
}

🔹 Adding Assets

Use images and assets in your app:

// 1. Add to pubspec.yaml
// flutter:
//   assets:
//     - assets/images/logo.png

// 2. Use in your code
class LogoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'assets/images/logo.png',
      width: 100,
      height: 100,
    );
  }
}

🔹 Platform-Specific Folders

Android and iOS configurations: