{"id":2129,"date":"2020-02-26T19:08:33","date_gmt":"2020-02-26T18:08:33","guid":{"rendered":"https:\/\/strattonapps.com\/?p=2129"},"modified":"2020-02-28T12:13:33","modified_gmt":"2020-02-28T11:13:33","slug":"flutter-essentials","status":"publish","type":"post","link":"https:\/\/strattonapps.com\/es\/mobile-development\/flutter\/flutter-essentials\/","title":{"rendered":"Easy Flutter: elementos esenciales para principiantes"},"content":{"rendered":"<p>En este art\u00edculo haremos un breve <strong>Introducci\u00f3n<\/strong> sobre Flutter Cubriremos la historia de su fundaci\u00f3n, su estructura y su elemento m\u00e1s esencial: <strong>los widgets<\/strong>. Sin embargo, para entrar en contexto primero vamos a definir esa tecnolog\u00eda para dar forma al concepto.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"467\" src=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-1024x467.png\" alt=\"Flutter in different devices\" class=\"wp-image-2137\" srcset=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-1024x467.png 1024w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-300x137.png 300w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-768x350.png 768w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-1536x700.png 1536w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/1_AjCMJbeBnv2vVDjiNJB3pw-2-2048x934.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Flutter sensible en diferentes dispositivos y plataformas<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es el aleteo?<\/h2>\n\n\n\n<p>Bueno, seg\u00fan Google en <a class=\"rank-math-link rank-math-link\" href=\"https:\/\/flutter.dev\/\" target=\"_blank\" rel=\"noopener\">la p\u00e1gina de documentaci\u00f3n<\/a>,<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Flutter es el kit de herramientas de interfaz de usuario de Google para crear hermosas aplicaciones compiladas de forma nativa para dispositivos m\u00f3viles, web y de escritorio desde una \u00fanica base de c\u00f3digo.<\/p><cite><a href=\"https:\/\/flutter.dev\/\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">Flutter.dev<\/a><\/cite><\/blockquote>\n\n\n\n<p>Entonces, como dicen, es un <strong>Kit de desarrollo de software de UI (SDK)<\/strong> construido por ellos que permite a los desarrolladores crear aplicaciones para  <a class=\"rank-math-link\" href=\"https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/ios-devs\" target=\"_blank\" rel=\"noopener\">iOS<\/a>,  <a class=\"rank-math-link\" href=\"https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/android-devs\" target=\"_blank\" rel=\"noopener\">Androide<\/a>, la <a class=\"rank-math-link\" href=\"https:\/\/flutter.dev\/docs\/get-started\/flutter-for\/web-devs\" target=\"_blank\" rel=\"noopener\">web<\/a>, <a class=\"rank-math-link\" href=\"https:\/\/flutter.dev\/desktop\" target=\"_blank\" rel=\"noopener\">Windows, Mac, Linux<\/a>, incluido Google Fuchsia, ese extra\u00f1o sistema operativo de c\u00f3digo abierto en desarrollo actualmente por Google. S\u00ed, tal como lo le\u00edste. De antemano (m\u00e1s adelante explicaremos sus limitaciones) podemos asumir y resumir que es un paquete, una colecci\u00f3n de <strong>herramientas de software<\/strong> para el desarrollo en un paquete instalable con el que puede f\u00e1cilmente <strong>crear excelentes aplicaciones multiplataforma<\/strong>. Ahora veamos el origen de este SDK.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Una peque\u00f1a historia<\/h2>\n\n\n\n<p>Flutter sali\u00f3 a este mundo con el nombre &quot;<strong>Cielo<\/strong>&quot;Durante la Cumbre de Desarrolladores de Dart de 2015, ya indicando su prop\u00f3sito de presentar en un solo c\u00f3digo base una aplicaci\u00f3n creada para ambos <strong>Android e iOS a 120 cuadros por segundo (FPS)<\/strong>. <\/p>\n\n\n\n<p>Luego, Google lanz\u00f3 Flutter alpha, el V-0.06, en mayo de 2017. M\u00e1s tarde, en junio de 2018, en la conferencia de GMTC en Beijing, anunciaron <strong>Vista previa de lanzamiento de aleteo 1<\/strong>, que muestra una nueva fase del desarrollo en las etapas finales de estabilizaci\u00f3n para 1.0 y la segunda vista previa de Flutter en septiembre de 2018.<\/p>\n\n\n\n<p>Fue en este momento cuando los desarrolladores comenzaron a sentir los delirios y la magia. Incluso antes de que se lanzara la versi\u00f3n 1.0, muchas aplicaciones de Flutter llegaron a las tiendas. Aplicaciones como: Alibaba, Google Ads, Tencent, Reflecty fueron prueba de que Flutter podr\u00eda <strong>cambiar el desarrollo de la aplicaci\u00f3n front-end<\/strong>.<\/p>\n\n\n\n<p>Finalmente, Google lanz\u00f3 <strong>Flutter 1.0<\/strong>, la versi\u00f3n estable, el 5 de diciembre de 2018. Para esto trabajaron en dos dimensiones en 2D para crear una hermosa aplicaci\u00f3n llamada &quot;<strong>La historia de todo<\/strong>&quot;, Que era una especie de l\u00ednea de tiempo arreglada de la historia conocida desde Big Bang hasta nuestros d\u00edas. Esta aplicaci\u00f3n fue excelente y mostr\u00f3 cu\u00e1n poderoso pod\u00eda ser Flutter.<\/p>\n\n\n\n<p>Bueno, historia interesante, pero \u00bfqu\u00e9 contiene exactamente ese paquete?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arquitectura marco<\/h2>\n\n\n\n<p>Flutter tiene aproximadamente los siguientes componentes:<\/p>\n\n\n\n<ul><li>los <strong>Dardo<\/strong> plataforma. Dart es el <strong>lenguaje de codificaci\u00f3n<\/strong> con el que se hacen las aplicaciones Flutter.<\/li><li><strong>Aleteo del motor<\/strong>, principalmente escrito en C ++ y usando el motor gr\u00e1fico Skia de Google<\/li><li><strong>Biblioteca de la fundaci\u00f3n<\/strong> (clases y funciones b\u00e1sicas para crear aplicaciones y la API para el motor)<\/li><li>Un mont\u00f3n de <strong>widgets espec\u00edficos<\/strong><\/li><\/ul>\n\n\n\n<p>Espera ... pero \u00bfqu\u00e9 son esas cosas llamadas &quot;widgets&quot;?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Widgets<\/h2>\n\n\n\n<p>Si est\u00e1 acostumbrado a programar con widgets de lenguajes de programaci\u00f3n orientada a objetos (OOP), le resultar\u00e1 familiar. Tenemos que recordar que Flutter es un \u00fatil kit de herramientas de interfaz de usuario para crear aplicaciones multiplataforma. Entonces podemos decir que un widget es un <strong>Descripci\u00f3n completa de una parte de la interfaz de usuario<\/strong>. La codificaci\u00f3n en Flutter se trata de crear widgets a partir de otros widgets, haciendo <strong>composici\u00f3n<\/strong> y resultando en un complejo <strong>\u00e1rbol de widgets<\/strong>. La funci\u00f3n build () hace que un widget se describa a trav\u00e9s de otros widgets de niveles inferiores.<\/p>\n\n\n\n<p>Este marco moderno se inspira en React. Los widgets describen c\u00f3mo debe ser la vista dada su actual <strong>configuraci\u00f3n y estado<\/strong>. Al cambiar su estado, el widget reconstruye su descripci\u00f3n, el marco se da cuenta y se compara con la descripci\u00f3n anterior para aplicar el <strong>cambios m\u00ednimos<\/strong> necesario en el <strong>\u00e1rbol de renderizado subyacente<\/strong> para pasar de un estado a otro.<\/p>\n\n\n\n<p>Sin embargo, no todos los widgets son iguales o similares: hay <strong>muchos tipos<\/strong> de widgets. Por ejemplo, StatefulWidget () y StatelessWidget () difieren entre ellos en el <strong>estado del widget<\/strong>. Mientras que StatelessWidgets son est\u00e1ticos en t\u00e9rminos de estado, StatefulWidgets tienen un estado que cambia en tiempo de ejecuci\u00f3n. Adem\u00e1s, tambi\u00e9n divergen en su <strong>interpretaci\u00f3n<\/strong>. Un contenedor () es un widget que representa alguna vista, pero BoxDecoration () dentro de ese contenedor tambi\u00e9n es un widget que le da una caracter\u00edstica a este contenedor. Hay widgets que <strong>hacer cosas especiales<\/strong>, como FutureBuilder, etc.<\/p>\n\n\n\n<p>Ese <strong>composici\u00f3n del widget<\/strong> qu\u00e9 es <strong>construye una aplicaci\u00f3n<\/strong>. De hecho, una aplicaci\u00f3n Flutter es un widget frecuentemente llamado MyApp que incluye y contiene todos los dem\u00e1s widgets, el widget m\u00e1s grande de su IU.<\/p>\n\n\n\n<p>Finalmente, hay algunos widgets que est\u00e1n hechos para conformar determinados <strong>Gu\u00eda de dise\u00f1o<\/strong>. Esos son el &quot;grupo de widgets espec\u00edficos&quot; mencionados anteriormente. Mientras que los widgets de Material Design siguen las reglas de dise\u00f1o de Google (Android), los widgets de Cupertino usan el dise\u00f1o iOS de las pautas de interfaz humana de Apple.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aleteo presente y resumen<\/h2>\n\n\n\n<p>Flutter es un nuevo moderno <strong>tecnolog\u00eda front-end<\/strong> para desarrollo multiplataforma de interfaz de usuario nativa. Su uso es simple debido a los widgets, una forma de codificaci\u00f3n tomada de <strong>reaccionar programando<\/strong> eso hace que la codificaci\u00f3n sea m\u00e1s f\u00e1cil y hermosa. Sin embargo, sigue siendo un <strong>marco joven<\/strong> y no funciona del todo bien. <a href=\"https:\/\/strattonapps.com\/es\/mobile-development\/flutter\/flutter-future\/\" class=\"rank-math-link\">Al usarlo para Android, un desarrollo de iOS es una gran idea<\/a> Debido a que se producen pocos errores y ya hay muchos comentarios y c\u00f3digos y bibliotecas desarrolladas, las versiones de escritorio y web a\u00fan son limitadas, ya que est\u00e1n en versiones alfa y beta respectivamente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/flutter-1.png\" alt=\"Flutter for Android and iOS\" class=\"wp-image-2139\" width=\"871\" height=\"653\" srcset=\"https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/flutter-1.png 800w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/flutter-1-300x225.png 300w, https:\/\/strattonapps.com\/wp-content\/uploads\/2020\/02\/flutter-1-768x576.png 768w\" sizes=\"(max-width: 871px) 100vw, 871px\" \/><figcaption>Rendimiento de Android e iOS<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo haremos una breve introducci\u00f3n sobre Flutter. Cubriremos su historia fundacional, su estructura y su elemento m\u00e1s esencial: los widgets. Sin embargo, para entrar en contexto, primero vamos a definir esa tecnolog\u00eda para darle forma al concepto. \u00bfQu\u00e9 es Flutter? Bueno, seg\u00fan Google en la documentaci\u00f3n ... <a title=\"Easy Flutter: elementos esenciales para principiantes\" class=\"read-more\" href=\"https:\/\/strattonapps.com\/es\/mobile-development\/flutter\/flutter-essentials\/\" aria-label=\"M\u00e1s en Easy Flutter imprescindibles para principiantes\">Leer m\u00e1s<\/a><\/p>","protected":false},"author":3,"featured_media":2142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,17],"tags":[33,37,35,31,26,34],"_links":{"self":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2129"}],"collection":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/comments?post=2129"}],"version-history":[{"count":10,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2129\/revisions"}],"predecessor-version":[{"id":2166,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/posts\/2129\/revisions\/2166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/media\/2142"}],"wp:attachment":[{"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/media?parent=2129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/categories?post=2129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strattonapps.com\/es\/wp-json\/wp\/v2\/tags?post=2129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}