How to Dismiss the Virtual Keyboard in a Flutter App?

We all have faced situations filling text fields where the virtual keyboard does not hide automatically. We have to press the back button then keyboard hide so in this article we will see how to dismiss the virtual keyboard in mobile application.

We will  be using the OnTab() method where we can hide the keyboard.


Step 1: Create a new Flutter application, or you can use an already existing project. 
   

Step 2 : use the gesture detector onTap() method.
Step 3:  set onTap to unfocus using unfoces() method.
Step 4: below example of hide keyboard of flutter application.

 void main() {

 runApp(MyApp());

 }

 

  // This is the main application widget.

  class MyApp extends StatelessWidget {

   @override

  Widget build(BuildContext context) {

return MaterialApp(

   title: 'Candidroot solutions Unfocus 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 unfocus

   onTap: ()=> FocusScope.of(context).unfocus(),

   child: Scaffold(

 

     // Appbar

     appBar: AppBar(title: Text('KeyBoard Hide 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'

         ),

       ),

     ),

   ),

);

  }

}

Step 5: Output of above example



Happy coding!




365Bloggy May 20, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive