Diferencia entre revisiones de «Flutter Widget Componentes»
Ir a la navegación
Ir a la búsqueda
| Línea 37: | Línea 37: | ||
* El estilo hace referencia a las características visuales del texto, como puedan ser el color, negrilla, tamaño,... | * El estilo hace referencia a las características visuales del texto, como puedan ser el color, negrilla, tamaño,... | ||
: Veamos ejemplo de código con alguna de sus propiedades aplicadas. | : Veamos ejemplo de código con alguna de sus propiedades aplicadas. | ||
| − | : Indicar que en el ejemplo vamos a 'envolver' el texto en otro widget denominado | + | : Indicar que en el ejemplo vamos a 'envolver' el texto en otro widget denominado [https://api.flutter.dev/flutter/widgets/Column-class.html Column]. Este widget es uno de los que veremos en la siguiente sección, y nos permite colocar varios widget´s uno debajo de otro, formando filas. Para ello hace uso de la propiedad 'children' la cual espera recibir un conjunto de widget que conformarán cada una de las filas. |
| + | |||
Revisión del 10:10 21 jul 2021
Introducción
- En esta sección vamos a ver los principales componentes gráficos (widget) que podemos necesitar para diseñar una pantalla en Flutter.
- Textos
- Botones
- Listas
- Imágenes
- Card (tarjetas)
- Combos (dropdown)
- Checkbox
- Cajas de Diálogo
- Alertas
- Partimos de lo aprendido en las secciones anteriores, en las que tenemomos un widget MaterialApp el cual tiene como contenido un Scaffold.
- Los dos se encuentran en ficheros diferentes.
- Lo que vamos a hacer es crear nuevas páginas que devuelve un scaffold con los contenidos que queramos visualizar.
- Aún no sabemos cómo 'colocar' los widget, por lo que en esta sección se empezará a hablar de alguno de los widget´s que nos permiten hacer esto, pero que serán explicados en profundidad en la siguiente sección.
Widget Text
- Más información en: https://flutter.dev/docs/development/ui/widgets/text
- Creamos una nueva página en la carpeta pages de nombre textos_pages.dart
- En todas las páginas haremos lo mismo:
- Importamos la librería de 'material' (recordar que existe un snippet que lo hace automático).
- Creamos una clase que derive de StatelessWidget (al hacerlo será necesario implementar el método build, ya os da un aviso el Android Studio).
- Dentro del método build, retornamos un widget Scaffold (recordar que existe un snippet que lo hace automático).
Textos con un estilo único
- Más información en: https://api.flutter.dev/flutter/widgets/Text-class.html
- El estilo hace referencia a las características visuales del texto, como puedan ser el color, negrilla, tamaño,...
- Veamos ejemplo de código con alguna de sus propiedades aplicadas.
- Indicar que en el ejemplo vamos a 'envolver' el texto en otro widget denominado Column. Este widget es uno de los que veremos en la siguiente sección, y nos permite colocar varios widget´s uno debajo de otro, formando filas. Para ello hace uso de la propiedad 'children' la cual espera recibir un conjunto de widget que conformarán cada una de las filas.
Enlace a la página principal de la UD3
Enlace a la página principal del curso
-- Ángel D. Fernández González -- (2021).
