Flutter – How to show and hide/dismiss keyboard

In this post, we will create a demo to learn how to show and hide/dismiss soft keyboard in Flutter using FocusNode.

If you don’t want to go through step by step, you can use below method to save time:

/// Hide the soft keyboard.
void hideKeyboard(BuildContext context) {
  FocusScope.of(context).requestFocus(FocusNode());
}

Here is what we are going to build:

I believe that the UI in this demo is quite simple, so I just focus on the methods to show and hide the keyboard. Final source code will be provided at the end of this post.

1. Declare and create new FocusNode

class _DismissKeyboardTutorialScreenState extends State<DismissKeyboardTutorialScreen> {
  FocusNode focusNode;

  @override
  void initState() {
    super.initState();

    focusNode = FocusNode();
  }
  // ...
}

2. “Connect” your TextField with above focusNode

@override
Widget build(BuildContext context) {
  // ... Other widgets
  TextField(
    focusNode: focusNode,
  ),
  // ... Other widgets
}  

3. Create showKeyboard() and dismissKeyboard() methods

void showKeyboard() {
  focusNode.requestFocus();
}

void dismissKeyboard() {
  focusNode.unfocus();
}

4. Use those methods

// ...
RaisedButton(
  onPressed: () {
    showKeyboard();
  },
  child: Text('Show Keyboard'),
),          
RaisedButton(
  onPressed: () {
    dismissKeyboard();
  },
  child: Text('Dismiss Keyboard'),
),
// ...

5. Don’t forget to dispose the FocusNode

@override
void dispose() {
  focusNode.dispose();

  super.dispose();
}


– – – – –

Put it all together

import 'package:flutter/material.dart';

void main() => runApp(ShowSnackBarDemo());

class ShowSnackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Coflutter - Dismiss Keyboard',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Coflutter - Dismiss Keyboard'),
          backgroundColor: const Color(0xffae00f0),
        ),
        body: DismissKeyboardTutorialScreen(),
      ),
    );
  }
}

class DismissKeyboardTutorialScreen extends StatefulWidget {
  @override
  _DismissKeyboardTutorialScreenState createState() =>
      _DismissKeyboardTutorialScreenState();
}

class _DismissKeyboardTutorialScreenState
    extends State<DismissKeyboardTutorialScreen> {
  FocusNode focusNode;

  @override
  void initState() {
    super.initState();

    focusNode = FocusNode();
    focusNode.addListener(() {
      print('Listener');
    });
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: TextField(
              autofocus: true,
              focusNode: focusNode,
            ),
          ),
          RaisedButton(
            onPressed: () {
              showKeyboard();
            },
            child: Text('Show Keyboard'),
          ),
          RaisedButton(
            onPressed: () {
              dismissKeyboard();
            },
            child: Text('Dismiss Keyboard'),
          ),
        ],
      ),
    );
  }

  void showKeyboard() {
    focusNode.requestFocus();
  }

  void dismissKeyboard() {
    focusNode.unfocus();
  }
}

Tagged : / /
Subscribe
Notify of
guest
11 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Daryl
Daryl
11 months ago

Thanks for this post!

Hau Tran
Hau Tran
11 months ago

It’s useful!!

Vu Pham
Vu Pham
11 months ago

hi CoFlutter, how I can listener keyboard show/hide ?

mono
mono
11 months ago

context parameter isn’t needed.

void showKeyboard(BuildContext context) {
Last edited 11 months ago by mono
Vu P
Vu P
11 months ago

great !

11
0
Would love your thoughts, please comment.x
()
x