Learn Project Structure and Hot Reload

Definition

The Flutter project structure is the organization of files and folders that make up a standard Flutter app. This structure helps you keep your code, assets, and platform-specific files organized, making your project easier to manage and maintain.

Key Folders and Files in a Flutter Project

The lib folder: contains your Dart source code, including the main entry point and app logic;
The pubspec.yaml file: manages app metadata, dependencies, assets, and configuration;
The android folder: holds Android-specific code and configuration;
The ios folder: contains iOS-specific code and configuration;
The test folder: stores Dart test files for unit and widget testing.

lib/main.dart


              1234567891011121314151617181920
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Hot reload works by injecting updated source code into the running Dart Virtual Machine (VM). Your app's state is preserved, so you can quickly experiment with UI tweaks and see the results in real time. This makes the development process much faster and more interactive.

lib/main.dart


              12345678910111213141516171819202122
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Change the message below and use hot reload to see the update instantly.
    const String message = 'Initial Message';
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

Note

Hot reload cannot update certain types of code changes, such as modifications to main() or initialization code, changes to dependencies in pubspec.yaml, or updates to native platform code in the android or ios folders. For these changes, you must perform a full restart of your app.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain more about the difference between hot reload and hot restart in Flutter?

What are some common scenarios where hot reload might not work as expected?

Can you show me how to create a simple widget in the lib folder?

Swipe to show menu

Definition

Key Folders and Files in a Flutter Project

The lib folder: contains your Dart source code, including the main entry point and app logic;
The pubspec.yaml file: manages app metadata, dependencies, assets, and configuration;
The android folder: holds Android-specific code and configuration;
The ios folder: contains iOS-specific code and configuration;
The test folder: stores Dart test files for unit and widget testing.

lib/main.dart


              1234567891011121314151617181920
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

lib/main.dart


              12345678910111213141516171819202122
            
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // Change the message below and use hot reload to see the update instantly.
    const String message = 'Initial Message';
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 2