Flutter Widget Componentes

De MediaWiki
Ir a la navegación Ir a la búsqueda

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

          ],
        )
    );
  }

}
Flutter dart widget 13.JPG


  • Como podemos ver en el ejemplo anterior, la clase Text tiene la propiedad style, que nos va a servir para dar un estilo al texto.
Veremos en el siguiente punto como podemos crear un 'estilo por defecto' y aplicarlo a varios Text.
Flutter nos permite también declarar una variable local a la clase (un atributo) que sea una instancia de la clase TextStyle, en la que podemos definir el aspecto que tendrán los textos, y después aplicar dicha instancia de clase a todos los textos que lo necesiten.
import 'package:flutter/material.dart';

class TextosPages extends StatelessWidget{
  final _estiloTexto = new TextStyle(fontSize: 35.3,  // Recordar que el new no es obligatorio en Flutter
    backgroundColor: Colors.red,
    color: Colors.black12);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('Textos con diferentes estilos'),
        ),
        body: Column(
          children: <Widget> [
            Text('Texto con el estilo predefinido'),
            Text('Texto con el estilo definido en un atributo de la clase', style: _estiloTexto),
            Text('Otro Texto con el estilo definido en un atributo de la clase', style: _estiloTexto), // Se puede dejar la comilla puesta por si queremos añadir nuevos textos
          ],
        )
    );
  }

}
  • NOTA IMPORTANTE: Fijarse que el atributo está marcado como final ya que estamos en un StatelessWidget y por lo tanto todo lo que esté definido dentro del mismo debe ser 'inmutable'. Es decir, en este tipo de Widget no podemos 'redibujar' la interface, de tal forma que si empleamos una variable para visualizar un texto, dicho texto nunca podría redibujarse si por programación cambiamos el valor de la variable.
Si no definimos como final, el AndroidStudio nos avisará de que no tiene sentido.
Flutter dart widget 16.JPG


DefaultTextStyle


  • 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: <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

Flutter dart widget 14.JPG



RichText


  • 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'),
                      ]),
              )

            ],
          ),
        )
    );
  }

}
Flutter dart widget 15.JPG



Botones

  • En esta sección vamos a ver como añadir los diferentes tipos de botones que podemos emplear en Flutter.
No vamos a ver como gestionar el evento de Click sobre los mismos. Esto lo veremos en secciones posteriores.
  • Creamos una nueva página en la carpeta pages de nombre botones_page.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).



Float Action Button

  • Los FAB son botones con un aspecto circular que se sitúa 'por encima' del contenido de la página y que normalmente son reservados para implementar 'la acción principal' de la página en la que nos encontramos.
Por ejemplo, en una pantalla de contactos, dicho botón sería empleado para dar de alta a nuevos contactos.


  • Dentro del método build, de la página 'botones_page.dart', retornamos un widget Scaffold con un Float Action Button (recordar que existe un snippet que lo hace automático).






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=15510»