En este artículo, veremos cómo podemos administrar Form Input Focus en Flutter. Cuando se selecciona un widget de TextField y recibe una entrada, se dice que tiene el foco. Los usuarios pueden cambiar el enfoque a un TextField simplemente tocándolo.
Supongamos que tenemos una aplicación de mensajería, cuando el usuario navega a la pantalla de mensajería, podemos establecer el foco en el TextField donde escribimos el mensaje. Esto le permite a nuestro usuario comenzar a escribir el mensaje tan pronto como la pantalla esté visible, sin tocar manualmente el TextField .
Note: We need to manage the lifecycle of focus nodes using a
State object as focus nodes are long-lived objects.
Podemos enfocarnos en TextField tan pronto como sea visible usando la propiedad de enfoque automático . Tiene la siguiente sintaxis:
Sintaxis:
TextField( autofocus: true, );
También podemos enfocarnos en un campo de texto al tocar un botón usando la propiedad focusNode . Implica tres pasos:
Paso 1: Cree un FocusNode .
La siguiente sintaxis se puede usar para enfocar el Node:
Sintaxis:
FocusNode gfgFocusNode;
@override
void initState() {
super.initState();
gfgFocusNode = FocusNode();
Paso 2: pasar el FocusNode al TextField.
Puede usar el decorador @override con el generador de widgets para pasar el Node de enfoque como se muestra a continuación.
@override
Widget build(BuildContext context) {
return TextField(
focusNode: gfgFocusNode,
);
}
Paso 3: Use requestFocus() para dar el foco al TextField al tocar el botón.
El método requestFocous() se puede usar para enfocarse en TextField cuando se toca el formulario como se muestra a continuación:
onPressed: () => gfgFocusNode.requestFocus()
Ejemplo:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("GFG | Input Focus"),
backgroundColor: Color.fromRGBO(15, 157, 88, 1),
),
body: InputForm(),
),
);
}
}
// Defining a custom Form widget
class InputForm extends StatefulWidget {
@override
_InputFormState createState() => _InputFormState();
}
// Defining a corresponding State class
// This class holds data related to the InputForm
class _InputFormState extends State<InputForm> {
// Defining the focus node
FocusNode focusNode1;
FocusNode focusNode2;
@override
void initState() {
super.initState();
// To manage the lifecycle, creating focus nodes in
// the initState method
focusNode1 = FocusNode();
focusNode2 = FocusNode();
}
// Called when the object is removed
// from the tree permanently
@override
void dispose() {
// Clean up the focus nodes
// when the form is disposed
focusNode1.dispose();
focusNode2.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextField(
// The first TextField is focused
// on as soon as the app starts
autofocus: true,
focusNode: focusNode1,
decoration: InputDecoration(
labelText: "First",
labelStyle: TextStyle(fontSize: 25.0),
),
),
SizedBox(
height: 50.0,
),
TextField(
// The second TextField is focused
// on when a user taps the second button
focusNode: focusNode2,
decoration: InputDecoration(
labelText: "Second",
labelStyle: TextStyle(fontSize: 25.0),
),
),
SizedBox(
height: 150.0,
),
RaisedButton(
onPressed: () {
// When the button is pressed,
// give focus to the first TextField
// using focusNode1.
focusNode1.requestFocus();
},
color: Color.fromRGBO(15, 157, 88, 1),
textColor: Colors.white,
child: Text(
"Focus on First Text Field",
style: TextStyle(
color: Colors.white,
),
),
),
SizedBox(
height: 50.0,
),
RaisedButton(
onPressed: () {
// When the button is pressed,
// give focus to the second
// TextField using focusNode2.
focusNode2.requestFocus();
},
color: Color.fromRGBO(15, 157, 88, 1),
child: Text(
"Focus on Second Text Field",
style: TextStyle(
color: Colors.white,
),
),
)
],
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chetankhanna767 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA