CODEWITHSUNDEEP
flutterdart
K.k
K.k

Reputation: 489

flutter: How to detect keyboard?

I want detect Keyboard. And want to show it other text when keyboard is visible or unvisible.

But my code is not working.

This is my code.

class Search extends StatefulWidget {
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: ListView(
                children: [
                  MediaQuery.of(context).viewInsets.bottom !=0 ? Center(child: Text("true"),) : Center(child: Text("false"),)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 9699

Answers (3)

AnasSafi
AnasSafi

Reputation: 6224

Accepted answer contains old library not support null safety, you can use this one flutter_keyboard_visibility which support null safety.

Upvotes: 2

Mohammad Shamsi
Mohammad Shamsi

Reputation: 571

for to visible keyboard this code:

FocusScope.of(context).requestFocus();

for to unvisible keyboard this code:

FocusScope.of(context).unfocus();

for check visiblity of keyboard :

FocusScope.of(context).hasFocus

your provided code:

class Search extends StatefulWidget {
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Expanded(
              flex: 1,
              child: ListView(
                children: [
                 FocusScope.of(context).hasFocus ? Center(child: Text("true"),) : Center(child: Text("false"),)
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 3

Akif
Akif

Reputation: 7640

As @Anas Mohammed mentioned, you can do it with the keyboard_visibility package. Here is a total example:

import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';


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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Keyboard visibility example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KeyboardVisibilityExample(),
    );
  }
}

class KeyboardVisibilityExample extends StatefulWidget {
  KeyboardVisibilityExample({Key key}) : super(key: key);


  @override
  _KeyboardVisibilityExampleState createState() => _KeyboardVisibilityExampleState();
}

class _KeyboardVisibilityExampleState extends State<KeyboardVisibilityExample> {

  KeyboardVisibilityNotification _keyboardVisibility = new KeyboardVisibilityNotification();
  int _keyboardVisibilitySubscriberId;
  bool _keyboardState;

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

    _keyboardState = _keyboardVisibility.isKeyboardVisible;

    _keyboardVisibilitySubscriberId = _keyboardVisibility.addNewListener(
      onChange: (bool visible) {
        setState(() {
          _keyboardState = visible;
        });
      },
    );
  }

  @override
  void dispose() {
    _keyboardVisibility.removeListener(_keyboardVisibilitySubscriberId);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keyboard visibility example'),
      ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                    labelText: 'Input box for keyboard test',
                ),
              ),
              Container(height: 60.0),
              Text(
                'The current state of the keyboard is: ' + (_keyboardState ? 'VISIBLE' : 'NOT VISIBLE'),
              ),
            ],
          )
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions