Hide/Dismiss keyboard on ListView scroll in Flutter app

Question

I have chat window in Flutter app. Messages are presented as widgets inside ListView widget and I also have widget for message input attached to bottom of the window.

I want to

hide keyboard when I scroll the ListView
scroll to last message when new is added from InputWidget

code:

class _MessagesPageState extends State<MessagesPage> {
  final ScrollController listScrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ....
    body: Stack(
        children: [
          ListView.builder(
              controller: listScrollController
              ....
          ),
          InputWidget()]
    );
}

class InputWidget extends StatelessWidget {

  final TextEditingController _textEditingController = TextEditingController();

....
Row (
  children: [
    TextField(
     controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){})
  ]
 )}

score 8 · Answer 1 · answered Dec 24 '20 at 06:36

8

For hiding keyboard on listview scrolling, you simply add keyboardDismissBehavior to it. Example

ListView(
 keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
 children: [],
)

answered Dec 24 '20 at 06:36

BLB

663
1
14
27

1

beautiful, who needs a scrollController when you've got a one liner – Micheal C Wallas Sep 03 '21 at 07:03

score 5 · Accepted Answer · answered May 12 '19 at 18:45

As to point 1 of you question :

You can create a listener function for listScrollController containing a call to an anonymous FocusNode (idea taken from this highly voted answer), and when any scroll event occurs, focus will be taken from your TextField and keyboard will be dismissed:

 class _MessagesPageState extends State<MessagesPage> {

 final ScrollController listScrollController = ScrollController();

 @override
 void initState() {
   listScrollController.addListener(_scrollListener);
   super.initState();
 }

 _scrollListener() {
   FocusScope.of(context).requestFocus(FocusNode());
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
   ....
   body: Stack(
    children: [
      ListView.builder(
          controller: listScrollController
          ....
      ),
      InputWidget(controller: listScrollController)]
   );
}

Point 2 :

You'll notice that I modified your InputWidget to take a ScrollController as a parameter, so you can pass your ListView controller to it. and when the IconButton is pressed, listScrollController will jump to the end as you desire.

 class InputWidget extends StatelessWidget {

 InputWidget({Key key,this.controller}) : super(key: key);

 final ScrollController controller ;

 final TextEditingController _textEditingController = TextEditingController();

 ....
 Row (
  children: [
    TextField(
      controller: _textEditingController
    ), 
    IconButton(icon: ...., onPressed: (){
      controller.jumpTo(controller.position.maxScrollExtent);
    })
  ]
 )}

thank you, it seem that it works as expected! I now realized that when keyboard is shown some of messages are overflowed by keyboard, so I need to scroll my ListView accordingly? — moonvader, May 12 '19 at 20:07
Some messages that were seen without keyboard are now hidden behind shown keyboard. So when keyboard appears I need to move messages up — moonvader, May 12 '19 at 21:30
You can refer to this solution to modify your `ListView` https://stackoverflow.com/questions/53586892/flutter-textformfield-hidden-by-keyboard — Mazin Ibrahim, May 12 '19 at 21:46

score 3 · Answer 3 · answered Dec 07 '19 at 09:20

it's easy..Follow these step..

Change class to StatefullWidget
create final ScrollController listScrollController = ScrollController();

ListView should be like this:

     ListView.builder(
          controller: listScrollController,
          reverse: true,

If you use firebase change order by like this:

.orderBy('timestamp', descending: true)
Add this code in your Send button

listScrollController.animateTo(0.0,duration: Duration(milliseconds: 300), curve: Curves.easeOut);

Automatically scroll up your textField, Add your textField and ListView inside Stack

Hide/Dismiss keyboard on ListView scroll in Flutter app

3 Answers3