Diferencia entre revisiones de «Flutter Widget Componentes»

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con « <br /> [https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_3%3A_Flutter._Dise.C3.B1o_gr.C3.A1fico En…»)
 
Línea 1: Línea 1:
 +
==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 [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget_Dise%C3%B1o_de_pantallas en la siguiente sección].
 +
 +
<br />
 +
==Widget Text==
 +
 +
* Más información en: https://flutter.dev/docs/development/ui/widgets/text
 +
 +
* Creamos una nueva página en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget#Estructura_de_p.C3.A1ginas 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 [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets 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 [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets snippet] que lo hace automático).
 +
 +
<br />
 +
===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 'Col'. 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:55 20 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

  • 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

  • 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 'Col'. 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).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget_Componentes&oldid=15488»