Formularios

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...

1. Material Design

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

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...

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...