09 Semana_9_Widgets_Flutter_i

Vista previa del material en texto

Semana 9: Widgets en Flutter (i)
Facultad de Ingeniería de Sistema e Informática
LENGUAJE DE PROGRAMACIÓN V
Ing. Angel Marthans Ruiz, Mg.
Objetivos: 
Al finalizar, el alumno logrará:
 Conocer los conceptos fundamentales de los Widgets.
2
Temas:
 Fundamentos de los Widgets
 Widget MaterialApp
 Widget Scaffold
 Display Widgets
 Layout Widgets
3
Fundamentos de los Widgets
4
Se debe pensar que todo en Flutter vive en una estructura de árbol.
Se supone que cada widget en Flutter debe realizar una sola tarea pequeña. Por sí mismos, los 
widgets son clases que realizan tareas en la interfaz de usuario. Un widget Text muestra texto. Un 
widget Padding agrega espacio entre los widgets. Un widget Scaffold proporciona una 
estructura para una pantalla.
El poder real de los widgets no proviene de ninguna clase individual, sino de cómo puede 
encadenarlos para crear interfaces expresivas.
Fundamentos de los Widgets
5
Creación de widgets inmutables 
Un widget Stateless (sin estado) es el bloque de construcción principal para crear interfaces de 
usuario. Este widget es simple, ligero y eficaz.
Los widgets Stateless son inmutables. Una vez creados y dibujados, no se pueden modificar. 
Flutter solo tiene que preocuparse por estos widgets una vez. No tiene que mantener estados de 
ciclo de vida complejos ni preocuparse de que un bloque de código los modifique.
De hecho, la única forma de modificar un widget sin estado es eliminándolo y creando uno 
nuevo.
Widget MaterialApp
6
MaterialApp: Una aplicación que utiliza Material Design.
Un widget de conveniencia que envuelve una serie de widgets que comúnmente se requieren 
para las aplicaciones de Material Design. Se basa en WidgetsApp al agregar funcionalidades 
específicas de diseño de materiales, como AnimatedTheme y GridPaper.
Widget Scaffold
7
Las interfaces de usuario de Android e iOS se basan en dos lenguajes de diseño diferentes. 
Android usa Material Design, mientras que Apple ha creado las Pautas de interfaz humana para 
iOS, pero el equipo de Flutter llama al patrón de diseño de iOS Cupertino, en honor a la ciudad 
natal de Apple. Estos dos paquetes, Material y Cupertino, brindan un conjunto de widgets que 
reflejan la experiencia del usuario de sus respectivas plataformas.
Estos marcos usan un widget llamado Scaffold (CupertinoScaffold en el marco de Cupertino) que 
proporciona una estructura básica de una pantalla.
Widget Scaffold
8
Por lo general, se recomienda usar un 
widget de Scaffold como widget raíz para 
su pantalla, pero no es obligatorio. Por lo 
general, utiliza un widget de Scaffold
cuando desea crear una pantalla. Los 
widgets que no comienzan con Scaffold
están destinados a ser componentes 
utilizados para componer pantallas.
MyApp
MaterialApp
HomePage
Scaffold
Container
AppBar
Display Widgets
9
Display Widgets, manipulan lo que el usuario ve en pantalla. Algunos ejemplos de Display
Widgets son:
• Text
• Image
• Button
Display Widgets
1 0
Widgets de Texto
Muestran y dan estilo a textos.
 Text : Una línea de texto con un solo estilo
 RichText : Muestra texto que usa múltiples estilos diferentes. El texto para mostrar se describe 
utilizando un árbol de objetos TextSpan, cada uno de los cuales tiene un estilo asociado que 
se utiliza para ese subárbol. El texto puede dividirse en varias líneas o puede que se muestren 
todos en la misma línea, dependiendo de las restricciones del layout.
 DefaultTextStyle : se usa para aplicar a widgets de texto descendientes sin estilo explicito.
Display Widgets
1 1
Widgets de Imágenes, Iconos y Assets
Administra assets, muestra imágenes y muestra iconos.
 AssetBundle : Contienen recursos, como imágenes y cadenas, que una aplicación puede 
utilizar. El acceso a estos recursos es asíncrono para que se puedan cargar de forma 
transparente a través de una red (por ejemplo, desde NetworkAssetBundle) o desde el 
sistema de archivos local sin bloquear la interfaz de usuario de la aplicación.
 Icon : Un widget de ícono gráfico dibujado con un glifo de una fuente descrita en un 
IconData, como los IconData predefinidos de la librería material. Los iconos no son 
interactivos.
 Image : Muestra una imagen.
Display Widgets
1 2
Widgets de Botones Material 3
Material Design 3 especifica cuatro tipos de botones comunes. Flutter brinda soporte para estos 
mediante las siguientes clases de botones:
 ElevatedButton : Use botones elevados para agregar dimensión a diseños en su mayoría 
planos.
 FilledButton : Los botones rellenos deben usarse para acciones finales importantes que 
completan un flujo, como Guardar, Unirse o Confirmar.
 OutlinedButton : Es esencialmente un botón de texto con un borde delineado.
 TextButton : Use botones de texto en las barras de herramientas, en los cuadros de diálogo o 
en línea con otro contenido, pero de tal forma que la presencia del botón sea obvia.
Layout Widgets
1 3
Layout Widgets, ayudan con la disposición de los widgets. Algunos ejemplos de Layout Widgets 
son:
• Container
• Padding
• Stack
• Column
• Row
• SizedBox
Layout Widgets
1 4
Widget Container: Un widget contenedor para otros widgets.
Widget Padding: Un widget que inserta un relleno alrededor de su widget hijo.
Widget Stack: Un widget que posiciona a sus widget hijos en relación a los bordes de su 
recuadro.
Widget Column: Un widget que muestra a sus widgets hijos en un array vertical.
Widget Row: Un widget que muestra a sus widgets hijos en un array horizontal.
Widget SizedBox: Una caja con un tamaño específico.
Referencias:
 https://esflutter.dev/docs/development/ui/widgets/text
 https://api.flutter.dev/flutter/widgets/Text-class.html
 https://api.flutter.dev/flutter/widgets/RichText-class.html
 https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html
 https://docs.flutter.dev/ui/widgets/assets
 https://api.flutter.dev/flutter/services/AssetBundle-class.html
 https://api.flutter.dev/flutter/widgets/Icon-class.html
 https://api.flutter.dev/flutter/widgets/Image-class.html
 https://api.flutter.dev/flutter/material/ButtonStyle-class.html#material-3-button-types
 https://api.flutter.dev/flutter/material/ElevatedButton-class.html
 https://api.flutter.dev/flutter/material/FilledButton-class.html
 https://api.flutter.dev/flutter/material/OutlinedButton-class.html
 https://api.flutter.dev/flutter/material/TextButton-class.html
 https://esflutter.dev/docs/development/ui/widgets/layout
1 5
https://esflutter.dev/docs/development/ui/widgets/text
https://api.flutter.dev/flutter/widgets/Text-class.html
https://api.flutter.dev/flutter/widgets/RichText-class.html
https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html
https://docs.flutter.dev/ui/widgets/assets
https://api.flutter.dev/flutter/services/AssetBundle-class.html
https://api.flutter.dev/flutter/widgets/Icon-class.html
https://api.flutter.dev/flutter/widgets/Image-class.html
https://api.flutter.dev/flutter/material/ButtonStyle-class.html#material-3-button-types
https://api.flutter.dev/flutter/material/ElevatedButton-class.html
https://api.flutter.dev/flutter/material/FilledButton-class.html
https://api.flutter.dev/flutter/material/OutlinedButton-class.html
https://api.flutter.dev/flutter/material/TextButton-class.html
https://esflutter.dev/docs/development/ui/widgets/layout
La manera de empezar es dejar de 
hablar y comenzar a actuar.
Walt Disney
1 6
	�����Semana 9: Widgets en Flutter (i)
	Objetivos: �Al finalizar, el alumno logrará:
	Temas:
	Fundamentos de los Widgets
	Fundamentos de los Widgets
	Widget MaterialApp
	Widget Scaffold
	Widget Scaffold
	Display Widgets
	Display Widgets
	Display Widgets
	Display Widgets
	Layout Widgets
	Layout Widgets
	Referencias:
	La manera de empezar es dejar de hablar y comenzar a actuar.