Día 6 Widgets básicos – 2 (Línea, Icono, SizedBox, Centro) | autor: Gürkan Fikret GÜNAK | Octubre de 2020

Hoy continuamos explorando widgets básicos contigo. Hoy continuaremos compartiendo tus ideas sobre las áreas de uso de nuestros Widgets en nuestra Serie 2. Echemos un vistazo a nuestros 4 Widgets más y hablemos sobre sus estructuras, espero que hayas comenzado a usar Widgets y estructuras en tus aplicaciones.

Los widgets que exploramos son;

Línea,
Icono,
SizedBox,
Centrar

Antes de examinar la estructura de nuestro widgets, siempre debemos esperar lo siguiente. Desde el momento en que se planifican las estructuras de diseño, siempre nos resultará más fácil utilizar Widgets en cuanto a la fase de diseño. Es muy importante tener una idea de tus diseños, tus colores, la disposición de los objetos y el diseño. Es por eso que me gustaría que leyeran y vean mi contenido de Design Story y YT para usar en su tiempo libre.

Línea

Al igual que en la estructura de la columna, es necesario proporcionar el uso horizontal de algunos de nuestros componentes. Entre ellos, el Row Widget nos proporciona los procesos más ideales. Una de las hermosas características es que tenemos más de un widget y lo usamos con el empaque adecuado del interior.

El proceso al que debemos prestar atención es la estructura con el número de widgets y el tamaño que estamos tratando de encajar en el área de ancho de la pantalla. Si esto es más de lo normal, su aplicación se ejecutará con un error, pero durante el tiempo que la aplicación se esté ejecutando, el proceso al que llama el desbordamiento de la resolución de pantalla aparecerá como un error.

Como puede ver en nuestra estructura de código anterior, contiene otra estructura y proporciona su alineación en el plano horizontal. Como sugiere el nombre, vemos que se muestra en la estructura del campo.

No tenemos restricciones sobre cómo podemos adaptar nuestros widgets a esto. Se trata de cómo creamos los patrones que queremos usar en nuestras aplicaciones y cómo entendemos las estructuras de los widgets que se rodean entre sí.

Ahora examinemos el resultado.

Como se mencionó anteriormente, si buscamos un campo anidado, encontraremos algunos errores si el ancho del widget Fila excede los límites.

Sí, si miramos la estructura del código que mencionamos anteriormente, reflejará el error.

Al proporcionar una anulación de barrera a la derecha, podemos decir cuántos píxeles de pantalla vimos en la advertencia. Este error nos permitirá modificar rápidamente nuestros diseños usando HOT Reload realizando revisiones rápidas con errores que aparecen como se predijo en el diseño de nuestra interfaz. Sabes que Flutter nos permite ver nuestras sugerencias con solo tocar una pantalla, con cambios instantáneos.

Cuando hablamos de otro tema,

Podemos hacer comentarios sobre su alineación editando las estructuras del widget de texto de la siguiente manera.

La propiedad TextDirection controla la dirección que crean los niños. TextDirection.ltr es el textDirection predeterminado de los elementos secundarios de Line, por lo que el primer objeto secundario se crea al principio de la línea, a la izquierda, y los otros elementos secundarios a la derecha. Si desea ordenar los niños en la dirección opuesta (de derecha a izquierda), textDirection se puede establecer en TextDirection.rtl. Esto se ilustra en el siguiente ejemplo

Y lo que consideramos el resultado

Consejos:
Para comprender mejor estas estructuras, no pase por MultiChildRenderObjectWidget estructuras. Nadie dirá este consejo 🤩

Icono

El uso de Icon proporciona una comodidad tan grande para cualquier aplicación que a veces es muy conveniente utilizar iconos en lugar de texto. Imagine una explicación detallada, en lugar de un pequeño botón de icono, en lugar de una larga explicación, los usuarios pueden navegar rápidamente para cambiar de aplicación según el significado del icono de icono. Por lo tanto, nuestro Icon Widget es muy importante para nosotros y el uso de nuestra propia biblioteca también proporcionará una gran eficiencia.

Además de la biblioteca de íconos de material que viene con Flutter, podemos mejorar nuestras aplicaciones en el futuro con el ícono de cupertino, que apoyamos como un paquete. Este proceso está relacionado con nuestra imaginación y detalles preliminares del diseño. Esto nos permite mejorar sin depender únicamente de una biblioteca de materiales existente. Podemos acceder a más de una biblioteca de iconos en la búsqueda de paquetes que realizamos en pub.dev.

El tiempo que ve aquí se usó extrayendo de nuestra biblioteca de iconos.

y navegación.

Lo bueno de usar íconos es que podemos obtener resultados más rápido dando el color deseado con nuestros íconos y diseño dinámico.

SizedBox

Tiene un tamaño determinado y se puede usar agregando cualquier widget al cuadro. Este uso generalmente se usa para brechas entre aplicaciones, pero como dijimos, puede usarlo de manera efectiva agregando un widget.

Para examinarlo desde un ángulo diferente, diría que revise este contenido.

https://www.youtube.com/watch?v=EHPu_DzRfqA

Centrar

Es uno de los widgets más ideales para saber si el widget está centrado. Esto es ideal para objetos que son visibles en un punto de nuestras aplicaciones en una o una estructura de grupo. La flexibilidad de uso puede cambiar su experiencia durante el proceso de diseño.

Examinemos la estructura a continuación.

y veamos como resultado.

Mostraremos nuestro widget central envolviéndolo en un widget de texto. Ver usando el ejemplo de código anterior.

resumen

El uso de widgets nos ayuda mucho a crear nuestras estructuras. Porque comprendemos rápidamente sus principios de funcionamiento y aumentamos su frecuencia de uso, esto nos permite producir productos más prácticos. Pero uno de los factores importantes es realizar una planificación previa y prepararnos de acuerdo a la idoneidad de nuestros diseños en los kits de desarrollo.

Quédate con el temblor 💙

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *