# Tutorial de Flutter: aprende a desarrollar aplicaciones con el SDK de Google
Si quieres [programar tu propia aplicación](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/como-crear-una-app-programar-vs-app-maker/ "Cómo crear una app: Programar vs. app maker"), no te faltarán opciones. Los kits de componentes listos para usar son muy populares por su facilidad de uso, pero los **marcos de trabajo** son una gran alternativa y facilitan el proceso de desarrollo cada vez más. Una de las opciones más modernas es el kit de desarrollo de software o SDK, por su sigla del inglés “software development kit”, [Flutter,](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-flutter/ "¿Qué es Flutter?") desarrollado por Google. Este marco de trabajo de código abierto permite desarrollar **aplicaciones móviles** de alto rendimiento para iOS y Android, así como **aplicaciones web y de escritorio** en el lenguaje de Google [Dart](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/lenguaje-de-programacion-dart-de-google/ "Lenguaje de programación Dart de Google").
En este tutorial de Flutter en español, te enseñamos los pasos más importantes para empezar a utilizar el SDK de Google.
## Aprender Flutter: ¿cuáles son los requisitos?
Si quieres aprender a programar con Flutter, no necesitas conocimientos previos de desarrollo de aplicaciones o de la web. Ni siquiera es imprescindible que estés familiarizado con Dart, el lenguaje de Google. Si conoces la **programación orientada a objetos** y **conceptos básicos de programación** como variables, bucles y condiciones, ya tienes una base suficiente para trabajar con este marco.
En este tutorial de Flutter en español, te introduciremos a la programación con este kit de desarrollo de software. Para ello, escribiremos una aplicación sencilla que **combina palabras** de forma aleatoria y presenta estas combinaciones al usuario. Necesitarás las herramientas básicas para programar con Flutter: el **SDK** **Flutter** y un **editor**. El primero está disponible para Windows, macOS y Linux, y puedes descargarlo en la [página web oficial de Flutter](https://Flutter.dev/docs/get-started/install "Sitio web de Flutter: Descarga el SDK").
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Google-Flutter-tutorial-download-page-for-the-Google-SDK.png) Selecciona el paquete de Flutter para tu sistema operativo y sigue las instrucciones para instalar y configurar el SDK. En lo que respecta al editor, puedes elegir el que quieras. Sin embargo, para una experiencia óptima de usuario con **compleción automática de código**, **resaltado de sintaxis** y **compatibilidad con la depuración y la edición de widgets**, Google recomienda utilizar el [editor de código](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/editor-de-codigo/ "Editor de código") Android Studio, para el que la empresa también ofrece un plugin oficial de Flutter. Por esto, en nuestro tutorial sobre Flutter utilizamos [Android Studio](https://developer.android.com/studio "Pagina de descarga de Android Studio"). Después de instalar este entorno de desarrollo optimizado para el desarrollo de aplicaciones de Android, configura el **plugin de Flutter**:
1. En la barra del menú, ve a “**File**”.
2. Haz clic en “**Settings**” y, luego, selecciona “**Plugins**”.
3. Escribe “**Dart**” en la línea de búsqueda y haz clic en “**Install**” en el resultado sugerido para instalar la extensión para el lenguaje de programación Dart.
4. Confirma el uso de la extensión a terceros con “**Accept**”.
5. Repite el procedimiento con el término “Flutter” y pulsa “**Restart IDE**” después de la instalación para aplicar los cambios.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Installing-the-Flutter-plugin-in-Android-Studio.png) La instalación del plugin de Flutter en Android Studio solo funciona si se ha instalado previamente la extensión para el lenguaje de programación Dart. ---
### Nota
Como alternativa a Android Studio, Google recomienda las aplicaciones [GNU Emacs](https://www.gnu.org/software/emacs/ "Página del proyecto del editor GNU Emacs"), [Visual Studio Code](https://code.visualstudio.com/ "Página web oficial de Visual Studio Code") y [IntelliJ IDEA](https://www.jetbrains.com/idea/ "Java-DIE IntelliJ IDEA"), para las que también hay un plugin de Flutter oficial.
---
## Paso 1: crea tu primera aplicación con Flutter
Después de instalar Flutter y el entorno de desarrollo (o editor) deseado, puedes crear tu primera aplicación en Flutter. Como ya hemos mencionado, en este tutorial de Flutter utilizamos Android Studio, por lo que ahora lanzaremos el IDE para este propósito. Abre la pestaña “File”, selecciona “New” y, luego, “**New Flutter** **Project**” para iniciar un nuevo proyecto basado en el marco.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-creating-a-new-Flutter-project.png) Crea un nuevo proyecto de Flutter con Android Studio. Selecciona “**Flutter Application**” como tipo de proyecto deseado y pulsa “Next”. En el menú de configuración, define ahora un título de trabajo y la ubicación local donde se guardará la aplicación. También puedes añadir una descripción del proyecto. En la línea “**Flutter SDK path**”, indica la ruta al marco de Flutter instalado.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-configuring-a-new-Flutter-app.png) La ruta al SDK Flutter es personalizable y depende de dónde hayas guardado el kit en tu sistema (en este tutorial de Flutter, C:\\src\\Flutter). Cuando termines, haz clic en “**Finalizar**” para crear la nueva aplicación en Flutter. En el archivo **main.dart**, el archivo de trabajo básico de proyectos, que también usamos en este tutorial de Flutter, escribe el siguiente código para que la aplicación presente un simple mensaje de “Hello World” (puedes borrar el código existente en el archivo main.dart):
```none
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:Flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
```
Una vez hayas insertado el fragmento, puedes ejecutar esta primera versión de tu propia aplicación. En Android Studio, selecciona la máquina virtual correspondiente (en “Flutter Device Selection”) y, luego, pulsa el **botón de ejecución** (“Run main.dart”):
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Flutter-tutorial-interface-for-selecting-a-virtual-test-device-in-Android-Studio.png) Después de hacer clic en el botón de reproducción, el archivo main.dart se ejecuta en el dispositivo de prueba seleccionado. También puedes usar la combinación de teclas \[Mayús\] + \[F10\]. ---
### Nota
Para previsualizar una aplicación en Android Studio, se debe instalar una **instancia de la plataforma de destino deseada**. De lo contrario, no podrás seleccionar un dispositivo de prueba virtual para probar la aplicación en “Flutter Device Selection”. Para añadir una aplicación, selecciona los elementos de menú “**Tools**” y “**AVD Manager**”. Finalmente, selecciona “Create virtual device” e instala el dispositivo virtual de tu elección. Puedes encontrar [instrucciones detalladas para crear y administrar dispositivos virtuales en Android Studio](https://developer.android.com/studio/run/managing-avds "developer.android.com: AVD-Management") en el foro de desarrolladores de Android.
---
El primer arranque o depuración de la aplicación llevará algún tiempo, por lo que debes tener paciencia, antes de ver el mensaje de bienvenida en la pantalla del entorno de prueba.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Google-Flutter-tutorial-the-test-results-of-your-first-app.png) Tutorial de Flutter en Google: probando la primera aplicación propia. ## Paso 2: integrar un paquete externo
Después de crear una aplicación simple en el primer paso del tutorial de Flutter, ahora la ampliaremos con un paquete externo. Para ser más precisos, incluiremos un **paquete de palabras** en nuestro proyecto, con el objetivo de diseñar una aplicación que combine palabras de forma aleatoria. Como ejemplo, utilizamos el paquete de código abierto “english\_words” (con licencia del MIT), que puedes encontrar, al igual que muchos otros paquetes de código abierto, en la plataforma [pub.dev](https://pub.dev/packages/english_words "Paquete para Flutter “english_words“ en pub.dev"). Este paquete contiene más de 5000 de las palabras más comunes en inglés, lo que lo hace ideal para los propósitos de este tutorial sobre Flutter.
Las aplicaciones de Flutter utilizan el archivo **pubspec.yaml** para gestionar paquetes y dependencias. Accede a este archivo y añade una entrada para el paquete de idiomas a la lista de dependencias (asegúrate de tener la más actualizada, en este caso, 3.1.5):
```none
dependencies:
Flutter:
sdk: Flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.5
```
A continuación, ejecuta el comando “Flutter pub get”. Android Studio dispone incluso de un botón llamado “**Pub get**” para ello.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-adding-a-language-package-in-the-Flutter-app.png) En la consola, se puede comprobar si el comando “pub get” se ha ejecutado correctamente. Si es así, verás la salida “Process finished with exit code 0”. Vuelve al archivo de trabajo principal **main.dart** e **importa** **el** **paquete de idioma**:
```none
import 'package:Flutter/material.dart';
import 'package:english_words/english_words.dart';
```
Escribe también la **siguiente línea** en el código de la aplicación:
```none
final wordPair = WordPair.random();
```
Para terminar, **sustituye** la **entrada child**, que es responsable de la salida del texto “Hello World”, por la siguiente entrada:
```none
child: Text(wordPair.asPascalCase),
```
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-the-modified-code-for-the-Flutter-tutorial-app.png) Con la nueva entrada child, los pares de palabras creados al azar (“WordPair.random”) deben comenzar respectivamente con una letra mayúscula (“asPascalCase”) ―por ejemplo, “UpperCase”. Con cada ejecución del nuevo código de la aplicación, obtendrás un **par de palabras en inglés generadas al azar**.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Example-output-for-the-created-Flutter-app.png) En el ejemplo, la aplicación de nuestro tutorial de Flutter ha combinado las dos palabras inglesas brush y cloud. ## Paso 3: añadir un widget de estado
Los widgets sin estado (*stateless widgets*), tal y como se han utilizado hasta ahora en este tutorial de Flutter de Google, no se pueden modificar. Este tipo de widget no puede cambiarse de estado mientras se ejecuta la aplicación, por lo que no es posible reescribirlo si la aplicación está en marcha. En cambio, los widgets de estado (*stateful widgets)* sí que pueden **cambiar** de **estado incluso mientras la aplicación se está ejecutando**, por lo que no es necesario haberlo determinado al ejecutar la aplicación. Si quieres añadir interactividad a los elementos de tu aplicación en Flutter, necesitarás widgets de estado.
---
### Nota
Los widgets de Flutter siempre son de o sin estado. Entre los ejemplos típicos para componentes **sin estado**, están los **iconos**, los **botones** o los **módulos de texto**. Entre los ejemplos típicos de widgets **de estado** simple, están las **casillas de verificación**, los **formularios** o los **reguladores deslizantes**.
---
Ahora vamos a integrar un widget interactivo en nuestra aplicación. Se requieren al menos dos clases para implementarlo: por una parte, una **clase StatefulWidget**, que a su vez genera una instancia de la **clase State**.
En primer lugar, creamos una clase de estado minimalista llamada “RandomWordsState” añadiendo el siguiente código **al final de main.dart**:
```none
class RandomWordsState extends State {
// TODO Add build() method
}
```
En este caso, la clase genérica de estado se asigna expresamente para su uso con el widget “RandomWords”. El propio **widget de estado** se escribe en el archivo main.dart en el siguiente paso mediante la siguiente entrada (en el código, antes de la clase “RandomWordsState”):
```none
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => RandomWordsState();
}
```
Al ejecutar este nuevo código de la aplicación, Flutter te indicará que actualmente no hay ninguna función build() definida para “RandomWordsState”.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-Dart-error-analysis-for-the-Flutter-app.png) Android Studio: análisis de errores de Dart para la aplicación de nuestro tuorial de Flutter. En el fragmento insertado de la clase State, sigue cubriendo una posición decisiva el **comentario del marcador de posición** “//TODO Add build() method”, que ahora se sustituye por el código de la función build():
```none
class RandomWordsState extends State {
@override
Widget build(BuildContext context) {
final wordPair = WordPair.random();
return Text(wordPair.asPascalCase);
}
}
```
Para terminar, **elimina** **la línea** “final wordPair = WordPair.random();” de la clase MyApp y **sustituye** **la entrada child** “child: Text(wordPair.asPascalCase),” por “child: RandomWords(),”.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Flutter-tutorial-further-modifications-to-the-code-in-the-example-app.png) Tutorial de Flutter en español: ajuste del código en la aplicación de ejemplo. Al ejecutar este nuevo código, el dispositivo de prueba virtual debe **reproducir un par de palabras** como antes, pero ahora se basa en un widget de estado que permite la interacción del usuario.
## Paso 4: crear una lista de desplazaiento sin fin
Para ofrecer un primer ejemplo de un **widget de Flutter interactivo**, ampliaremos un poco nuestra aplicación en la última parte de este tutorial de Flutter de Google: en concreto, **se adaptará** la clase “**RandomWordsState**” para que represente no solo pares de palabras individuales, sino una lista interminable de pares de palabras que el usuario pueda consultar. Además, se deberán guardar los pares de palabras ya sugeridos (para evitar entradas duplicadas) y se aumentará el tamaño de fuente de los resultados.
Empieza por los dos últimos puntos (guardar los resultados presentados y personalizar la fuente) incluyendo una **lista de \_suggestions** y una **variable \_biggerFont**:
```none
class RandomWordsState extends State {
final _suggestions = [];
final _biggerFont = const TextStyle(fontSize: 18.0);
}
```
Luego, en la misma clase "RandomWordsState", añade la **correspondiente función \_buildSuggestions()**:
```none
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
```
La función mostrada añade varias características a la aplicación: entre otras cosas, se integra la **lista de pares de palabras** (List.View), que también se vuelve más clara mediante una **línea divisoria de un píxel**. Además, se indica que se muestren otras **diez sugerencias** (línea: \_suggestions.addAll) cuando el usuario llegue al final de la lista.
Un componente básico del widget ampliado es también la **función \_buildRow()**, que se llama una vez por cada par de palabras y presenta los pares como *ListTitle*. Por lo tanto, implementaremos esta función en el próximo paso:
```none
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
```
Se debe indicar al **método build()** ,que implementamos cuando generamos el widget de estado (paso 3), que debe **usar la función buildSuggestions()**. Por lo tanto, hay que sustituir el contenido anterior del método por el siguiente código:
```none
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Word Generator'),
),
body: _buildSuggestions(),
);
}
```
Por último, actualiza el método build() también en la clase MyApp **cambiando el title** y definiendo en la **entrada de inicio** que es un widget de RandomWords:
```none
title: 'Word Generator',
home: RandomWords(),
```
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Flutter-tutorial-code-for-the-MyApp-class.png) Clase MyApp de la aplicación de prueba del tutorial de Flutter después de los ajustes. Cuando vuelvas a ejecutar el código, la aplicación se ejecutará con el **nuevo nombre** “Word Generator”. Además, se presentará toda una lista de combinaciones de palabras y podrás ir bajando para ver más resultados.
[](https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/Android-Studio-and-the-virtual-Android-device-with-the-Flutter-example-app.png) Android Studio y máquina virtual Android (píxel 2) con la aplicación de ejemplo en Flutter terminada. ## Tutorial de Flutter: resumen
En este tutorial de Flutter de Google, has aprendido los conceptos básicos más importantes para trabajar con Flutter y has podido aplicarlos en una sencilla aplicación de ejemplo. Por supuesto, puedes desarrollar aplicaciones mucho más detalladas y complejas en Flutter, así como puedes **personalizar** **el** **diseño** una vez te hayas familiarizado con el marco.
Para terminar, te presentamos el código completo de la aplicación de ejemplo desarrollada para Android en el archivo main.dart:
```none
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Word Generator',
home: RandomWords(),
);
}
}
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => RandomWordsState();
}
class RandomWordsState extends State {
final _suggestions = [];
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Word Generator'),
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
if (i.isOdd) return Divider();
final index = i ~/ 2;
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
```
This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/tutorial-de-flutter/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/tutorial-de-flutter/) for AI/LLM consumption.