{"id":21717,"date":"2025-01-14T10:50:00","date_gmt":"2025-01-14T09:50:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=21717"},"modified":"2025-10-23T10:08:31","modified_gmt":"2025-10-23T08:08:31","slug":"crear-app-con-flutter-guia-basica","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/","title":{"rendered":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica"},"content":{"rendered":"\n<p>Como ya vimos en el art\u00edculo sobre <a href=\"https:\/\/carontestudio.com\/blog\/flutter-para-desarrollo-web\/\">Flutter para desarrollo web<\/a>, Flutter es un&nbsp;<strong>framework de c\u00f3digo abierto<\/strong>&nbsp;de Google cuyo objetivo es&nbsp;<strong>agilizar y facilitar el desarrollo de aplicaciones en multiplataforma<\/strong>. En este art\u00edculo veremos c\u00f3mo crear nuestra primera app de manera sencilla. \u00a1Vamos a ello!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n del entorno para Flutter<\/h2>\n\n\n\n<p>Para empezar con nuestro proyecto, primero tenemos que instalar Flutter y preparar nuestro entorno de desarrollo. Cada sistema operativo tiene su forma de instalaci\u00f3n, est\u00e1 perfectamente explicado en la propia <a href=\"https:\/\/docs.flutter.dev\/get-started\/install\" target=\"_blank\" rel=\"noreferrer noopener\">documentaci\u00f3n de Flutter<\/a>. Para poder probar nuestra aplicaci\u00f3n, necesitaremos emularla, por lo que tambi\u00e9n debemos instalar Android Studio para crear <strong>emuladores Android.<\/strong> Si queremos desarrollar y probar en iOS, los requerimientos son algo distintos, deber\u00e1s instalar Xcode y CocoaPods. En esta gu\u00eda desarrollaremos desde Windows y para Android, ya que el desarrollo en iOS requiere de licencias espec\u00edficas. Recordemos que el desarrollo es el mismo, solo cambian la manera de emular o construir la aplicaci\u00f3n.<\/p>\n\n\n\n<p>Una vez has completado la instalaci\u00f3n siguiendo la gu\u00eda, comprobaremos desde la consola el <strong>estado de Flutter<\/strong> con el comando \u00abflutter doctor\u00bb. De esta manera podemos tener una visi\u00f3n general de los servicios que usa y su estado.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flutter doctor<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"958\" height=\"258\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter-doctor.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Flutter Doctor\" class=\"wp-image-21973\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter-doctor.png 958w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter-doctor-300x81.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter-doctor-768x207.png 768w\" sizes=\"auto, (max-width: 958px) 100vw, 958px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Crear un proyecto de Flutter<\/h2>\n\n\n\n<p>\u00a1Ya estamos listos para crear nuestro proyecto! El primer paso es crear una carpeta y abrir la terminal en ella. Una vez aqu\u00ed crearemos el proyecto con el comando:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>flutter create mi_primera_app<\/code><\/pre>\n\n\n\n<p>\u00a1Listo! Ver\u00e1s que en tu carpeta se han creado un mont\u00f3n de archivos y directorios. Esta es la <strong>base de nuestra aplicaci\u00f3n<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"336\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/crear-app.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Crear app\" class=\"wp-image-21974\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/crear-app.png 663w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/crear-app-300x152.png 300w\" sizes=\"auto, (max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Estructura del proyecto <\/h2>\n\n\n\n<p>Cuando creamos un <strong>nuevo proyecto Flutter<\/strong>, se genera una estructura de directorios y archivos est\u00e1ndar. Entender esta estructura es fundamental para organizar y desarrollar eficientemente nuestra aplicaci\u00f3n. Estos son los componentes principales:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"254\" height=\"380\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/estructura.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Estructura del proyecto\" class=\"wp-image-21977\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/estructura.png 254w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/estructura-201x300.png 201w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Directorio ra\u00edz<\/h3>\n\n\n\n<p>En la ra\u00edz del proyecto encontrar\u00e1s varios archivos y carpetas importantes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>pubspec.yaml<\/code>: Este archivo es crucial. Aqu\u00ed se definen las dependencias del proyecto, los assets (im\u00e1genes, fuentes, etc.), y otras configuraciones del proyecto.<\/li>\n\n\n\n<li><code>.gitignore<\/code>: Especifica qu\u00e9 archivos y carpetas deben ser ignorados por Git.<\/li>\n\n\n\n<li><code>README.md<\/code>: Documentaci\u00f3n b\u00e1sica del proyecto.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Carpeta lib<\/h3>\n\n\n\n<p>La carpeta&nbsp;<code>lib<\/code>&nbsp;es donde pasaremos la mayor parte del tiempo escribiendo c\u00f3digo Dart para la aplicaci\u00f3n.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>lib\/main.dart<\/code>: Es el punto de entrada de la <strong>aplicaci\u00f3n Flutter<\/strong>. Aqu\u00ed se define la funci\u00f3n&nbsp;<code>main()<\/code>&nbsp;y generalmente el widget ra\u00edz de la app.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Carpeta test<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>test\/<\/code>: Contiene los archivos de prueba para la aplicaci\u00f3n. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Carpetas espec\u00edficas de plataforma<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>android\/<\/code>: Contiene archivos espec\u00edficos para la compilaci\u00f3n y configuraci\u00f3n de Android.<\/li>\n\n\n\n<li><code>ios\/<\/code>: Similar a la carpeta android, pero para iOS.<\/li>\n\n\n\n<li><code>web\/<\/code>: (Si est\u00e1 habilitado) Contiene archivos para la compilaci\u00f3n web.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Carpeta build<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>build\/<\/code>: Esta carpeta se genera autom\u00e1ticamente y contiene los archivos compilados de tu aplicaci\u00f3n.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Otras carpetas importantes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>assets\/<\/code>: Aunque no se crea por defecto, es com\u00fan crear esta carpeta para almacenar recursos como im\u00e1genes, fuentes, etc.<\/li>\n\n\n\n<li><code>lib\/screens\/<\/code>: No es parte de la estructura por defecto, pero es una convenci\u00f3n com\u00fan para organizar los diferentes screens o p\u00e1ginas de la app.<\/li>\n\n\n\n<li><code>lib\/widgets\/<\/code>: Otra carpeta com\u00fan para almacenar widgets personalizados reutilizables.<\/li>\n\n\n\n<li><code>lib\/models\/<\/code>: Para almacenar las clases de modelo de datos.<\/li>\n\n\n\n<li><code>lib\/services\/<\/code>: Para servicios como llamadas a API, manejo de base de datos local, etc.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Archivos de configuraci\u00f3n<\/h3>\n\n\n\n<p><code>[nombre_proyecto].iml<\/code>,&nbsp;<code>.idea\/<\/code>,&nbsp;<code>.vscode\/<\/code>: Archivos y carpetas espec\u00edficos del IDE que est\u00e9s utilizando.<\/p>\n\n\n\n<p><code>analysis_options.yaml<\/code>: Define reglas para el an\u00e1lisis est\u00e1tico del c\u00f3digo Dart.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flutter Dart<\/h2>\n\n\n\n<p>Dart es el lenguaje de programaci\u00f3n utilizado para desarrollar <strong>aplicaciones en Flutter<\/strong>. Es un lenguaje orientado a objetos, con tipado est\u00e1tico, creado por Google. Entender Dart es fundamental para trabajar eficientemente con Flutter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Caracter\u00edsticas principales de Dart<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/dart-1024x575.webp\" alt=\"C\u00f3mo crear tu primera App con Flutter: Dart\" class=\"wp-image-21749\" style=\"width:454px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/dart-1024x575.webp 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/dart-300x168.webp 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/dart-768x431.webp 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/dart.webp 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Tipado est\u00e1tico<\/strong>: Dart permite tanto tipado est\u00e1tico como din\u00e1mico, pero se recomienda el uso de tipos est\u00e1ticos para mejorar la seguridad y el rendimiento del c\u00f3digo.<\/li>\n\n\n\n<li><strong>Null safety<\/strong>: Desde Dart 2.12, se introdujo la seguridad nula, lo que ayuda a prevenir errores relacionados con valores nulos.<\/li>\n\n\n\n<li><strong>Async\/Await<\/strong>: Dart tiene soporte nativo para programaci\u00f3n as\u00edncrona, lo que es crucial para operaciones como llamadas a API o acceso a bases de datos.<\/li>\n\n\n\n<li><strong>Colecciones<\/strong>: Ofrece una amplia gama de estructuras de datos como List, Set y Map.<\/li>\n\n\n\n<li><strong>Funciones de primera clase<\/strong>: Las funciones en Dart son objetos de primera clase, lo que permite pasarlas como argumentos o asignarlas a variables.<\/li>\n<\/ol>\n\n\n\n<p>En Flutter, <strong>Dart <\/strong>se utiliza para definir la estructura, l\u00f3gica y dise\u00f1o de la aplicaci\u00f3n. Estos son algunos conceptos clave:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Widgets<\/strong>: Todo en Flutter es un widget, y estos se definen usando clases de Dart.<\/li>\n\n\n\n<li><strong>Estado<\/strong>: Flutter utiliza el concepto de widgets con y sin estado (Stateful y Stateless).<\/li>\n\n\n\n<li><strong>BuildContext<\/strong>: Es un objeto importante en Flutter que proporciona informaci\u00f3n sobre la ubicaci\u00f3n del widget en el \u00e1rbol de widgets.<\/li>\n\n\n\n<li><strong>Gesti\u00f3n de estado<\/strong>: Dart se utiliza para implementar diferentes patrones de gesti\u00f3n de estado como Provider, Bloc, o Riverpod.<\/li>\n\n\n\n<li><strong>Asincron\u00eda<\/strong>: Las operaciones as\u00edncronas son comunes en Flutter, especialmente para cargar datos o realizar operaciones en segundo plano.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Funcionalidades b\u00e1sicas y estilos en Flutter<\/h2>\n\n\n\n<p>En Flutter, todo es un widget. Para crear la interfaz de usuario, utilizaremos diversos widgets como&nbsp;<code>MaterialApp<\/code>,&nbsp;<code>Scaffold<\/code>,&nbsp;<code>AppBar<\/code>, y&nbsp;<code>Text<\/code>.&nbsp;Puedes personalizar estos widgets para adaptar el aspecto y comportamiento de tu aplicaci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Estructura b\u00e1sica de una aplicaci\u00f3n Flutter<\/h3>\n\n\n\n<p>Primero, vamos a establecer la estructura b\u00e1sica de nuestra aplicaci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Mi Primera App',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(title: 'P\u00e1gina de Inicio'),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  const MyHomePage({Key? key, required this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();\n}\n\nclass _MyHomePageState extends State&lt;MyHomePage&gt; {\n  int _counter = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(widget.title),\n      ),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &lt;Widget&gt;&#91;\n            const Text(\n              'Has presionado el bot\u00f3n esta cantidad de veces:',\n            ),\n            Text(\n              '$_counter',\n              style: Theme.of(context).textTheme.headlineLarge, \/\/ Use headlineLarge for the updated API\n            ),\n          ],\n        ),\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: _incrementCounter,\n        tooltip: 'Incrementar',\n        child: const Icon(Icons.add),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"487\" height=\"889\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/primeracapt.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Estructura b\u00e1sica\" class=\"wp-image-21979\" style=\"width:249px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/primeracapt.png 487w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/primeracapt-164x300.png 164w\" sizes=\"auto, (max-width: 487px) 100vw, 487px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Explicaci\u00f3n de los componentes principales de Flutter<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>MaterialApp<\/code>: Es el widget ra\u00edz que proporciona varios widgets predeterminados de Material Design.<\/li>\n\n\n\n<li><code>Scaffold<\/code>: Proporciona una estructura b\u00e1sica de dise\u00f1o para la interfaz de usuario.<\/li>\n\n\n\n<li><code>AppBar<\/code>: Crea una barra de aplicaci\u00f3n en la parte superior de la pantalla.<\/li>\n\n\n\n<li><code>Column<\/code>: Organiza sus widgets hijos en una columna vertical.<\/li>\n\n\n\n<li><code>FloatingActionButton<\/code>: Crea un bot\u00f3n flotante circular.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir estilos<\/h3>\n\n\n\n<p>Vamos a a\u00f1adir algunos estilos b\u00e1sicos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ En la clase MyApp\ntheme: ThemeData(\n  primarySwatch: Colors.purple,\n  fontFamily: 'Roboto',\n),\n\n\/\/ En la clase _MyHomePageState\nText(\n  'Has presionado el bot\u00f3n esta cantidad de veces:',\n  style: TextStyle(fontSize: 18, color: Colors.grey&#91;600]),\n),\nText(\n  '$_counter',\n  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.purple),\n),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"896\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conestilos.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Estilos b\u00e1sicos\" class=\"wp-image-21981\" style=\"width:278px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conestilos.png 486w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conestilos-163x300.png 163w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir una imagen<\/h3>\n\n\n\n<p>A\u00f1ade una imagen a tu aplicaci\u00f3n:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Crea una carpeta&nbsp;<code>assets<\/code>&nbsp;en la ra\u00edz de tu proyecto.<\/li>\n\n\n\n<li>A\u00f1ade una imagen (por ejemplo,&nbsp;<code>flutter_logo.png<\/code>) a esta carpeta.<\/li>\n\n\n\n<li>Actualiza&nbsp;<code>pubspec.yaml<\/code><\/li>\n\n\n\n<li>A\u00f1ade la imagen al widget<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"94\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter-assets.jpg\" alt=\"C\u00f3mo crear una app con Flutter: pubspec.yaml para a\u00f1adir im\u00e1genes\" class=\"wp-image-21725\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>Image.asset(\n  'assets\/flutter_logo.png',\n  width: 100,\n  height: 100,\n),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"896\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conlogo.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Im\u00e1genes\" class=\"wp-image-21984\" style=\"width:271px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conlogo.png 488w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/conlogo-163x300.png 163w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">A\u00f1adir interactividad<\/h3>\n\n\n\n<p>Vamos a a\u00f1adir un bot\u00f3n que cambie el color del contador.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class _MyHomePageState extends State&lt;MyHomePage&gt; {\n  int _counter = 0;\n  Color _color = Colors.purple;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  void _changeColor() {\n    setState(() {\n      _color = _color == Colors.purple ? Colors.blue : Colors.purple;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      \/\/ ... (c\u00f3digo anterior)\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &lt;Widget&gt;&#91;\n            Image.asset(\n              'assets\/flutter_logo.png',\n              width: 100,\n              height: 100,\n            ),\n            Text(\n              'Has presionado el bot\u00f3n esta cantidad de veces:',\n              style: TextStyle(fontSize: 18, color: Colors.grey&#91;600]),\n            ),\n            Text(\n              '$_counter',\n              style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: _color),\n            ),\n            ElevatedButton(\n              onPressed: _changeColor,\n              child: Text('Cambiar Color'),\n            ),\n          ],\n        ),\n      ),\n      \/\/ ... (c\u00f3digo posterior)\n    );\n  }\n}\n<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"900\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/cambiarcolor.png\" alt=\"C\u00f3mo crear tu primera App con Flutter: Interactividad\" class=\"wp-image-21986\" style=\"width:321px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/cambiarcolor.png 486w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/cambiarcolor-162x300.png 162w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Emular y lanzar la aplicaci\u00f3n Flutter<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Instalar un emulador<\/h3>\n\n\n\n<p>Como hemos comentado antes, para esta gu\u00eda crearemos los emuladores Android en Android Studio. Para ello, abrimos Android Studio y en herramientas, seleccionaremos <strong>SDK manager<\/strong>. Se nos abrir\u00e1 una ventana donde debemos seleccionar <strong>SDK Tools Tab.<\/strong> Aqu\u00ed debemos seleccionar las siguientes opciones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Herramienta de l\u00ednea de comandos del SDK de Android<\/strong><\/li>\n\n\n\n<li><strong>Herramienta de plataforma SDK de Android<\/strong><\/li>\n\n\n\n<li><strong>Emulador de Android&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Controlador USB de Google<\/strong>&nbsp;<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"533\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/sdk.jpg\" alt=\"Creaci\u00f3n de emuladores Android\" class=\"wp-image-21733\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/sdk.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/sdk-300x208.jpg 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p>Ahora desde la pesta\u00f1a de herramientas, pulsamos \u00abDevice Manager\u00bb, aqu\u00ed creamos el emulador. Es bastante sencillo, solo debemos seleccionar las caracter\u00edsticas que nos interesan. Puedes seguir la <a href=\"https:\/\/developer.android.com\/studio\/run\/managing-avds?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">gu\u00eda de creaci\u00f3n de emuladores de Android Studio<\/a> si tienes alguna duda.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilizar tu propio dispositivo como emulador<\/h3>\n\n\n\n<p>Tambi\u00e9n tenemos la opci\u00f3n de usar <strong>nuestro propio dispositivo<\/strong> como emulador. Esto es posible para los dispositivos Android.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Usar el emulador desde Visual Studio Code<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"449\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/run.png\" alt=\"Ejecutar emulador\" class=\"wp-image-21987\" style=\"width:194px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/run.png 291w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/run-194x300.png 194w\" sizes=\"auto, (max-width: 291px) 100vw, 291px\" \/><\/figure>\n<\/div>\n\n\n<p>Volvemos a Visual Studio Code para lanzar nuestro emulador. Para seleccionarlos tenemos dos opciones. La primera es pulsando sobre la opci\u00f3n Flutter, en la barra inferior de VSCode a la derecha. La segunda es con el comando Ctrl + Shift + P. Con cualquiera de estas dos opciones nos saldr\u00e1 un buscador en la parte superior. Si escribimos aqu\u00ed Flutter nos saldr\u00e1 la opci\u00f3n \u00abFlutter: Select Device\u00bb. Al pulsar en ella nos saldr\u00e1n los diferentes emuladores que tengamos, recuerda que conviene probar la aplicaci\u00f3n en varios dispositivos diferentes. Al seleccionar el emulador se abrir\u00e1 una ventana con el dispositivo m\u00f3vil, esperamos a que cargue y ya podemos lanzar nuestra aplicaci\u00f3n. Desde la pesta\u00f1a \u00abEjecuci\u00f3n y depuraci\u00f3n\u00bb de VSCode, pulsamos sobre \u00abrun\u00bb y se lanzar\u00e1 en el emulador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Construir la App Flutter<\/h2>\n\n\n\n<p>Para construir la <strong>app en Flutter<\/strong>, sigue estos pasos para las diferentes plataformas:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Android<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Abre una terminal en la ra\u00edz del proyecto.<\/li>\n\n\n\n<li>Ejecuta el siguiente comando para crear un archivo APK:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>bash<code>flutter build apk\n<\/code><\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>El APK se generar\u00e1 en&nbsp;<code>build\/app\/outputs\/flutter-apk\/app-release.apk<\/code>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">iOS<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aseg\u00farate de tener XCode instalado y una cuenta de desarrollador de Apple.<\/li>\n\n\n\n<li>Ejecuta el siguiente comando en la terminal:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>bash<code>flutter build ios\n<\/code><\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Abre el proyecto de Xcode generado en&nbsp;<code>ios\/Runner.xcworkspace<\/code>.<\/li>\n\n\n\n<li>Configura los certificados y perfiles de aprovisionamiento en Xcode.<\/li>\n\n\n\n<li>Selecciona \u00abProduct &gt; Archive\u00bb en Xcode para generar el archivo IPA.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Web<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aseg\u00farate de que el soporte web est\u00e9 habilitado:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>bash<code>flutter config --enable-web\n<\/code><\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Construye la versi\u00f3n web con el siguiente comando:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>bash<code>flutter build web\n<\/code><\/code><\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Los archivos generados se encontrar\u00e1n en la carpeta&nbsp;<code>build\/web<\/code>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u00a1Lo tenemos!<\/h2>\n\n\n\n<p>\u00a1Ya lo tienes! Puedes probar en tus propios dispositivos la aplicaci\u00f3n que hemos hecho. Con esta gu\u00eda b\u00e1sica ya tienes la base para experimentar y desarrollar tus <strong>aplicaciones en Flutter<\/strong>. \u00bfTe atreves a seguir explorando? Pincha en la siguiente imagen para acceder a la segunda parte de este art\u00edculo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"604\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21-1024x604.jpg\" alt=\"\" class=\"wp-image-21860\" style=\"width:405px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21-1024x604.jpg 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21-300x177.jpg 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21-768x453.jpg 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg 1250w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?<\/p>\n","protected":false},"author":22,"featured_media":21748,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-21717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de maketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-14T09:50:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T08:08:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Irune Guinea\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irune Guinea\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/\"},\"author\":{\"name\":\"Irune Guinea\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/300ad5e85146a39ec7ea40f21abc8b38\"},\"headline\":\"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica\",\"datePublished\":\"2025-01-14T09:50:00+00:00\",\"dateModified\":\"2025-10-23T08:08:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/\"},\"wordCount\":1524,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/portada-flutter.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/\",\"name\":\"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/portada-flutter.jpg\",\"datePublished\":\"2025-01-14T09:50:00+00:00\",\"dateModified\":\"2025-10-23T08:08:31+00:00\",\"description\":\"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/portada-flutter.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/portada-flutter.jpg\",\"width\":1250,\"height\":737},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/300ad5e85146a39ec7ea40f21abc8b38\",\"name\":\"Irune Guinea\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g\",\"caption\":\"Irune Guinea\"},\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/irune\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte","description":"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte","og_description":"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?","og_url":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2025-01-14T09:50:00+00:00","article_modified_time":"2025-10-23T08:08:31+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg","type":"image\/jpeg"}],"author":"Irune Guinea","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Irune Guinea","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/"},"author":{"name":"Irune Guinea","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/300ad5e85146a39ec7ea40f21abc8b38"},"headline":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica","datePublished":"2025-01-14T09:50:00+00:00","dateModified":"2025-10-23T08:08:31+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/"},"wordCount":1524,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/","url":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/","name":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica 2025 - Caronte","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg","datePublished":"2025-01-14T09:50:00+00:00","dateModified":"2025-10-23T08:08:31+00:00","description":"\u00bfQuieres empezar a desarrollar tus propias aplicaciones este 2025? En este art\u00edculo aprender\u00e1s como hacerlo en Flutter. \u00bfTe apuntas?","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter.jpg","width":1250,"height":737},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear tu primera App con Flutter: Gu\u00eda b\u00e1sica"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/300ad5e85146a39ec7ea40f21abc8b38","name":"Irune Guinea","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3002e85ac73b53aad9f60e3f1b230ffa3c9dcfcf1167b8cc8131a093f97a15da?s=96&d=mm&r=g","caption":"Irune Guinea"},"url":"https:\/\/carontestudio.com\/blog\/author\/irune\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=21717"}],"version-history":[{"count":54,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21717\/revisions"}],"predecessor-version":[{"id":22475,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21717\/revisions\/22475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/21748"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=21717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=21717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=21717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}