Presentamos Flutter, bienvenido al mundo de las apps nativas.

9 de Julio de 2018 por Eric Serrulla

Presentamos Flutter, bienvenido al mundo de las apps nativas.

9 de Julio de 2018 por Eric Serrulla

Introducci├│n a Flutter

El mundo de las apps evoluciona a ritmo acelerado y cada vez son más las opciones y alternativas para desarrollar tu proyecto de la forma más ajustada a las necesidades de este.

La semana pasada os habl├íbamos de la tecnolog├şa de React Native, y hoy veremos otra de las m├ís interesantes y recientes: el proyecto Flutter de Google.

Flutter es un framework para desarrollar aplicaciones nativas de forma rápida para iOS y Android.

┬┐Qu├ę hace a Flutter tan interesante?

Funciona con c├│digo existente, realiza los builds en tiempo r├ęcord y ofrece una UI flexible con multitud de widgets y funciones nativas del dispositivo.

Vamos a ver c├│mo funciona con un simple tutorial en el que crearemos una pantalla con imagen y texto y una peque├▒a transici├│n animada.

Necesitaremos:

  1. Un Mac o PC (en este tutorial usaremos un Mac)
  2. Android Studio instalado en el Mac (puedes descargarlo aqu├ş)

Lo primero ser├í instalar el SDK. En Mac, lo descargaremos de aqu├ş┬áy extraeremos el archivo zip en la ruta deseada.

Desde la terminal, y en la ruta donde hemos descomprimido el SDK, a├▒adimos la herramienta flutter para poder usarla en la sesi├│n con el comando:

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]JCBleHBvcnQgUEFUSD1gcHdkYC9mbHV0dGVyL2JpbjokUEFUSA==[/et_pb_dmb_code_snippet]

Para comprobar si hay dependencias que necesitamos instalar para completar el proceso, haremos lo siguiente.

[et_pb_dmb_code_snippet language=┬╗javascript┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]Zmx1dHRlciBkb2N0b3I=[/et_pb_dmb_code_snippet]

Para poder usar la variable PATH y ejecutar los comandos de flutter en cualquier sesi├│n de terminal, hay que seguir los siguientes pasos:

 

  1. Abrir (o crear) $HOME/.bash_profile  con  touch ~/.bash_profile; open ~/.bash_profile.
  2. A├▒adir la siguiente l├şnea al archivo y cambiar┬á[RUTA_DIRECTORIO_FLUTTER] por la ruta donde hemos instalado el SDK.
[et_pb_dmb_code_snippet language=┬╗javascript┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]JCBleHBvcnQgUEFUSD1bUlVUQV9ESVJFQ1RPUklPX0ZMVVRURVJdL2ZsdXR0ZXIvYmluOiRQQVRI[/et_pb_dmb_code_snippet]

Ejecutamos source $HOME/.bash_profile para refrescar la ventana actual.

Verificamos que el directorio flutter/bin está ahora en nuestro PATH ejecutando:

[et_pb_dmb_code_snippet language=┬╗javascript┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]JCBlY2hvICRQQVRI[/et_pb_dmb_code_snippet]

¡Flutter ya está listo para ser utilizado!

Android Studio

Para utilizar Flutter en Android Studio es necesario instalar el plugin, para ello, en el men├║ de inicio del programa iremos a Configuraci├│n > Plugins, y buscaremos ÔÇťFlutterÔÇŁ.

Tras instalar Flutter y Dart, reiniciamos Android Studio.

Ahora ya nos aparece la opci├│n de iniciar un nuevo proyecto de Flutter, as├ş que la seleccionamos.

Seleccionamos la opci├│n Start a new Flutter project, escogemos un nombre para nuestro proyecto y la ruta donde lo guardaremos, as├ş como el nombre del paquete.

Cuando el proyecto creado se abre, se nos muestra abierto el archivo main.dart, que se encuentra en la carpeta lib. Dart es un lenguaje desarrollado por Google, orientado a objetos y con una sintaxis fácil y familiar si conoces C#, C++ o Java. Dart hace que trabajar con los widgets en Flutter sea extremadamente sencillo e intuitivo.

Antes de nada, vamos a entender c├│mo funcionan los widgets en Flutter.

Hay dos tipos de widgets: Stateful y Stateless. Solamente los widgets stateful permiten interacci├│n por parte del usuario, pudiendo cambiar su estado y por lo tanto su apariencia en la UI.

Los estados consisten en valores que pueden cambiar, como el valor de un slider, si un checkbox est├í seleccionado o no,ÔÇŽ El estado de un widget se guarda en un objeto State, que separa el estado del widget de su apariencia. Cuando el widget cambia de estado, el objeto de estado llama a setState(), haciendo que el widget se actualice.

Para la navegaci├│n entre las dos p├íginas que haremos, cada una de ├ęstas ser├ín widgets stateful.

Volviendo al proyecto inicial que se nos muestra, podemos observar en el archivo principal que el objeto MyApp se trata de un StatelessWidget.

[et_pb_dmb_code_snippet language=┬╗javascript┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAobmV3IE15QXBwKCkpOwoKY2xhc3MgTXlBcHAgZXh0ZW5kcyBTdGF0ZWxlc3NXaWRnZXQgewogIC8vIFRoaXMgd2lkZ2V0IGlzIHRoZSByb290IG9mIHlvdXIgYXBwbGljYXRpb24uCiAgQG92ZXJyaWRlCiAgV2lkZ2V0IGJ1aWxkKEJ1aWxkQ29udGV4dCBjb250ZXh0KSB7CiAgICByZXR1cm4gbmV3IE1hdGVyaWFsQXBwKAogICAgICB0aXRsZTogJ0ZsdXR0ZXIgRGVtbycsCiAgICAgIHRoZW1lOiBuZXcgVGhlbWVEYXRhKAogICAgICAgIHByaW1hcnlTd2F0Y2g6IENvbG9ycy5ibHVlLAogICAgICApLAogICAgICBob21lOiBuZXcgTXlIb21lUGFnZSh0aXRsZTogJ0ZsdXR0ZXIgRGVtbyBIb21lIFBhZ2UnKSwKICAgICk7CiAgfQp9CgpjbGFzcyBNeUhvbWVQYWdlIGV4dGVuZHMgU3RhdGVmdWxXaWRnZXQgewogIE15SG9tZVBhZ2Uoe0tleSBrZXksIHRoaXMudGl0bGV9KSA6IHN1cGVyKGtleToga2V5KTsKCiAgZmluYWwgU3RyaW5nIHRpdGxlOwoKICBAb3ZlcnJpZGUKICBfTXlIb21lUGFnZVN0YXRlIGNyZWF0ZVN0YXRlKCkgPT4gbmV3IF9NeUhvbWVQYWdlU3RhdGUoKTsKfQoKY2xhc3MgX015SG9tZVBhZ2VTdGF0ZSBleHRlbmRzIFN0YXRlPE15SG9tZVBhZ2U+IHsKCgouLi4=[/et_pb_dmb_code_snippet]

Podemos ver que en el momento de crear este Widget se crea un objeto MaterialApp, el cual genera un layout con el tema Material de Google. Podemos cambiar el t├ştulo, los colores y dem├ís atributos de la clase.

Una de las caracter├şsticas m├ís atractivas de Flutter es que, mientras editamos el archivo main.dart y guardamos con CMD + S, se hace autom├íticamente un hot reload que actualiza en el emulador, en cuesti├│n de milisegundos, los cambios que acabamos de realizar.

Creando nuestra propia App

Vamos a empezar con una pantalla sencilla con una imagen y texto.

Para poder utilizar las imágenes debemos de ir a pubspec.yaml y en assets, incluir los archivos que queramos usar. Para ello hemos creado una carpeta en el proyecto llamada images.

 

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]bmFtZTogZHJpYmJhX2ZsdXR0ZXIKZGVzY3JpcHRpb246IEEgbmV3IEZsdXR0ZXIgYXBwbGljYXRpb24uCgpkZXBlbmRlbmNpZXM6CiAgZmx1dHRlcjoKICAgIHNkazogZmx1dHRlcgoKICAjIFRoZSBmb2xsb3dpbmcgYWRkcyB0aGUgQ3VwZXJ0aW5vIEljb25zIGZvbnQgdG8geW91ciBhcHBsaWNhdGlvbi4KICAjIFVzZSB3aXRoIHRoZSBDdXBlcnRpbm9JY29ucyBjbGFzcyBmb3IgaU9TIHN0eWxlIGljb25zLgogIGN1cGVydGlub19pY29uczogXjAuMS4yCgpkZXZfZGVwZW5kZW5jaWVzOgogIGZsdXR0ZXJfdGVzdDoKICAgIHNkazogZmx1dHRlcgoKCiMgRm9yIGluZm9ybWF0aW9uIG9uIHRoZSBnZW5lcmljIERhcnQgcGFydCBvZiB0aGlzIGZpbGUsIHNlZSB0aGUKIyBmb2xsb3dpbmcgcGFnZTogaHR0cHM6Ly93d3cuZGFydGxhbmcub3JnL3Rvb2xzL3B1Yi9wdWJzcGVjCgojIFRoZSBmb2xsb3dpbmcgc2VjdGlvbiBpcyBzcGVjaWZpYyB0byBGbHV0dGVyLgpmbHV0dGVyOgogIGFzc2V0czoKICAtIGltYWdlcy9kcmliYmEucG5nCgogICMgVGhlIGZvbGxvd2luZyBsaW5lIGVuc3VyZXMgdGhhdCB0aGUgTWF0ZXJpYWwgSWNvbnMgZm9udCBpcwogICMgaW5jbHVkZWQgd2l0aCB5b3VyIGFwcGxpY2F0aW9uLCBzbyB0aGF0IHlvdSBjYW4gdXNlIHRoZSBpY29ucyBpbgogICMgdGhlIG1hdGVyaWFsIEljb25zIGNsYXNzLgogIHVzZXMtbWF0ZXJpYWwtZGVzaWduOiB0cnVlCgogICMgVG8gYWRkIGFzc2V0cyB0byB5b3VyIGFwcGxpY2F0aW9uLCBhZGQgYW4gYXNzZXRzIHNlY3Rpb24sIGxpa2UgdGhpczoKCgogICMgQW4gaW1hZ2UgYXNzZXQgY2FuIHJlZmVyIHRvIG9uZSBvciBtb3JlIHJlc29sdXRpb24tc3BlY2lmaWMgInZhcmlhbnRzIiwgc2VlCiAgIyBodHRwczovL2ZsdXR0ZXIuaW8vYXNzZXRzLWFuZC1pbWFnZXMvI3Jlc29sdXRpb24tYXdhcmUuCgogICMgRm9yIGRldGFpbHMgcmVnYXJkaW5nIGFkZGluZyBhc3NldHMgZnJvbSBwYWNrYWdlIGRlcGVuZGVuY2llcywgc2VlCiAgIyBodHRwczovL2ZsdXR0ZXIuaW8vYXNzZXRzLWFuZC1pbWFnZXMvI2Zyb20tcGFja2FnZXMKCiAgIyBUbyBhZGQgY3VzdG9tIGZvbnRzIHRvIHlvdXIgYXBwbGljYXRpb24sIGFkZCBhIGZvbnRzIHNlY3Rpb24gaGVyZSwKICAjIGluIHRoaXMgImZsdXR0ZXIiIHNlY3Rpb24uIEVhY2ggZW50cnkgaW4gdGhpcyBsaXN0IHNob3VsZCBoYXZlIGEKICAjICJmYW1pbHkiIGtleSB3aXRoIHRoZSBmb250IGZhbWlseSBuYW1lLCBhbmQgYSAiZm9udHMiIGtleSB3aXRoIGEKICAjIGxpc3QgZ2l2aW5nIHRoZSBhc3NldCBhbmQgb3RoZXIgZGVzY3JpcHRvcnMgZm9yIHRoZSBmb250LiBGb3IKICAjIGV4YW1wbGU6CiAgIyBmb250czoKICAjICAgLSBmYW1pbHk6IFNjaHlsZXIKICAjICAgICBmb250czoKICAjICAgICAgIC0gYXNzZXQ6IGZvbnRzL1NjaHlsZXItUmVndWxhci50dGYKICAjICAgICAgIC0gYXNzZXQ6IGZvbnRzL1NjaHlsZXItSXRhbGljLnR0ZgogICMgICAgICAgICBzdHlsZTogaXRhbGljCiAgIyAgIC0gZmFtaWx5OiBUcmFqYW4gUHJvCiAgIyAgICAgZm9udHM6CiAgIyAgICAgICAtIGFzc2V0OiBmb250cy9UcmFqYW5Qcm8udHRmCiAgIyAgICAgICAtIGFzc2V0OiBmb250cy9UcmFqYW5Qcm9fQm9sZC50dGYKICAjICAgICAgICAgd2VpZ2h0OiA3MDAKICAjCiAgIyBGb3IgZGV0YWlscyByZWdhcmRpbmcgZm9udHMgZnJvbSBwYWNrYWdlIGRlcGVuZGVuY2llcywKICAjIHNlZSBodHRwczovL2ZsdXR0ZXIuaW8vY3VzdG9tLWZvbnRzLyNmcm9tLXBhY2thZ2VzCg==[/et_pb_dmb_code_snippet]

Volvemos a main.dart y en el body de nuestra app eliminamos el contenido del proyecto de ejemplo para poner nuestros propios componentes.

Para la navegaci├│n entre las dos pantallas necesitamos los dos objetos que generan el contenido de cada una, y los dos objetos que manejan el estado respectivamente.

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]Y2xhc3MgTXlIb21lUGFnZSBleHRlbmRzIFN0YXRlZnVsV2lkZ2V0IHsKICBNeUhvbWVQYWdlKHtLZXkga2V5LCB0aGlzLnRpdGxlfSkgOiBzdXBlcihrZXk6IGtleSk7CgogIGZpbmFsIFN0cmluZyB0aXRsZTsKCiAgQG92ZXJyaWRlCiAgX015SG9tZVBhZ2VTdGF0ZSBjcmVhdGVTdGF0ZSgpID0+IG5ldyBfTXlIb21lUGFnZVN0YXRlKCk7Cn0K[/et_pb_dmb_code_snippet]

En el objeto de estado de MyHomePage, crearemos un widget Card con una imagen, t├ştulo, subt├ştulo y un bot├│n que nos llevar├í a ver la imagen a tama├▒o completo.

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]Y2xhc3MgX015SG9tZVBhZ2VTdGF0ZSBleHRlbmRzIFN0YXRlPE15SG9tZVBhZ2U+IHsKCgogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewoKICAgIFdpZGdldCBjYXJkID0gbmV3IENhcmQoCiAgICAgIGVsZXZhdGlvbjogMS4yNSwKICAgICAgY2hpbGQ6IG5ldyBDb2x1bW4oCiAgICAgICAgbWFpbkF4aXNTaXplOiBNYWluQXhpc1NpemUubWluLAogICAgICAgIGNoaWxkcmVuOiA8V2lkZ2V0PlsKICAgICAgICAgIG5ldyBDb250YWluZXIoCiAgICAgICAgICAgIGNvbnN0cmFpbnRzOiBuZXcgQm94Q29uc3RyYWludHMuZXhwYW5kKAogICAgICAgICAgICAgIGhlaWdodDogVGhlbWUub2YoY29udGV4dCkudGV4dFRoZW1lLmRpc3BsYXkxLmZvbnRTaXplICogMS4xICsgMTEwLjAsCiAgICAgICAgICAgICksCiAgICAgICAgICAgIGNoaWxkOiBuZXcgSW1hZ2UuYXNzZXQoJ2ltYWdlcy9kcmliYmEucG5nJywgZml0OiBCb3hGaXQuY292ZXIpLAogICAgICAgICAgKSwKICAgICAgICAgIGNvbnN0IExpc3RUaWxlKAogICAgICAgICAgICB0aXRsZTogY29uc3QgVGV4dCgnRm90byBjb24gYW5pbWFjacOzbiBIZXJvJyksCiAgICAgICAgICAgIHN1YnRpdGxlOiBjb25zdCBUZXh0KCdBcXXDrSB2YSBlbCBzdWJ0w610dWxvLCBkZXNjcmlwY2nDs24gZGUgbGEgY2FyZC4nKSwKICAgICAgICAgICksCiAgICAgICAgICBuZXcgQnV0dG9uVGhlbWUuYmFyKAogICAgICAgICAgICBjaGlsZDogbmV3IEJ1dHRvbkJhcigKICAgICAgICAgICAgICBjaGlsZHJlbjogPFdpZGdldD5bCiAgICAgICAgICAgICAgICBuZXcgRmxhdEJ1dHRvbigKICAgICAgICAgICAgICAgICAgY2hpbGQ6IGNvbnN0IFRleHQoJ1ZFUiBNw4FTJyksCiAgICAgICAgICAgICAgICAgIG9uUHJlc3NlZDogX3Nob3dEZXRhaWxzLAogICAgICAgICAgICAgICAgKSwKICAgICAgICAgICAgICBdLAogICAgICAgICAgICApLAogICAgICAgICAgKSwKICAgICAgICBdLAogICAgICApLAogICAgKTsKCiAgICByZXR1cm4gbmV3IFNjYWZmb2xkKAogICAgICBhcHBCYXI6IG5ldyBBcHBCYXIoCiAgICAgICAgdGl0bGU6IG5ldyBUZXh0KHdpZGdldC50aXRsZSksCiAgICAgICksCiAgICAgIGJvZHk6IG5ldyBMaXN0VmlldygKICAgICAgICBjaGlsZHJlbjogPFdpZGdldD5bCiAgICAgICAgICBoZXJvLAogICAgICAgIF0sCiAgICAgICksCgogICAgKTsKICB9Cn0K[/et_pb_dmb_code_snippet]

En el atributo onPressed del FlatButton situado en la ButtonBar de la Card, indicaremos el m├ętodo que nos cambiar├í la vista a la pantalla de detalles. Este m├ętodo es tan sencillo como declarar lo siguiente en el propio objeto State, indicando la ruta que queramos definir para vista de detalles:

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]dm9pZCBfc2hvd0RldGFpbHMoKSB7CiAgTmF2aWdhdG9yLm9mKGNvbnRleHQpLnB1c2hOYW1lZCgiL2RldGFpbHMiKTsKfQo=[/et_pb_dmb_code_snippet]

Para que esta navegaci├│n funcione hay que declarar las rutas en el widget Build de MyApp:

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]dmFyIHJvdXRlcyA9IHsiL2RldGFpbHMiOiAoQnVpbGRDb250ZXh0IGNvbnRleHQpID0+IG5ldyBEZXRhaWxzUGFnZSh0aXRsZTogIkRldGFpbHMgcGFnZSIpLH07[/et_pb_dmb_code_snippet]

Definimos ahora el objeto widget para la vista de detalles:

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]Y2xhc3MgRGV0YWlsc1BhZ2UgZXh0ZW5kcyBTdGF0ZWZ1bFdpZGdldCB7CiAgRGV0YWlsc1BhZ2Uoe0tleSBrZXksIHRoaXMudGl0bGV9KSA6IHN1cGVyKGtleToga2V5KTsKCiAgZmluYWwgU3RyaW5nIHRpdGxlOwogIEBvdmVycmlkZQogIF9EZXRhaWxzUGFnZVN0YXRlIGNyZWF0ZVN0YXRlKCkgPT4gbmV3IF9EZXRhaWxzUGFnZVN0YXRlKCk7Cn0K[/et_pb_dmb_code_snippet]

Y el objeto de estado, cuyo body contiene un objeto Center. Center tiene como child el objeto Hero que está relacionado con la imagen de la vista de card.

[et_pb_dmb_code_snippet language=┬╗bash┬╗ style=┬╗github┬╗ _builder_version=┬╗3.8″ body_font_size_tablet=┬╗51″ body_line_height_tablet=┬╗2″ header_font_size_tablet=┬╗51″ header_line_height_tablet=┬╗2″]Y2xhc3MgX0RldGFpbHNQYWdlU3RhdGUgZXh0ZW5kcyBTdGF0ZTxEZXRhaWxzUGFnZT4gewogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgdmFyIGRlY29yYXRlZEJveCA9IG5ldyBEZWNvcmF0ZWRCb3goCiAgICAgIGRlY29yYXRpb246IG5ldyBCb3hEZWNvcmF0aW9uKAogICAgICAgIGltYWdlOiBuZXcgRGVjb3JhdGlvbkltYWdlKGltYWdlOiBuZXcgQXNzZXRJbWFnZSgnaW1hZ2VzL2RyaWJiYS5wbmcnKSwgZml0OiBCb3hGaXQuZml0V2lkdGgpCiAgICAgICksCiAgICApOwoKICAgIC8vSGVybyBjZW50ZXIKICAgIHZhciBoZXJvID0gbmV3IEhlcm8oCiAgICAgIHRhZzogJ2hlcm8tdGFnLWRyaWJiYScsCiAgICAgIGNoaWxkOiBkZWNvcmF0ZWRCb3gsCiAgICApOwoKICAgIHZhciBjZW50ZXIgPSBuZXcgQ2VudGVyKAogICAgICBjaGlsZDogbmV3IENvbnRhaW5lcigKICAgICAgICBoZWlnaHQ6IDYwMC4wLAogICAgICAgIHdpZHRoOiA2MDAuMCwKICAgICAgICBjaGlsZDogaGVybywKICAgICAgKSwKICAgICk7CgogICAgcmV0dXJuIG5ldyBTY2FmZm9sZCgKICAgICAgYXBwQmFyOiBuZXcgQXBwQmFyKAogICAgICAgIHRpdGxlOiBuZXcgVGV4dCh3aWRnZXQudGl0bGUpLAogICAgICApLAogICAgICBib2R5OiBjZW50ZXIsCiAgICApOwogIH0KfQo=[/et_pb_dmb_code_snippet]

Lo imprescindible para que la animación Hero funcione es que ambos objetos hero en ambas pantallas tengan el mismo tag. El framework usa este tag para relacionar las dos imágenes y crear la transición entre ellas.

Con esto, hemos visto por encima lo sencillo que es agregar elementos a la UI con los widgets de Flutter y crear interacci├│n entre ellos. Con el mismo c├│digo hemos generado dos aplicaciones nativas, una en iOS y otra en Android.

flutter_example_ios_android

Puedes descargar el proyecto completo de nuestra cuenta de GitHub.

Si necesitas diseñar una app llámanos al 93 408 90 30 o ponte en contacto con nosotros.

 

Dribba, the mobile agency. Agencia de desarrollo de tecnolog├şas mobile en Barcelona y Zurich. Desarrollamos apps nativas iOS y Android, para multinacionales y startups de todo el mundo. Consulta nuestros servicios tanto en desarrollo, dise├▒o como consultor├şa mobile y tecnol├│gica.

Not├şcias relacionadas