> For the complete documentation index, see [llms.txt](https://ecm-pmdm-flutter.gitbook.io/1.-introduccion-a-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ecm-pmdm-flutter.gitbook.io/1.-introduccion-a-flutter/4.-conceptos-fundamentales-en-flutter/estructura-de-una-aplicacion-flutter.md).

# Estructura de una Aplicación Flutter

## Creamos una aplicación bàsica en Flutter

Creamos un **nuevo** **proyecto** Flutter (o abrimos uno existente) y **sustituimos** el **código** de *main.dart* por un código más sencillo:

<pre class="language-dart" data-line-numbers data-full-width="false"><code class="lang-dart">import 'package:flutter/material.dart';   // 1. Usamos material para la UI
 
<strong>// 2. runApp() (con notación arrow) inicia la aplicación Flutter y muestra la UI en pantalla
</strong>void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  // 3. Nuestra aplicación se compone de widgets
  @override
  Widget build(BuildContext context) {  // 4. El método build() determina cómo construir este widget 
    return MaterialApp(
      home: Scaffold(  // 5. Widget que proporciona una app bar y un body para nuestra pantalla inicial
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(  // 6. Centrará en su contenedor (pantalla) widget child
          child: Text('Hello World !!'),
        ),
      ),
    );
  }
}
</code></pre>

> **Nota**:   Eliminaremos el código del test de ejemplo de la función main() del fichero *test/widget\_test.dart*

Si lo **ejecutamos**, obtendremos una aplicación  similar a la siguiente imagen:

![](/files/VraZ0mtN3h3oTFyUjBvF)&#x20;

### Directorios y ficheros del proyecto Flutter

<figure><img src="/files/1hLDLntAMOW9UPzvbSTX" alt="" width="332"><figcaption><p>Vista del proyecto Flutter desde Android Studio</p></figcaption></figure>

* **`.dart_tool/`** - Directorio autogenerado tras ejecutarse *pub get*.  Contiene el fichero *package\_config.json* que especifica la versión de cada paquete y su localización.
* **`.idea/`** - Directorio que contiene la configuración de Android Studio para el proyecto.
* **`android/`** -  Directorio que contiene el código autogenerado para el proyecto Android cuando estamos desarrollando la aplicación flutter para Android.  Cuando el proyecto Flutter se compila a código nativo, se inyectará dentro de este proyecto Android para generar la aplicación Android nativa.
* `ios/` -  Directorio que contiene el código autogenerado para el proyecto iOS mientras desarrollamos la aplicación Flutter para iOS.  Cuando el proyecto Flutter se compila a código nativo, se inyectará dentro de este proyecto iOS para generar la aplicación iOS nativa.

> Para compilar la aplicación Flutter para iOS se precisará de macOS. Por ello, este directorio sólo estará disponible cuando el proyecto se cree en un Mac.

* `web/` - Este directorio autogenerado contiene el código del proyecto Web cuando creamos la aplicación Flutter para web. Cuando el proyecto Flutter se compila a código nativo, se inyectará dentro de este proyecto web para generar la aplicación web nativa.
* **`build/`** - Directorio autogenerado que contiene el código compilado de la aplicación Flutter.  Se actualiza de forma incremental por motivos de rendimiento (compilar cada vez por completo la aplicación tomaría mucho tiempo)
* **`lib/`** - (library) Este es el directorio principal cuando estamos creando nuestra aplicación Flutter.  Contendrá todos los ficheros Dart que utilizan el framework de flutter.   Por defecto, contiene el fichero **`main.dart`** que es el punto de entrada de la aplicación Flutter.
* `test/` - Directorio con el código Dart para los tests automáticos de nuestra aplicación Flutter.  El fichero *widget\_test.dart* contiene código de test de ejemplo.
* `.gitignore` - Fichero que contiene la lista de ficheros y directorios que serán ignorados por Git.
* `.metadata` - Fichero autogenerado por las herramientas de flutter que contiene metadatos o propiedades de nuestra aplicación flutter.&#x20;
* `helloflutter.iml` - Fichero con el mismo nombre del proyecto.  Contiene configuraciones adicionales del proyecto que utiliza Android studio.
* **`pubspec.yaml`** - Fichero de configuración del proyecto Flutter que utiliza Pub, la herramienta de gestión de paquetes de Flutter.
* `pubspec.lock` - Fichero autogenerado por Pub (Flutter package manager)  a partir del fichero pubspec.yaml que indica las versiones de los paquetes utilizadas en el proyecto.
* `README.md` - Fichero autogenerado al crear el proyecto que contiene una descripción inicial.

### main.dart:  Explicación del código

{% code lineNumbers="true" %}

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

void main() => runApp(MyApp());  

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
      home: Scaffold(  
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center( 
          child: Text('Hello World !!'),
        ),
      ),
    );
  }
}
```

{% endcode %}

* **Linea (1):** importamos en la aplicación el package **Material** para la interfaz de usuario: `import 'package:flutter/material.dart`

{% hint style="info" %}
**Material** es el paquete para desarrollar la UI siguiendo las directrices de diseño de Material Design especificadas por Google.

<https://m3.material.io/>
{% endhint %}

* **Linea (3):** la función **main()** es el punto de entrada de la aplicación Flutter que llama a la función **`runApp`** la cual se encarga de construir la **jerarquía de widgets** (tree) a partir del widget que se le pasa como instancia: MyApp:&#x20;

  &#x20; `void main() => runApp(MyApp());`

  > La función *runApp* asociará el widget MyApp a la pantalla (será el widget root). &#x20;
* **Linea (5):** La **clase** **MyApp** es un widget stateless y se usa para crear la UI.   Esta clase ha de sobrescribir el método ***build*** el cual será llamado por el framework de Flutter para construir la UI de la aplicación.

> La aplicación en sí misma es un *widget (*&#x65;n este caso, *stateless* *)*.   La mayoria de los componentes de la aplicacion de Flutter son widgets: `stateless` o `stateful`.

* **Linea (7):**  El método sobrescrito **`build`** devuelve un widget del tipo ***MaterialApp*** que crea la UI principal de la aplicación.  En este caso,  tiene definida la propiedad **`home`** que specifica la **UI** de la aplicación con el widget: **`Scaffold:`**
  * El widget `Scaffold` proporciona la UI básica para una aplicación con Material design que contiene las propiedades:
    * **`appBar`**:  establece la barra de la application.
    * **`body`**:  establece el widget **`Center`** para mostrar el contenido del widget `Scaffold` :
      * `Center:` widget que se usa para centrar el *child* widget que se le proporciona: *Text.  En este caso, se* mostrará un texto en el centro de la pantalla.

{% hint style="info" %}
Con MaterialApp podremos:  navegar entre pantallas (route navigation), establecer el tema de la aplicacion así como otras configuraciones.
{% endhint %}