Legacy: Flutter 2 desde cero, creando más de 10 proyectos

Vamos a presentar los tipos de datos en Dart, que son los mismos que en cualquier lenguaje de programación pero de esta manera vamos familiarizándonos con la sintaxis en Dart.

Vamos a conocer los condicionales en Dart, cuyo uso es básico es idéntico que en cualquier lenguaje de programación.

Vamos a crear una lista dinámica, estática y conocer un poco más los tipos dinámicos en Dart.

Vamos a explicar como es el uso de las funciones en Dart, también explicaremos el uso de los parámetros con nombre.

Vamos a ver el uso de las clases en Dart, cómo podemos crear un objeto y los constructores con nombre y sin nombre.

Vamos a seguir trabajando con las clases en Dart, y ahora le llega el turno a los tipos get y set, que al igual que ocurre en Kotlin, su uso es opcional.

Vamos a conocer el uso de la herencia en las clases en Dart.

Vamos a conocer el uso de los Futures que serán un elemento fundamental cuando queramos realizar peticiones a nuestra Rest Api.

Vamos a conocer como podemos emplear los async y los await en conjunto con nuestros Future.

Vamos a conocer como funcionan los static en Dart.

Vamos a conocer como podemos emplear la herencia múltiple en Dart.

Vamos a conocer las funciones de flecha.

Vamos a hablar un poco sobre las ventajas que tiene emplear este esquema de Null Safety en Dart y las implicaciones del mismo.

Vamos a hablar sobre como puedes comprobar que versiones de Dart y Flutter estás empleando y cómo puedes actualizar a nuevas versiones.

Vamos a empezar con los ejercicios y conocer los operadores por excelencia para trabajar con los Nul Safety.

Vamos a realizar algunos ejercicios para practicar los tipos de datos que pueden ser nulos con los que no en base a operadores.

Vamos a conocer el uso del atributo required cuando estamos trabajando con clases o funciones y los argumentos con nombre.

Vamos a trabajar con los argumentos opcionales, valores por defecto y el null safety.

Vamos a trabajar con las variables de tipo late que las empleamos cuando tenemos un valor que NO puede ser nulo y le queremos dar un valor "después".

Vamos a resolver algunos ejercicios de la página oficial.

Vamos a resolver algunos ejercicios de la página oficial.

1. Flutter en pocas palabras es un framework de código abierto desarrollado por Google para crear aplicaciones nativas en Android e iOS más fácil que el enfoque tradicional, de una manera más rápida y sencilla, sobre todo aplicaciones 2D que no sean juegos, como apps de listados, notas, tareas, mapas y un largo etc. empleando como lenguaje de programación a Dart

2. Características

   1. Calidad nativa: Aunque tenemos un código o proyecto base para gobernarlos a todos, es decir con un código fuente podemos al menos una aplicación nativa para Android e IOS, podemos tener como resultado calidad de aplicaciones nativas que no podemos obtener con frameworks similares como Ionic que requieren de una capa web para poder funcionar.

   2. Experiencia de usuario: Flutter incluye Material Design de Google y Cupertino de Apple, con lo que la experiencia de usuario es óptima y los interfaces de usuario idénticos a los de las aplicaciones desarrolladas por las propias compañías.

   3. Tiempo de carga: Al desarrollar nuestras aplicaciones los tiempos de carga están en promedio en un segundo, por lo tanto podemos ver rápidamente los cambios que hagamos en la aplicación casi que en tiempo real en cualquiera de los soportes iOS o Android.

   4. Desarrollo ágil y rápido: Gracias a la característica hot-reload, puedes programar y ver los cambios en tiempo real en tu dispositivo o en los simuladores.

   5. Multiplataforma: Puedes desarrollar en los SO más empleados del mercado, Mac, Linux o Windows, aunque si quieres desarrollar en iOS vas a necesitar obligatoriamente una Mac.

3. ¿Qué es Flutter?

4. Flutter es una SDK(Software Development Kit) que nos provee herramientas para compilar la aplicación en código nativo.

5. Flutter es un Framework que nos da las herramientas para crear las aplicaciones y con esto me refiero a la UI y cualquier otro elemento funcional, en este caso los componentes de UI son llamados widgets que abordaremos en el siguiente vídeo.

Su principal ventaja radica en que genera código 100% nativo para cada plataforma, ya que el código final se compila empleando la SDK, es decir las herramientas nativas de cada plataforma, sea Android o iOS, con lo que el rendimiento y la interfaz gráfica es totalmente idéntico a las aplicaciones nativas tradicionales desarrolladas con Android Studio o xCode.

1. En Flutter TODO es un WIdget.

   1. Como te comentaba en el vídeo anterior, para construir nuestras aplicaciones en Flutter tienes que emplear widgets, los widgets son componentes de software, como una barra, texto, un ícono, más texto, botones y cualquier otro elemento de interfaz gráfica.

   2. Como puedes ver, los widgets son una pieza que permiten describir cómo va a lucir la aplicación, y para crear estos widgets requerimos de código; estas líneas de código que el Framework de Flutter traduce a un elemento de interfaz gráfica mediante los widgets.

   3. Otro punto muy importante es como luce la estructura de una app en Flutter, es un árbol de widgets o widget Tree en donde tenemos un widget padre y widgets hijos o en otras palabras, tenemos un anidamiento de widgets de la siguiente manera que puede ser tan complejo como nosotros queramos pero siempre partimos de un único widget padre o raíz.

Vamos a hablar sobre el software necesario para seguir en el curso.

Vamos a instalar Flutter en nuestra PC y configurar el Path del sistema.

Vamos a configurar C++ para Desktop en Windows.

Vamos a configurar nuestro equipo para que una vez tengamos instalado Flutter, ahora podamos emplearlo sin problemas en nuestro equipo.

Vamos a crear un emulador en Android Studio que es el que vamos a emplear para el curso.

Vamos a conocer algunos atajos de teclado que te recomiendo si desarrollas en VSC.

Vamos a conocer como podemos crear un proyecto en Flutter mediante comandos en Flutter.

Vamos a conocer como podemos crear un proyecto en Flutter mediante VSC.

Vamos a presentar la estructura base de un proyecto en Flutter.

Vamos a aprender a seleccionar un dispositivo para desarrollar.

Vamos a presentar unos widgets muy sencillos como el de Texto y el de Center.

Vamos a explicar los dos tipos de widgets que tenemos que emplear para crear cualquier tipo de página en widget.

Vamos a emplear el widget de MaterialApp para poder emplear elementos del Material Design.

Vamos a crear una página en blanco para definir como elemento padre nuestros elementos.

Vamos a crear el header o appBar para nuestra app en nuestro Scaffold.

Vamos a presentar el uso de los estilos para los textos.

Vas a crear un estilo personalizado para tu app, en base a lo que vimos anteriormente.

Vamos a presentar el mecanismo por excelencia para poder embeber uno o más widgets en nuestra página en Flutter.

Vamos a presentar como podemos organizar contenido en filas.

Vamos a conocer como podemos mostrar imágenes desde Internet.

Vamos a conocer como podemos mostrar imágenes instaladas localmente en la app.

Vamos a conocer algunos botones en Flutter.

Vamos a hablar sobre los botones que son más empleados y que en versiones recientes de Flutter cambiaron de nombre.

Vamos a crear un componente de Alerta personalizado para mostrar un mensaje.

Vamos a presentar el componente de navegación para visitar otras páginas o cerrar las mismas.

Vamos a crear una carpeta de helpers para crear funciones globales y reutilizables en toda la app.

Vamos a detectar el Sistema Operativo para mostrar una interfaz u otra para nuestro diálogo.

Vamos a conocer como podemos agregar espacios.

Vamos a crear un contenedor para aplicarle algo de estilo.

Vamos a adaptar la app para que no se rompa si tenemos más contenido que pantalla con un scroll automático.

Vas a subir la app a tu repositorio en github.

Vamos a crear un nuevo proyecto mediante VSC.

Vamos a crear el layout base de la app.

Vamos a presentar un widget para obtener contenido/texto del usuario.

Vamos a presentar un widget para la selección.

Vas a intentar mostrar el valor actual o seleccionado del DropdownButton en un componente de texto.

Vamos a pasar de un Statelesswidgets a un Statefulwidgets

Vamos a recargar el widget de flutter mediante el state que cambiamos de la app.

Vamos a inicializar datos de entrada.

Vamos a conocer el ciclo de vida de nuestra app.

Vamos a crear la interfaz completa para la app.

Vamos a mostrar el texto por defecto en el widget de tipo texto.

Vamos a acomodar un poco más la UI para hacerla más agradable para el usuario.

Vamos a aplicar estilos para los textos.

Vamos a adaptar un poco la posición o distribución de la app y agregar un scroll.

Vamos a crear un componente o control para controlar el campo de texto.

Vamos a hacer una validación y casteo para el valor introducido por el usuario que el mismo sea numérico.

Vamos a hacer una tabla de Excel o cálculo para las fórmulas de conversiones.

Vamos a adaptar la app con la lógica necesaria para que funcione.

Vas a subir la app a tu repositorio en github.

Vamos a crear un nuevo proyecto mediante VSC.

Vamos a crear la estructura base para la app.

Vamos a crear los campos de texto que vamos a emplear para guardar la información en los mismos de manera persistente.

Vamos a instalar nuestra primera dependencia para guardar los datos de manera persistente.

Vamos a implementar la lógica para guardar los datos.

Vamos a establecer la lógica para guardar los datos de manera persistente según la estructura que creamos anteriormente.

Vamos a mostrar los datos en los campos de formulario.

Vamos a implementar un botón para limpiar los datos de las preferencias de usuario.

Vamos a convertir la app a un stateful y hacer algunos cambios sutiles en la app para aprovechar este tipo de widget.

Vamos a probar las configuraciones de tipo list de String, crearemos el get y set.

Vamos a crear un listado de String que vamos a convertir el checkbox para poder ser seleccionadas.

Vamos a registrar los click a los checkbox en nuestras preferencias.

Vamos a colocar el estilo para los checkbox y colocar un label.

Vamos a dar una demostración de cómo podemos manejar columnas y otro contenedor mediante una propiedad.

Vas a subir la app a tu repositorio en github.

Vamos a crear un nuevo proyecto mediante VSC.

Vamos a crear el layout base de la app.

Vamos a presentar un widget para expandir el contenido según el espacio que tenga disponible.

Vamos a crear un widget de botones y lo haremos reutilizable.

Vamos a crear el diseño principal de la app.

Vamos a instalar una extensión para dibujar un indicador.

Vamos a crear el widget para manejar el timer.

Vamos a crear la primera parte de la función que se va a encargar de llevar el conteo.

Vamos a implementar la función para iniciar y detener el timer.

Vas a crear la función para reiniciar.

Vamos a aplicar algunos detalles finales de la app.

Vas a subir la app a tu repositorio en github.

Vamos a explicar algunos conceptos claves sobre el Stram, su widget el StreamBuilder y los procesos asíncronos.

Vamos a elaborar la lógica inicial del stream.

Vamos a construir la función de stream que vamos a consumir en el siguiente vídeo.

Vamos a crear el componente/widget que va a consumir el stream, el streamBuilder y generar nuestro widget de manera dinámica según los cambios que mande el stream.

Vamos a agregar una bandera para devolver el indicador cuando la data es nula.

Vamos a agregar las funciones para los botones inferiores.

Vamos a terminar algunos pequeños detalles en la app.

Vamos a presentar un tipo de widget con el cual podemos obtener las dimensiones de nuestro elemento padre.

Vas a subir la app a tu repositorio en github.

Vamos a crear un nuevo proyecto mediante VSC.

Vamos a crear el layout base de la app.

Vamos a crear algunas páginas para probar el componente de navegación.

Vamos a definir las rutas de las páginas que creamos anteriormente.

Vamos a aprender a navegar a una ruta con nombre.

Vamos a volver a la página anterior.

Vamos a crear un componente para colocar tantos botones como páginas tengamos para navegar y navegar hacia las mismas.

Vamos a verificar mediante una función si existe o no una página a la cual volver al hacer el pop.

Vamos a pasar argumentos mediante las rutas.

Vas a crear una página única para ganar reutilización en la app.

Vas a subir la app a tu repositorio en github.