Flutter Widget Componentes

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.

Archivo: textos_pages.dart Nota: Recuerda cambiar el archivo app.dart para que cargue la nueva página.

import 'package:flutter/material.dart';

class TextosPages extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('Textos con diferentes estilos'),
        ),
        body: Column(
          children: const<Widget> [
            Text('Texto con los valores por defecto. Ocupa lo que ocupe de ancho del texto escrito. Si no cabe, pasa a la siguiente línea.'),
            Text(
              'Texto centrado en color rojo y negrilla\n Con varias líneas. Lo centra con respecto al ancho mayor de los widget´s que estén en el Column',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.red,
                               fontWeight: FontWeight.bold,
                               fontSize: 10.2),
            ),

          ],
        )
    );
  }

}

• Es posible 'envolver' con conjunto de widget con un estilo por defecto y hacer que todos los Text que se encuentren dentro de ese estilo por defecto hereden las características definidas en el mismo.

Nota: Recordar que en AndroidStudio es posible 'envolver' un Widget con otro, pulsando las teclas Alt+Enter y escogiendo la opción wrap.

Enlace a la página principal de la UD3

Enlace a la página principal del curso

-- Ángel D. Fernández González -- (2021).