4 Ways to Close Keyboard in Flutter App

The software keyboard, also known as the on-screen keyboard, is a crucial component of mobile app interactions. However, there are instances when you want to provide a way for users to dismiss the keyboard manually. In a Flutter app, you have several methods to close the keyboard programmatically. In this article, we will explore four effective ways to achieve this.

1. Using FocusNode().unfocus()

The FocusNode class in Flutter is a powerful tool for managing focus in your app. To close the keyboard, you can simply call unfocus() on a FocusNode associated with an input field. Here’s how you can do it:

// Create a FocusNode
final FocusNode _textFieldFocusNode = FocusNode();

// Close the keyboard when needed
_textFieldFocusNode.unfocus();

This method is useful when you want to control the focus of a specific input field.

2. Using FocusManager.instance.primaryFocus?.unfocus()

If you have multiple input fields or want to close the keyboard regardless of the currently focused element, you can use the FocusManager. It allows you to access the currently focused widget and unfocus it:

// Close the keyboard using FocusManager
FocusManager.instance.primaryFocus?.unfocus();

This approach is handy when you want to close the keyboard from a context where you might not have direct access to the FocusNode.

3. Using SystemChannels.textInput.invokeMethod('TextInput.hide')

For more platform-specific control over the keyboard, you can use the SystemChannels.textInput channel to invoke a platform method to hide the keyboard. Here’s how to do it:

import 'package:flutter/services.dart';

// Close the keyboard
SystemChannels.textInput.invokeMethod('TextInput.hide');

This method allows you to close the keyboard directly and is especially useful when you need to interact with the keyboard at a lower level.

4. Using FocusScope.of(context).unfocus()

If you want to close the keyboard within a specific context, you can use FocusScope. It allows you to unfocus all the widgets within the given context:

// Close the keyboard using FocusScope.of(context)
FocusScope.of(context).unfocus();

This approach is useful when you want to provide a way to close the keyboard within a specific part of your app’s UI.

Conclusion

Managing the keyboard in a Flutter app is essential for providing a smooth user experience. Whether you need to close the keyboard for one input field or across your entire app, these four methods give you the flexibility to do so. Choose the method that best suits your specific use case and start enhancing the usability of your Flutter app today.

Closing the keyboard is just one aspect of building a great Flutter app. Explore more Flutter tips, tricks, and best practices to create outstanding user interfaces and experiences.

See Also