Ubuntu renovará su instalador de sistema con Flutter

Normalmente hago post de como utilizar tecnología pero no de quien o donde se usa. Y creo muy importante esta noticia porque es un ejemplo de un uso de tecnología. 

Flutter es una tecnología que permite hacer aplicaciones mobile multiplataforma utilizando el lenguaje de programación Dart. Y la empresa canonical (dueña de Ubuntu) ha elegido esta tecnología para reescribir su instalador de sistema. 

Por lo tanto en un futuro cercano vamos a tener un intalador de Ubuntu hecho en Flutter. 

Y eso, dejo link: https://discourse.ubuntu.com/t/refreshing-the-ubuntu-desktop-installer/20659

Primeros pasos con Flutter parte 3, más Flutter que nunca!

Seguimos con Flutter. No nos basta un ejemplito.

Veamos el directorio de un proyecto en Flutter.

Directorio lib, donde va a estar toda la acción de desarrollo, y el archivo main.dart el cual es el punto de entrada de ejecución de la aplicación.

También podemos ver:
Directorios Android / IOS: contienen proyectos generados, 100% nativos, que pueden abrirse en las IDE correspondientes a cada plataforma.

Assets: Directorio para incluir imágenes/fuentes. Todos los archivos en esta carpeta se incluirán de manera automática en el bundle final. También podemos agregar directorios y archivos.

Test: Directorio para clases y archivos de unit testing.




El archivo main es el punto de entrada de una aplicación. El runtime buscara el método “main” dentro de este archivo y debe invocar el método runApp con un widget.

En flutter, todo es un widget. Un icono, una imagen, un botón y hasta los elementos de layout, como un contenedor, una Column, Row o un Stack todos son widgets; y tanto cada pantalla como nuestra app final, será simplemente, una composición de dichos widgets.

Un widget es representado por una clase, que debe heredar de la clase del framework StatelessWidget o StatefulWidget (dependiendo de si nuestro widget tiene información estado o no), y debe además sobrescribir el método build. Dicho método debe estar en todo widget, y debe retornar un Widget.

Cada widget puede contener un hijo, que se especifica en su propiedad child. En el caso de algunos widgets de layout como “Row” o “Column”, se pueden especificar varios widgets hijos, en la propiedad children. Flutter construye los widgets a modo de árbol, invocando el método build de cada widget.

El manejo de estado más básico de un widget en Flutter, se hace mediante llamados al método setState. SetState notifica al framework del cambio de estado, y redibuja los widgets que sean necesarios.

El manejo de estado mediante el método setState puede funcionar para aplicaciones muy pequeñas, o para manejo de estado relacionado al widget en sí, Flutter ofrece mejores maneras para manejo de estado más complejo. 


Una pregunta muy común que surge a la hora de ver setState como método de manejo de estado es, ¿“Que pasa si quiero compartir información entre pantallas y widgets?” Si bien siempre podemos pasar la información mediante parámetros en los constructores, es una solución poco práctica y engorrosa. Para eso, Flutter ofrece Inherited Widget

Antes hablamos como los widgets en Flutter se anidan y estructuran en un árbol. Para que un widget pueda acceder a otro que se encuentra arriba en el árbol es que tenemos Inherited Widget. A nivel de código, no es más que otro widget, simplemente debe heredar de la clase InheritedWidget e implementar el método updateShouldNotify, para definir condicionalmente cuando disparar la notificación de update.

Con este código, ya tenemos un widget que puede ser accedido por todos los widgets hijos en el árbol. El acceso al InheritedWidget se logra utilizando el método “of”. Claramente leyéndolo así suena todo muy abstracto, en un próximo post vamos con un ejemplo. 

Dejo link: https://flutter.dev

Primeros pasos con Flutter parte 2, la venganza de Flutter

Ahora voy a utilizar Android studio. Ya aprendi la lección lo mejor es utilizar Android Studio si queremos renegar menos. Antes que nada debemos instalar el sdk, como lo instalamos en el post anterior.

Primero instalar android studio, se puede bajar de aquí o yo en mi caso lo instale del market de linux:

Al iniciar android studio vamos a intalar el plugin de flutter :

Ahi elegimos el plugin de flutter :

Y nos va a pedir instalar el plugin de Dart y le decimos que si.

Y luego reniciamos la IDE.

Ahora ponemos new Flutter Project. Y le metemos...

Como se puede ver en las imagenes es un wizard muy simple. Lo único para destacar es que tenemos que indicar donde se instalo la sdk de fluter.

Con este proyecto, el wizard crea un proyecto de ejemplo. Así que ya tenemos nuestro ejemplo ahora prodremos probarlo, peeeeeero antes debemos crear un dispocitivo a donde probarlo. Ahora tenemos que ir a AVD manager y crear el device. El wizard es simple tambien, tenemos que elegir el tipo de dispositivo, luego el sistema operativo, si no tenemos instalado ninguno te permite bajar alguno,

Y con el dispositivo, ahora si podremos probar nuestra aplicación. Listo, para cerrar el post vamos a ejecutar la aplicación y ver como funciona. Y funciona!!!

Primeros pasos con Flutter

Antes de empezar tenemos que bajarnos el SDK de aquí: https://flutter.dev/docs/get-started/install

Como tengo linux ;) debo bajar el siguiente archivo: flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

Y luego de bajarlo debemos hacer :

mkdir ~/development
 cd ~/development
 tar xf ~/Downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

Y luego agregamos flutter a la variable PATH y lo hago en el archivo .bash_profile :

 export PATH="$PATH:`pwd`/flutter/bin"

La herramienta de flutter descarga los binarios de desarrollo específicos de la plataforma según sea necesario. Para los escenarios en los que es preferible descargar estos artefactos , los binarios de iOS y Android se pueden descargar por adelantado ejecutando:

 flutter precache

Ejecute el siguiente comando para ver si hay dependencias que necesita instalar para completar la configuración:

 flutter doctor

En este punto me dice que no tengo device, por lo tanto tengo que bajar la sdk de android. Para lo cual tengo que ir a este link : https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip

A esta altura me doy cuenta que es más fácil con android studio, pero bueno... medio tarde :P

Luego de descomprimir el Sdk, hacemos :

cd tools/bin
./sdkmanager --update
./sdkmanager "platform-tools" "platforms;android-28"
./sdkmanager "system-images;android-25;google_apis;x86_64"

flutter config --android-sdk /path/to/android/sdk

Después hacemos

flutter doctor --android-licenses

Para solucionar un tema de licencia y luego

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Linux, locale es_AR.UTF-8)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Android Studio (not installed)
[!] IntelliJ IDEA Community Edition (version 2016.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    ✗ This install is older than the minimum recommended version of 2017.1.0.
[✓] VS Code (version 1.35.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

Y ahora tenemos SDK pero no device :(

avdmanager create avd --package "android-28" --name "foo" -k "system-images;android-28;google_apis;x86_64"

Como voy a utilizar visual code instale el plugin de flutter :

Tenemos 2 caminos 1 usar visual code :

• Ir a View > Command Palette..
• Escriba "flutter", y seleccione Flutter: New Project.
• Ingrese un nombre de proyecto, como myapp, y presione Enter.
• Cree o seleccione el directorio principal para la nueva carpeta del proyecto.
• Espere a que se complete la creación del proyecto y aparezca el archivo main.dart.

o por consola :

flutter create myapp
cd myapp
flutter devices
flutter run

En la carpeta lib podremos encontrar el archivo main.dart que sera la función que se ejecute en mi aplicación.

Si hicimos la aplicación por consola podemos abrir la carpeta, luego.

Ahora a correr el ejemplo con consola será

flutter run

o por visual code, vamos a debug -> Start debug.

Puff por esta vez es demasiado....

Flutter en español

Quiero compartir la siguiente página de flutter en español, que es igual a la página oficial de Flutter

Dejo el link : https://flutter-es.io

Flutter, la nueva forma de hacer applicaciones mobiles

Flutter es el nuevo kit para desarrollo (SDK) de aplicaciones móviles multiplataforma, creado por Google. Se puede utilizar para desarrollar aplicaciones para Android y iOS con un solo code-base. Además admite también web y escritorio (preview). Desde ya el método primario recomendado para crear aplicaciones para Google Fuchsia (el futuro sucesor de Android).

Esta entre el top 20 repositorios más activos en GIT. Y finalizo periodo BETA en diciembre (V1.0 official release) y ya tiene 250.000 desarrolladores activos. Además tiene mucho soporte y movimiento de parte de Google. Anunciado por Google como plataforma preferida de desarrollo para el futuro sucesor de Android (Fuschia)

Futter es un SDK completo con rendering engine propio. Al renderizar sus propios widgets, copias exactas de los originales usando API gráfica de bajo nivel OpenGL (permite uso de, por ejemplo, widgets Android de API 26+ en cualquier versión de Android, ya que no depende de los widgets OEM)

Características : 

• Open-source y gratuito.
• Desarrollo rápido, gran librería de widgets material design “out of the box” listos para usar.
• No requiere conocimiento de plataformas especificas en lo absoluto.
• No necesita XML (o ningún otro mark-up) para vistas
• Compilación a código ARM, por lo tanto cuenta con performance nativa
• Stateful Hot Reload
• Compatibilidad con IDEs existentes VS Code, Android Studio, IntelliJ, etc..
• Portable
• Lenguaje DART, no muy popular pero fácil de aprender.
• Curva de aprendizaje para desarrollo declarativo, sin mark-up para vistas.
• Ecosistema de librerías de terceros ya es muy bueno.

Flutter no utiliza los widgets de sistema, renderiza sus propios widgets usando las api gráficas de bajo nivel.  Flutter ya viene con un kit completo de Widgets, que son la copia exacta (“pixel perfect”) de los widgets Material Design (Android) y Cupertino (IOS), pero si deseamos tener un look diferente en IOS, aun debemos “decidir” en runtime mostrar un widget u otro basado en la plataforma.

Dejo un video:

Dejo link: https://flutter.dev
https://flutter.dev/docs/get-started/install