​
Flutter Template Structure

Our Flutter template comes with a clean, intuitive structure that serves as a foundation for your application. This guide will help you understand the initial structure and how to build upon it as your app grows.

​
Initial Directory Structure

your_app/
├── lib/
│   ├── common/
│   │   └── constants.dart
│   ├── main.dart
│   ├── pages/
│   │   └── onboarding_screen.dart
│   └── styles/
│       └── theme.dart
├── test/
├── assets/
├── android/
├── ios/
└── pubspec.yaml

​
Core Directories Explained

​
1. lib/ Directory

The lib/ directory contains all your Dart code and is organized into logical sections:

​
common/

Contains shared utilities and constants used throughout the app:

  • constants.dart - App-wide constants including:
    • String constants
    • Numeric values
    • Configuration settings
    • API endpoints (if applicable)

​
pages/

Houses all the screen/page widgets of your application:

  • onboarding_screen.dart - The initial onboarding experience for users
  • Additional pages will be added here as your app grows

​
styles/

Contains styling-related configurations:

  • theme.dart - Defines your app’s visual theme including:
    • Color schemes
    • Text styles
    • Widget themes
    • Custom theme extensions

​
main.dart

The entry point of your application, responsible for:

  • App initialization
  • Theme setup
  • Initial route configuration
  • Global providers/services setup

​
2. test/ Directory

Contains all test files, organized to mirror the lib/ directory structure:

  • Unit tests
  • Widget tests
  • Integration tests

​
3. assets/ Directory

Stores all static assets:

  • images/ - Image files
  • fonts/ - Custom fonts
  • icons/ - App icons

​
4. Platform-Specific Directories

​
android/

Contains Android-specific configuration:

  • Gradle configuration
  • Android manifest
  • Resource files
  • Platform-specific code

​
ios/

Houses iOS-specific configuration:

  • Xcode project files
  • Info.plist
  • Resource files
  • Platform-specific code

​
Key Configuration Files

​
pubspec.yaml

The central configuration file that defines:

  • App metadata
  • Dependencies
  • Asset declarations
  • Flutter SDK version

Example:

name: your_app
description: Your app description
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter
  # Add your dependencies here as needed

​
Best Practices for Growing Your App

As your application grows, consider these organizational practices:

  1. Expanding the Structure

    • Create new directories as needed (e.g., widgets/, services/, models/)
    • Group related features in feature-specific directories
    • Keep the file structure shallow and intuitive

  2. Code Organization

    • Place reusable widgets in a widgets/ directory
    • Create a models/ directory for data models
    • Add a services/ directory for business logic
    • Consider a utils/ directory for helper functions

  3. Asset Management

    • Use descriptive names for assets
    • Organize assets by feature or type
    • Follow Flutter’s asset naming conventions

  4. Testing Strategy

    • Create tests alongside new features
    • Maintain test coverage for critical functionality
    • Group tests logically matching the source structure

​
Next Steps

Now that you understand the initial template structure, you can:

  1. Start building your first screens in the pages/ directory
  2. Add custom themes and styles in styles/theme.dart
  3. Define app-wide constants in common/constants.dart
  4. Begin adding your application’s unique features

For more detailed information about specific aspects of the template, refer to: