How can I dismiss the on screen keyboard

0 votes

I am collecting user input with a TextFormField and when the user presses a FloatingActionButton indicating they are done, I want to dismiss the on screen keyboard.

How do I make the keyboard go away automatically?

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.send),
        onPressed: () {
          setState(() {
            // send message
            // dismiss on screen keyboard here
            _controller.clear();
          });
        },
      ),
      body: new Container(
        alignment: FractionalOffset.center,
        padding: new EdgeInsets.all(20.0),
        child: new TextFormField(
          controller: _controller,
          decoration: new InputDecoration(labelText: 'Example Text'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

void main() {
  runApp(new MyApp());
}

Mar 1, 2023 in Android by Ashwini
• 5,430 points
1,505 views

1 answer to this question.

0 votes

To dismiss the on-screen keyboard, you can call the unfocus() method on the FocusNode associated with the TextFormField. Here's how you can modify your code to achieve this:

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePageState createState() => new MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = new TextEditingController();
  FocusNode _focusNode = FocusNode();

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.send),
        onPressed: () {
          setState(() {
            // send message
            _focusNode.unfocus(); // dismiss on-screen keyboard
            _controller.clear();
          });
        },
      ),
      body: new Container(
        alignment: FractionalOffset.center,
        padding: new EdgeInsets.all(20.0),
        child: new TextFormField(
          controller: _controller,
          focusNode: _focusNode,
          decoration: new InputDecoration(labelText: 'Example Text'),
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

void main() {
  runApp(new MyApp());
}

In this modified code, we create a FocusNode instance and assign it to the focusNode property of the TextFormField. When the FloatingActionButton is pressed, we call the unfocus() method on the FocusNode instance to dismiss the on-screen keyboard. We also clear the TextEditingController so that the TextFormField is emptied. Finally, we dispose of the FocusNode instance in the dispose() method to release any resources it's holding onto.

answered Mar 1, 2023 by vishalini

Related Questions In Android

0 votes
0 answers

How do I make a splash screen?

I added a splash screen because I ...READ MORE

Nov 9, 2022 in Android by Edureka
• 12,690 points
357 views
0 votes
2 answers

How can I inspect element in an Android browser?

On Android smartphones, there are various ways ...READ MORE

answered Nov 15, 2022 in Android by Edureka
• 13,620 points
777 views
0 votes
0 answers

How to implement the system lock screen in your own android app?

How should the system lock screen be ...READ MORE

Nov 22, 2022 in Android by Edureka
• 12,690 points
628 views
0 votes
0 answers

How do I get the current GPS location programmatically in Android?

I need to get my current location ...READ MORE

Nov 23, 2022 in Android by Ashwini
• 5,430 points
663 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
3,442 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
1,008 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
4,053 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,460 points
699 views
0 votes
1 answer

How can I remove the debug banner in Flutter?

The debug banner in Flutter can be ...READ MORE

answered Mar 1, 2023 in Android by vishalini
666 views
0 votes
1 answer

How can i implement Flutter flip animation for book reading app?

Implementing a book page flip effect in ...READ MORE

answered Mar 20, 2023 in Android by Tej
1,835 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP