0

I have precisely one TextField on the screen of my Flutter app. I want my Flutter app to both work on the desktop and on mobile.

Whenever the app is active I want all text input to go into the TextField. When the user clicks on the area outside of the TextField I still want the TextField to get all keyboard input.

What's the best way to achieve this?

raiyan22
  • 1,043
  • 10
  • 20
Christian
  • 25,249
  • 40
  • 134
  • 225

1 Answers1

0

if you mean not closing the keyboard by clicking out side here is the solution:

EDIT:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _keyboardVisible = false;
  var focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    focusNode.addListener(() {
      print("hasFocus ${focusNode.hasFocus}");
    });
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              GestureDetector(
                onTap: () {
                  print('hello');
                 // Hide the keyboard when the user taps outside the TextField
                  if (_keyboardVisible) {
                    SystemChannels.textInput.invokeMethod('TextInput.hide');
                    _keyboardVisible = false;
                  }
                  print("hasFocus ${focusNode.hasFocus}");
                },
                child: const Center(
                  child: Text('Tap outside the TextField'),
                ),
              ),
              Positioned(
                bottom: 16,
                left: 16,
                right: 16,
                child: RawKeyboardListener(
                  focusNode: focusNode,
                  onKey: (event) {
                    // Show the keyboard when the user starts typing
                    if (!_keyboardVisible) {
                      SystemChannels.textInput.invokeMethod('TextInput.show');
                      _keyboardVisible = true;
                    }
                  },
                  child: const TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'Enter text',
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

enter image description here

I'm clicking outside but the keyboard won't be hide until I click on Done.

happy coding...

Amirali Eric Janani
  • 1,477
  • 3
  • 10
  • 20
  • In your example the TextField loses focus when the user clicks outside of it. And as a result further keyboard input doesn't go into the TextField. – Christian Mar 26 '23 at 19:48
  • So please tell me your problem in a clear way. – Amirali Eric Janani Mar 26 '23 at 20:02
  • My problem is that when I press any key I want the input in my text field. – Christian Mar 26 '23 at 20:14
  • you mean that for example if you click on "Tap outside the TexField" text, your TextFiled being filled by that text??? – Amirali Eric Janani Mar 26 '23 at 20:16
  • Normally, if you click outside of the field, the TextField loses focus and thus doesn't receive the keyboard input anymore. Your code still does that. – Christian Mar 26 '23 at 20:47
  • I've edited the code and put some prints to know that the focusNode.hasFocus is true or false, please run this code and see what is happening. – Amirali Eric Janani Mar 26 '23 at 21:37
  • Copy pasting code like this into https://dartpad.dev isn't complicated. The code still doesn't solve the problem. – Christian Mar 26 '23 at 23:21
  • I'm Sure that I'm still not understand what you mean, BTW please connect with me on Linkedin: https://www.linkedin.com/in/amirali-janani-957a611b0/ and I send you a Google meet link to see what you exact mean – Amirali Eric Janani Mar 26 '23 at 23:27