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),
            ),

          ],
        )
    );
  }

}

DefaultTextStyle

• Más información en: https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html

• Es posible 'envolver' un conjunto de widget con un estilo por defecto y hacer que todos los Text que se encuentren dentro de ese estilo '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.

En el ejemplo envolvemos el Widget Column con un Widget DefaultTextStyle al cual al que pasarle dos parámatros de forma obligatoria (required):

• child: Donde iré el widget que va a visualizar (en nuestro caso el Column)
• style: Donde se instancia la clase TextStyle y donde se define el estile que van a 'heredar' los textos que estén dentro de DefaultTextStyle.

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: DefaultTextStyle(
          style: TextStyle(fontSize: 20.3,
                           backgroundColor: Colors.amber,
                           color: Colors.blue,
                           fontStyle: FontStyle.italic),
          child: Column(
            children: const<Widget> [
              Text('Texto con el estilo definido en DefaultTextStyle'),
              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),
              ),

            ],
          ),
        )
    );
  }

}

Nota: Fijarse como los widget´s Text que tengan un estilo propio, sobreescribirán el DefaultTextStyle

RichText

• Más información en: https://api.flutter.dev/flutter/widgets/RichText-class.html

• Permite que un mismo texto tenga diferentes estilos.

Para ello hace uso de la clase TextSpan que representa un texto inmutable.

Cada TextSpan posee la propiedad 'children' que espera recibir una lista de TextSpan, cada uno de ellos con su propio TextStyle. Si no se pone un estilo que lo sobreescriba, el TextSpan 'heredará' el estilo del TextSpan que lo contenga.

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: DefaultTextStyle(
          style: TextStyle(fontSize: 20.3,
                           backgroundColor: Colors.amber,
                           color: Colors.blue,
                           fontStyle: FontStyle.italic),
          child: Column(
            children: <Widget> [
              Text('Texto con el estilo definido en DefaultTextStyle'),
              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),
              ),
              RichText(
                text: TextSpan(text: 'Este es un texto TextSpan',style: TextStyle(color: Colors.green),
                      children: [
                        TextSpan(text: ' con un estilo diferente', style: TextStyle(color:Colors.brown)),
                        TextSpan(text: ' en cada parte del texto.', style: TextStyle(color:Colors.yellow)),
                        TextSpan(text: ' Si no se pone nada, hereda el estilo del TextSpan que lo contenga'),
                      ]),
              )

            ],
          ),
        )
    );
  }

}

Enlace a la página principal de la UD3

Enlace a la página principal del curso

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