Introduccion a interfaces básicas con flutter

Nota: Este articulo se recomienda siempre que se tenga una noción de programación orientada a objetos.

Dentro de flutter existen algo llamado widgets, que en este framework de desarrollo, son los elementos base para todo los elementos que se tendrán en la pantalla y vamos a tenerlos en diferentes categorias, estos se utilizan para construir la interfaz de usuario de una aplicación. Algunos de los tipos de widgets más comunes son los siguientes:

1. Widgets de diseño: estos widgets se utilizan para definir la estructura y el diseño de la interfaz de usuario, incluyendo elementos como columnas, filas, cajas, contenedores y espaciadores.
2. Widgets de texto: estos widgets se utilizan para mostrar texto en la interfaz de usuario, incluyendo elementos como textos simples, encabezados, etiquetas y campos de entrada de texto.
3. Widgets de imagen: estos widgets se utilizan para mostrar imágenes en la interfaz de usuario, incluyendo elementos como imágenes simples, iconos y botones con iconos.
4. Widgets de entrada: estos widgets se utilizan para permitir que el usuario interactúe con la aplicación, incluyendo elementos como botones, cajas de selección, interruptores, campos de entrada de texto y deslizadores.
5. Widgets de lista: estos widgets se utilizan para mostrar datos de manera organizada y desplazable, incluyendo elementos como listas, cuadrículas y tarjetas.
6. Widgets de animación: estos widgets se utilizan para crear animaciones y efectos visuales en la interfaz de usuario, incluyendo elementos como transiciones, rotaciones, escalados y opacidades.
7. Widgets personalizados: estos widgets son widgets creados por el desarrollador para adaptarse a las necesidades específicas de la aplicación, utilizando widgets de diseño, de texto, de imagen, de entrada, de lista o de animación.

Conceptos base de Flutter

1. Stateless: En Flutter, un widget stateless (sin estado) es aquel que no guarda información mutable internamente. Esto significa que su apariencia y comportamiento son completamente determinados por sus propiedades (llamadas también "props" en otros frameworks) y no cambian una vez que se han creado. Un widget stateless es simplemente una función que toma un conjunto de entradas (props) y devuelve un widget basado únicamente en esas entradas. No tiene un estado interno que pueda cambiar, por lo que se considera inmutable.
2. Stateful: En contraste, un widget stateful (con estado) es aquel que puede mantener información mutable internamente, lo que le permite cambiar su apariencia o comportamiento durante la vida útil de la aplicación. Un widget stateful tiene un estado mutable que se puede actualizar a lo largo del tiempo y que puede afectar la apariencia o el comportamiento del widget. Por lo tanto, estos widgets son útiles cuando se necesita mantener y actualizar información mutable en la interfaz de usuario.
3. Scaffolds: En Flutter, Scaffold es un widget que proporciona una estructura básica de la interfaz de usuario de una aplicación. Es un contenedor que incluye una barra de aplicaciones (AppBar), un área de contenido (body) y opcionalmente una barra de navegación inferior (bottomNavigationBar), un cajón de navegación (drawer) y una barra de navegación superior (floatingActionButton), entre otros elementos. Scaffold es un widget muy utilizado en Flutter para crear interfaces de usuario basadas en Material Design.
4. Estilos: En Flutter, los estilos se refieren a la forma en que se define la apariencia visual de los widgets. Los estilos son conjuntos de atributos que definen la apariencia de los widgets, como colores, fuentes, bordes, sombras, etc. Los estilos en Flutter se pueden definir de varias maneras, como por ejemplo mediante la clase TextStyle para definir la apariencia del texto, o mediante la clase BoxDecoration para definir la apariencia de un contenedor.
5. Botones: En Flutter, los botones son widgets que representan elementos de la interfaz de usuario que los usuarios pueden interactuar para realizar acciones en la aplicación. Los botones pueden tener diferentes apariencias y comportamientos, como botones planos, botones elevados, botones de iconos, botones de cambio, botones de radio, etc. Flutter proporciona una amplia variedad de widgets de botones predefinidos, y también permite personalizar la apariencia y el comportamiento de los botones para adaptarse a las necesidades de la aplicación.

Componentes básicos de flutter

En Flutter, un framework de desarrollo de aplicaciones móviles, los widgets MaterialApp, Scaffold y body son componentes fundamentales para construir interfaces de usuario. Aquí te explico cada uno de ellos:

MaterialApp

MaterialApp es un widget de alto nivel que envuelve a tu aplicación y proporciona una serie de configuraciones y funcionalidades específicas del diseño de Material Design. Es el punto de entrada principal para la mayoría de las aplicaciones Flutter que utilizan Material Design. Aquí algunas de sus características y propiedades importantes:

• Título (title): Define el título de la aplicación. En algunas plataformas, esto se muestra en la barra de tareas.
• Tema (theme): Permite definir el tema de la aplicación, especificando colores, fuentes y otros estilos.
• Rutas (routes): Un mapa de las rutas de la aplicación, que permite la navegación entre diferentes pantallas.
• Página de inicio (home): El widget que se muestra cuando la aplicación se inicia. Si se proporcionan rutas, home es la ruta inicial.

Scaffold

Scaffold es un widget que implementa la estructura básica de diseño visual del Material Design. Proporciona un contenedor para la mayoría de los widgets de la interfaz de usuario, como la barra de aplicaciones, el cajón de navegación, el cuerpo de la pantalla, el botón de acción flotante, entre otros. Esencialmente, proporciona la estructura esquelética de una página.

• AppBar: Una barra superior que generalmente contiene el título de la página y acciones.
• Drawer: Un panel de navegación lateral.
• Body: El cuerpo principal de la pantalla donde se muestra el contenido.
• FloatingActionButton: Un botón de acción flotante para realizar una acción principal.

Body

body es una propiedad del widget Scaffold. Es un contenedor para el contenido principal de la pantalla. Puede ser cualquier widget, pero típicamente es un Container, Column, ListView u otro widget de diseño.

Partiendo de estos elementos podemos comenzar a generar las pantallas con este framework de desarrollo.