Aprende 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.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 2

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Desliza para mostrar el menú

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

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 1. Capítulo 2