Todos nos hemos enfrentado a situaciones después de llenar el campo de texto, el teclado virtual no desaparece automáticamente. Tenemos que hacer clic en el botón Atrás de nuestros teléfonos inteligentes para quitar el teclado virtual. Entonces, en este artículo, veremos cómo descartar el teclado virtual en una aplicación con solo un toque.
Para esto, usaremos la propiedad onTap() de Flutter UI Gesture Detection.
Siga los pasos a continuación para implementar la función mencionada anteriormente:
Paso 1: utilice la propiedad Gesture detector onTap() .
Paso 2 : Configure onTap para desenfocar usando el método unfocus().
Ejemplo:
Eche un vistazo al siguiente ejemplo. Se han agregado comentarios al código como referencia.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
// This is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GFG Unfocous on Tap',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(),
);
}
}
// This is the homepage
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
// The GestureDetector wraps the homepage
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return GestureDetector(
// set onTap to unfocous
onTap: ()=> FocusScope.of(context).unfocus(),
child: Scaffold(
// Appbar
appBar: AppBar(title: Text('KeyBoard dismiss Example'),
centerTitle: true,
),
// homepage design
body: Padding(
padding: const EdgeInsets.all(16.0),
// Text input
child:TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter the text'
),
),
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por ayurishchandnacs18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA