cat\u00e1logo de animaciones de Flutter<\/a>, donde podr\u00e1s ver c\u00f3mo funciona cada una de ellas de manera muy visual.<\/p>\n\n\n\nAnimaciones impl\u00edcitas<\/h3>\n\n\n\n Las animaciones impl\u00edcitas son la forma m\u00e1s sencilla de animar widgets en Flutter. El framework se encarga autom\u00e1ticamente de la animaci\u00f3n cuando cambias ciertos valores. <\/p>\n\n\n\n
child: AnimatedContainer(\n duration: Duration(milliseconds: 300),\n width: _isExpanded ? 200.0 : 100.0,\n height: _isExpanded ? 200.0 : 100.0,\n color: _isExpanded ? Colors.blue : Colors.red,\n curve: Curves.easeInOut,\n child: Center(\n child: Text(\n 'Haz click aqu\u00ed',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),<\/code><\/pre>\n\n\n\nEfectos de transici\u00f3n<\/h3>\n\n\n\n Las animaciones Hero son perfectas para transiciones entre pantallas:<\/p>\n\n\n\n
\/\/ En la primera pantalla\nHero(\n tag: 'imageHero',\n child: Image.network(\n 'url_de_la_imagen',\n height: 100,\n ),\n)\n\n\/\/ En la pantalla de destino\nHero(\n tag: 'imageHero',\n child: Image.network(\n 'url_de_la_imagen',\n height: 300,\n ),\n)<\/code><\/pre>\n\n\n\nAnimaciones de loading<\/h3>\n\n\n\n Puedes a\u00f1adir una animaci\u00f3n para cuando la aplicaci\u00f3n est\u00e1 cargando, de esta manera mejorar\u00e1s la experiencia del usuario.<\/p>\n\n\n\n
Conexi\u00f3n a Internet desde una app Flutter<\/h2>\n\n\n\n La conectividad a internet es una parte fundamental de casi cualquier aplicaci\u00f3n m\u00f3vil moderna. Flutter proporciona herramientas para manejar las comunicaciones en red de manera eficiente y segura. Veamos los aspectos m\u00e1s importantes:<\/p>\n\n\n\n
Realizar peticiones HTTP<\/h3>\n\n\n\n Para realizar peticiones HTTP en Flutter, necesitamos utilizar el paquete `http`. Este paquete proporciona una manera sencilla y efectiva de comunicarse con servicios web. Primero, debemos a\u00f1adirlo a nuestro proyecto a trav\u00e9s del archivo pubspec.yaml<\/p>\n\n\n\n
dependencies:\n http: ^1.1.0<\/code><\/pre>\n\n\n\nLas peticiones HTTP son operaciones as\u00edncronas, lo que significa que necesitamos esperar a que se complete la operaci\u00f3n antes de procesar los datos. Flutter maneja esto con el uso de async <\/em>y await<\/em>.<\/p>\n\n\n\nimport 'package:flutter\/material.dart';\nimport 'package:http\/http.dart' as http;\nimport 'dart:convert';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: HomePage(),\n );\n }\n}\n\nclass HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n String _data = \"Cargando...\";\n\n \/\/ M\u00e9todo para realizar una petici\u00f3n HTTP GET\n Future<void> fetchData() async {\n final url = Uri.parse('https:\/\/jsonplaceholder.typicode.com\/posts\/1');\n try {\n final response = await http.get(url);\n\n if (response.statusCode == 200) {\n final responseData = json.decode(response.body);\n setState(() {\n _data = responseData['title'];\n });\n } else {\n setState(() {\n _data = \"Error: ${response.statusCode}\";\n });\n }\n } catch (e) {\n setState(() {\n _data = \"Error al conectar: $e\";\n });\n }\n }\n\n @override\n void initState() {\n super.initState();\n fetchData();\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Conexi\u00f3n a Internet'),\n ),\n body: Center(\n child: Text(\n _data,\n style: TextStyle(fontSize: 18),\n textAlign: TextAlign.center,\n ),\n ),\n );\n }\n}\n<\/code><\/pre>\n\n\n\nConsumir una API REST simple desde Flutter<\/h3>\n\n\n\n Las APIs REST son la forma m\u00e1s com\u00fan de comunicaci\u00f3n entre aplicaciones m\u00f3viles y servidores. Cuando trabajamos con APIs REST, es una buena pr\u00e1ctica crear modelos que representen nuestros datos. Esto nos ayuda a mantener el c\u00f3digo organizado y seguro. <\/p>\n\n\n\n
import 'package:flutter\/material.dart';\nimport 'package:http\/http.dart' as http;\nimport 'dart:convert';\n\n\/\/ Modelo para representar los datos\nclass Post {\n final int id;\n final String title;\n final String body;\n\n Post({required this.id, required this.title, required this.body});\n\n \/\/ Factory para crear un Post desde un JSON\n factory Post.fromJson(Map<String, dynamic> json) {\n return Post(\n id: json['id'],\n title: json['title'],\n body: json['body'],\n );\n }\n}\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: HomePage(),\n );\n }\n}\n\nclass HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n late Future<Post> _post;\n\n \/\/ M\u00e9todo para obtener datos de la API\n Future<Post> fetchPost() async {\n final url = Uri.parse('https:\/\/jsonplaceholder.typicode.com\/posts\/1');\n final response = await http.get(url);\n\n if (response.statusCode == 200) {\n return Post.fromJson(json.decode(response.body));\n } else {\n throw Exception('Error al cargar los datos');\n }\n }\n\n @override\n void initState() {\n super.initState();\n _post = fetchPost();\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Consumiendo API REST'),\n ),\n body: FutureBuilder<Post>(\n future: _post,\n builder: (context, snapshot) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n return Center(child: CircularProgressIndicator());\n } else if (snapshot.hasError) {\n return Center(child: Text('Error: ${snapshot.error}'));\n } else if (snapshot.hasData) {\n final post = snapshot.data!;\n return Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n 'ID: ${post.id}',\n style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),\n ),\n SizedBox(height: 10),\n Text(\n 'T\u00edtulo: ${post.title}',\n style: TextStyle(fontSize: 18),\n ),\n SizedBox(height: 10),\n Text(\n 'Contenido: ${post.body}',\n style: TextStyle(fontSize: 16),\n ),\n ],\n ),\n );\n } else {\n return Center(child: Text('No se encontraron datos'));\n }\n },\n ),\n );\n }\n}\n<\/code><\/pre>\n\n\n\nMostrar datos desde internet<\/h3>\n\n\n\n Cuando trabajamos con datos de internet, debemos considerar que las peticiones pueden tardar y pueden fallar. Flutter proporciona el widget FutureBuilder <\/strong>espec\u00edficamente para manejar estas situaciones. El FutureBuilder <\/strong>permite: <\/p>\n\n\n\n\nMostrar un indicador de carga mientras esperamos los datos<\/li>\n\n\n\n Manejar errores<\/li>\n\n\n\n Actualizar la UI autom\u00e1ticamente cuando llegan los datos<\/li>\n<\/ul>\n\n\n\nimport 'package:flutter\/material.dart';\nimport 'package:http\/http.dart' as http;\nimport 'dart:convert';\n\n\/\/ Modelo para representar los datos\nclass User {\n final int id;\n final String name;\n final String email;\n\n User({required this.id, required this.name, required this.email});\n\n \/\/ Factory para crear un User desde un JSON\n factory User.fromJson(Map<String, dynamic> json) {\n return User(\n id: json['id'],\n name: json['name'],\n email: json['email'],\n );\n }\n}\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n home: HomePage(),\n );\n }\n}\n\nclass HomePage extends StatefulWidget {\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n \/\/ M\u00e9todo para obtener datos desde la API\n Future<List<User>> fetchUsers() async {\n final url = Uri.parse('https:\/\/jsonplaceholder.typicode.com\/users');\n final response = await http.get(url);\n\n if (response.statusCode == 200) {\n final List<dynamic> jsonList = json.decode(response.body);\n return jsonList.map((json) => User.fromJson(json)).toList();\n } else {\n throw Exception('Error al cargar los usuarios');\n }\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text('Mostrar Datos desde Internet'),\n ),\n body: FutureBuilder<List<User>>(\n future: fetchUsers(),\n builder: (context, snapshot) {\n if (snapshot.connectionState == ConnectionState.waiting) {\n \/\/ Indicador de carga\n return Center(child: CircularProgressIndicator());\n } else if (snapshot.hasError) {\n \/\/ Mostrar mensaje de error\n return Center(child: Text('Error: ${snapshot.error}'));\n } else if (snapshot.hasData) {\n \/\/ Mostrar lista de usuarios\n final users = snapshot.data!;\n return ListView.builder(\n itemCount: users.length,\n itemBuilder: (context, index) {\n final user = users[index];\n return ListTile(\n leading: CircleAvatar(\n child: Text(user.id.toString()),\n ),\n title: Text(user.name),\n subtitle: Text(user.email),\n );\n },\n );\n } else {\n \/\/ Mostrar mensaje si no hay datos\n return Center(child: Text('No se encontraron usuarios'));\n }\n },\n ),\n );\n }\n}\n<\/code><\/pre>\n\n\n\n\u00a1Ya est\u00e1!<\/h2>\n\n\n\n \u00a1Perfecto! Ahora ya puedes incorporar elementos y funcionalidades m\u00e1s interesantes a tu aplicaci\u00f3n Flutter. \u00bfTienes alg\u00fan proyecto Flutter en mente? \u00a1Cu\u00e9ntanos en comentarios! Pincha en la siguiente imagen para acceder a la \u00faltima parte de este art\u00edculo.<\/p>\n\n\n
\n
En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.<\/p>\n","protected":false},"author":22,"featured_media":21860,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-21790","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion-web"],"acf":[],"yoast_head":"\n
Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte<\/title>\n<meta name=\"description\" content=\"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.\" \/>\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-2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte\" \/>\n<meta property=\"og:description\" content=\"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/\" \/>\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-02-18T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-23T08:07:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.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=\"7 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-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/\"},\"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 2\",\"datePublished\":\"2025-02-18T08:00:00+00:00\",\"dateModified\":\"2025-10-23T08:07:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/\"},\"wordCount\":980,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/flutter21.jpg\",\"articleSection\":[\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/\",\"name\":\"Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/flutter21.jpg\",\"datePublished\":\"2025-02-18T08:00:00+00:00\",\"dateModified\":\"2025-10-23T08:07:07+00:00\",\"description\":\"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/flutter21.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/flutter21.jpg\",\"width\":1250,\"height\":737},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/crear-app-con-flutter-guia-basica-2\\\/#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 2\"}]},{\"@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":"Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte","description":"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.","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-2\/","og_locale":"es_ES","og_type":"article","og_title":"Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte","og_description":"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.","og_url":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/","og_site_name":"Blog de maketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2025-02-18T08:00:00+00:00","article_modified_time":"2025-10-23T08:07:07+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg","type":"image\/jpeg"}],"author":"Irune Guinea","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Irune Guinea","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/"},"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 2","datePublished":"2025-02-18T08:00:00+00:00","dateModified":"2025-10-23T08:07:07+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/"},"wordCount":980,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg","articleSection":["Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/","url":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/","name":"Crea tu primera App con Flutter: Navegaci\u00f3n, Widgets... - Caronte","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg","datePublished":"2025-02-18T08:00:00+00:00","dateModified":"2025-10-23T08:07:07+00:00","description":"En esta segunda parte de crear tu primera app, veremos como funcionan la navegaci\u00f3n, widgets, animaciones y conexi\u00f3n a internet en Flutter.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/flutter21.jpg","width":1250,"height":737},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/crear-app-con-flutter-guia-basica-2\/#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 2"}]},{"@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\/21790","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=21790"}],"version-history":[{"count":70,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21790\/revisions"}],"predecessor-version":[{"id":23940,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21790\/revisions\/23940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/21860"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=21790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=21790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=21790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/portada-flutter-1024x604.jpg\")
<\/a><\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/containeresilizado.png\")
<\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/materialdesign-1024x471.jpg\")
<\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/cupertino-1024x855.jpg\")
<\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/primerafase-1.png\")
<\/figure>\n<\/div>\n\n\n<\/div>\n\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/bottomnavigation.png\")
<\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/listaprod.png\")
<\/figure>\n<\/div>\n\n\n![\"Grid](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/productosgrid.png\")
<\/figure>\n<\/div>\n\n\n![\"Tarjetas](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/tarjetitas-1.png\")
<\/figure>\n<\/div>\n\n\n![\"C\u00f3mo](\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/01\/guiabasica3-1024x604.jpg\")
<\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"