Ediciones ENI Editorial | líder en informática
Formularios
Introducción
En la extensa lista de widgets de Flutter, hay varios dedicados a las interacciones con los usuarios. Estos widgets activos existen para recuperar información. Para la Web, conforman un grupo que alimenta los formularios. En este capítulo, se detallarán estos widgets. En primer lugar, se estudiarán los campos que permiten la entrada de texto. A continuación, el capítulo se centrará en fechas y horas. Finalmente, se discutirán los widgets que permiten una elección como switches, botones de opción, checkbox o sliders.
Los campos de entrada de texto
Los campos de entrada son la expresión más simple y general de estos widgets. En un espacio dedicado, el usuario puede introducir texto. Se pueden encontrar para cualquier tipo de uso y especialmente en el momento de la conexión, para recuperar un nombre de usuario y contraseña. Hay dos widgets que pueden desempeñar este papel: TextField y CupertinoTextField.
1. TextField
Por tanto, el widget TextField es un campo de entrada de texto para el estilo Material Design. Como suele ocurrir con los widgets, tiene muchas propiedades que le permiten modificar su apariencia. El parámetro decoration del constructor está, por ejemplo, dedicado a esta tarea. Debe asociar una instancia de tipo InputDecoration. El constructor de esta clase incluye una gran cantidad de parámetros opcionales, que van desde texto de reemplazo (hintText) hasta la implementación de un icono o incluso una etiqueta (labelText). También se pueden cambiar los colores de los diferentes elementos.
Para comprender cómo funciona, se crea una nueva aplicación. La clase MyHomePage extiende StatefulWidget para poder modificar la visualización de acuerdo con las entradas realizadas en el campo TextField.
import 'package: flutter/cupertino.dart';
import 'package: flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Campos texto'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}): super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//Código...Fechas y horas
En los formularios, es común que sea necesario recuperar fechas y horas. Nuevamente, estos widgets vienen en ambos estilos, Material Design e iOS.
1. Material Design
a. Fecha
La implementación de un DatePicker implica varias etapas. El widget que se utilizará es showDatePicker. Por lo tanto, funciona como las ventanas emergentes mencionadas en el capítulo Pop-up y navegación. Necesitaremos una función de tipo Future para gestionar esto.
Pero antes de examinar el código de esta última, debemos preparar el esqueleto de la aplicación. Se basa en una clase StatefulWidget ya que la gestión de los estados se utilizará para actualizar la pantalla de acuerdo con la fecha recuperada.
Para activar la apertura de la ventana dedicada a la selección de la fecha, se integra un widget RaisedButton. Justo debajo, un cuadro de texto mostrará la fecha elegida.
Esta aplicación tiene este aspecto:
import 'package: flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.light(),
home: MyHomePage(title: 'Flutter Demo Fecha'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}): super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:...Switch
El switch se considera comúnmente como un interruptor. Tiene dos posiciones correspondientes a un estado falso y otro verdadero. Es perfecto para permitir al usuario tomar decisiones simples.
1. Material Design
El widget Switch es el que coincide con el estilo Material Design. Su constructor toma dos parámetros obligatorios. Primero, debe definir un valor (value), en este caso un booleano. Luego, se debe completar la propiedad onChanged. Será muy posible insertar una llamada a setState.
También están presentes otros parámetros opcionales. Entre los más utilizados, está activeColor que le permite definir un color concreto cuando el Switch está activo. El color elegido permanece operativo para el cursor, al igual que para la pista (track) que aparece en un tono más claro. Si esta presentación no es adecuada, siempre es posible especificar otra con activeTrackColor. Al contrario, cuando el usuario cambia el Switch a una posición inactiva, el color del cursor se puede cambiar con inactiveThumbColor y el track con inactiveTrackColor.
El cursor incluso se puede reemplazar por una imagen a través de activeThumbImage e inactiveThumbImage.
Para resaltar un ejemplo, se configura una aplicación clásica. Tiene una clase que extiende StatefulWidget, para que el estado se pueda administrar más tarde.
Se declara el booleano choiceSwitch al comienzo de la clase _MyHomePageState. Se utilizará para comprobar el valor del Switch y confirmarlo en la pantalla.
bool _opcionSwitch = false; En el cuerpo de la clase, dentro del método build, se inserta...
Radio
Otra forma de recuperar una elección realizada por el usuario, son los botones de «radio» (Opción). Potencialmente ofrecen más opciones que un Switch, pero siguen siendo limitados ya que no se permite la opción múltiple.
Respecto a Flutter, solo hay un widget de estilo Material llamado Radio. El constructor impone tres parámetros obligatorios: value, groupValue y onChanged. Por tanto, la lógica es parecida a la del Switch. La principal diferencia radica en la presencia del parámetro groupValue, que se utiliza para «vincular» las ocurrencias de Radio entre ellas, haciéndolas pertenecer al mismo grupo.
Para presentar el widget dentro de la misma aplicación, se agrega una enumeración. Servirá de base para la elección que el usuario pueda realizar:
enum RadioOpcion { Coche, Avion, Barco } Debe colocarse fuera de la clase _MyHomePageState. Allí se indican tres posibilidades sobre un posible medio de transporte que podría ser Coche, Avión o Barco.
Al comienzo de la clase, se agregan dos variables debajo de la del booleano _opcionSwitch, visto en la sección Switch de este capítulo. La primera toma el tipo de enumeración, es decir RadioOpcion. De forma predeterminada, se relaciona con el valor del avión. La segunda es un icono que se utilizará para confirmar visualmente la selección...
Checkbox
Para completar los widgets ofreciendo libertad de opción a un usuario, es necesario evocar los Checkbox. A diferencia de los botones Radio (opción), las casillas de verificación permiten selección múltiple. Por tanto, no existe la noción de grupo, siendo cada uno independiente. De hecho, su constructor tiene solo dos parámetros obligatorios que son value y onChanged.
Por supuesto, hay otros argumentos que pueden mejorar la estética del widget, como activeColor.
Para demostrar esto, todavía en la misma aplicación, se agregará una variable. Se trata de un Map que, como recordatorio, tiene la particularidad de funcionar con un sistema clave/valor. Esto será útil porque el parámetro value espera un booleano. En cuanto a la clave, va a reutilizar la enumeración previamente definida. Por lo tanto, el objeto Map se compone así:
Map _mapTransporte = {
RadioOpcion.Coche: false,
RadioOpcion.Avion: false,
RadioOpcion.Barco: false,
}; En este momento, todos los valores han pasado a falso. No se marcará ninguna Checkbox. Estas se colocan después de un Divider dentro de una Row:
Divider(),
Text('Checkbox',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:...Slider
Los sliders son otro tipo de componente de formulario. Permiten al usuario elegir un valor en una escala definida. En esta ocasión, dos widgets cumplen esta función, cada uno con el estilo relacionado con su plataforma.
1. Material Design
El widget de estilo Material Design se llama simplemente Slider. Su constructor impone solo dos parámetros obligatorios: value que espera un valor de tipo double y onChanged.
Sin embargo, otros parámetros son igualmente importantes. De hecho, min y max, que le permiten definir valores mínimos y máximos, desactivarán el control deslizante (Slider) si no se indican.
Más allá de eso, es posible definir niveles con divisions. También se puede insertar una label. Acompañará el movimiento del cursor para dar una indicación.
Finalmente, como es habitual, el aspecto gráfico también tiene sus parámetros como activeColor e inactiveColor.
Para probar el widget en la misma aplicación, primero debe crear una variable de tipo double. Es ella quien evolucionará con el tiempo. Se inserta al principio de _MyHomePageState.
double _opcionSlider = 5.0; En la llamada a build, un Divider permite separar el código anterior del Slider. En este último, la variable opcionSlider se asigna a la propiedad value. La label también está asignada, pero esta vez como una cadena de caracteres. En cuanto...