How to Dismiss the On-Screen Keyboard in Flutter

How to Dismiss the On-Screen Keyboard in Flutter

19 December 2024 Stephan Petzl Leave a comment Tech-Help

When developing Flutter applications, managing user input efficiently is crucial. One common requirement is to dismiss the on-screen keyboard when a user indicates they are done, such as by pressing a button. In this guide, we’ll walk you through the most effective ways to achieve this in Flutter, including solutions for different versions of the framework.

Solution for Flutter 2 or Later

With the introduction of Flutter 2, handling focus and dismissing the keyboard has been streamlined. The recommended approach is to use the FocusManager class to unfocus the current primary focus:

FocusManager.instance.primaryFocus?.unfocus();

This method checks if there’s a primary focus and removes it, effectively dismissing the keyboard. This approach is preferred as it avoids potential issues with state rebuilding.

Solution for Flutter Versions Before 2

For earlier versions of Flutter, the FocusScope method is commonly used:

FocusScope.of(context).unfocus();

This method achieves the same goal by requesting the focus to be removed from the current widget, thereby dismissing the keyboard.

Alternative Approaches

There are several other methods you can consider, depending on your specific requirements:

  • Using SystemChannels.textInput.invokeMethod('TextInput.hide'); to directly invoke the method to hide the keyboard.
  • Wrapping your widget in a GestureDetector and unfocusing on tap to dismiss the keyboard when tapping outside the input field.
  • Utilizing onTapOutside callback to handle dismissals when tapping outside an active text field.

Implementing a Keyboard Dismissal Utility

To streamline the process, consider creating a utility widget like KeyboardHider that encapsulates the unfocus logic. This widget can be wrapped around any part of your UI where you want the keyboard to be dismissed on interaction:

class KeyboardHider extends StatelessWidget {
    final Widget child;

    const KeyboardHider({required this.child, Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () => FocusScope.of(context).unfocus(),
        child: child,
      );
    }
  }

Enhancing Your Testing Workflow with Repeato

While managing user input is essential, ensuring your app functions correctly across different scenarios is equally important. This is where Repeato comes into play. Repeato is a no-code test automation tool for iOS and Android, designed to help you create, run, and maintain automated tests for your apps efficiently. Its computer vision and AI-based approach make it particularly fast to edit and run tests, ensuring a seamless testing experience.

Explore more about how Repeato can enhance your testing strategy by visiting our homepage or diving into our documentation for detailed guides and resources.

Check it out!

Like this article? there’s more where that came from!

Repeato

Documentation

Support

Legal

Repeato Reviews