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. 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 : / /
4.5 6 votes
Article Rating
Subscribe
Notify of
guest
11 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Daryl
Daryl
2 months ago

Thanks for this post!

Hau Tran
Hau Tran
2 months ago

It’s useful!!

Vu Pham
Vu Pham
2 months ago

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

mono
mono
2 months ago

context parameter isn’t needed.

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

great !

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