Giter Club home page Giter Club logo

Comments (23)

M6268 avatar M6268 commented on June 3, 2024 2

The following code working perfectly.

class SomethingState extends State<Something> with WidgetsBindingObserver {
  FocusNode focusNode;

  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    focusNode = FocusNode();
    super.initState();
  }

@override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.addObserver(this);
  }

  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      if (mounted) {
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
          await Future.delayed(Duration(milliseconds: 200));
          if (focusNode.hasFocus) {
            focusNode.unfocus();
            Future.delayed(const Duration(microseconds: 1),
                () => FocusScope.of(context).requestFocus(focusNode));
          } else {
            FocusScope.of(context).requestFocus(focusNode);
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return PinCodeTextField(
      length: 6,
      focusNode: focusNode,
      autoDisposeControllers: false,
      autoFocus: true,
      textInputType: TextInputType.number,
      obsecureText: false,
      animationType: AnimationType.fade,
      pinTheme: PinTheme(
        activeColor: Constants.buttonColor,
        inactiveColor: Colors.indigo,
        selectedColor: Colors.red,
        shape: PinCodeFieldShape.circle,
        borderRadius: null,
        fieldHeight: 50,
        fieldWidth: 40,
      ),
      animationDuration: Duration(milliseconds: 300),
      onChanged: (value) {
        otp = value;
        if (otp.length == 6) {}
      },
    );
  }
}

from pin_code_fields.

konuleminova avatar konuleminova commented on June 3, 2024 1

@angelocapone Please try this on build state.

bool isKeyboardShowing = MediaQuery.of(context).viewInsets.vertical > 0; if (!isKeyboardShowing) { FocusScope.of(context).requestFocus(FocusNode()); }

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024 1

One workaround, that worked for me is

void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      print('RESUME...');
      if (mounted) {
        print('MOUNTED...');
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
          await Future.delayed(Duration(milliseconds: 200));
          print(focusNode.hasFocus);
          if (focusNode.hasFocus) {
            focusNode.unfocus();
          }
          focusNode.requestFocus();
        });
      }
    } else if (state == AppLifecycleState.paused) {
      if (focusNode.hasFocus) {
        focusNode.unfocus();
      }
    }
  }

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

Is it not working? Are you getting any kind of errors?

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

On iPhone all works fine.
The problem happens on Android 10 (Pixel3a); when I resume the App, the keyboard is not showed.
I can see the log message, print('RESUME'), on resume.
There are no errors messages.
I think this happens on any Android phones, not only on Pixel.

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

By any chance, has the focusNode got disposed? I am suspecting that the focusNode might have disposed the app went in the background. Also, add the flag, autoDisposeController = false; inside the PinCodeTextField so the PinCodeTextField won't automatically dispose it whenever the widget gets removed from the widget tree.

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

I'll yet have to check it though. I'll let you know soon if I find anything on this.

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

@adar2378
I've tried to add autoDisposeControllers: false but same issue.

                child: PinCodeTextField(
                  controller: controller,
                  autoDisposeControllers: false,
                  backgroundColor: Colors.transparent,
                  textInputType: TextInputType.number,
                  autoFocus: true,
                  focusNode: _focusNode,
                  length: 6,
                  obsecureText: false,
                  animationType: AnimationType.fade,
                  animationDuration: Duration(milliseconds: 300),
                  pinTheme: PinTheme(
                    shape: PinCodeFieldShape.underline,
                    borderRadius: BorderRadius.circular(5),
                    fieldHeight: 50,
                    fieldWidth: 40,
                  ),

Hope you can find anything on this. Thank you.

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

Unfortunately doesn't work.
The only way to show the keyboard on resume is to tap.
I've tried also on different flavors of Android phones (Pixel, Samsung, Redmi) with same problems.
Not sure if it's a limitation on Android.
Do you have it working on your phone?

from pin_code_fields.

konuleminova avatar konuleminova commented on June 3, 2024

@angelocapone I also meet this issue and problem is still exist and try to find proper solution..But in my code it helped to show keyboard after tapping textfield.

Here is my code.And my widget is stateful.

@override Widget build(BuildContext context) { if(Platform.isAndroid){ bool isKeyboardShowing = MediaQuery.of(context).viewInsets.vertical > 0; if (!isKeyboardShowing) { FocusScope.of(context).requestFocus(FocusNode()); } }

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024 
if(state == AppLifecycleState.resumed){
      print('RESUME');
      if(mounted){
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
          focusNode.requestFocus();
        });
      }
    }

Try this guys. It's working for me. The problem was you were focusing the FocusNode before the UI was built. So the TextField didn't exist. So we must wait until the UI is built. Then we can focus the TextField.

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

@adar2378
Sorry, doesn't work for me. Could you please check my code below what I'm doing wrong?
What I want to achieve is to show automatically the keyboard on resume without having to tap textfield.
I'm able to see on debug console the print messages on RESUME and MOUNTED, but no way to automatically show the keyboard on resume without tapping.

class _PinCodeVerificationScreenState extends State<PinCodeVerificationScreen> with WidgetsBindingObserver {

  TextEditingController controller = TextEditingController();
  FocusNode _focusNode;
  bool hasError = false;
  String currentText = "";
  bool _isButtonTapped = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _focusNode = FocusNode();
  }

  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      print('RESUME...');
      if (mounted) {
        print('MOUNTED...');
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
          _focusNode.requestFocus();
        });
      }
    }
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: ListView(
          children: <Widget>[
            SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: Text('Codice di verifica', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18), textAlign: TextAlign.center),
            ),
            Padding(
              padding:const EdgeInsets.symmetric(vertical: 0.0, horizontal: 5),
              child: PinCodeTextField(
                controller: controller,
                backgroundColor: Colors.transparent,
                textInputType: TextInputType.number,
                autoFocus: true,
                focusNode: _focusNode,
                length: 6,
                obsecureText: false,
                animationType: AnimationType.fade,
                animationDuration: Duration(milliseconds: 300),
                pinTheme: PinTheme(
                  shape: PinCodeFieldShape.underline,
                  borderRadius: BorderRadius.circular(5),
                  fieldHeight: 50,
                  fieldWidth: 40,
                ),
                onChanged: (value) {
                  setState(() {
                    hasError = false;
                    currentText = value;
                  });
                },

Screen Shot 2020-06-15 at 18 48 20

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

@adar2378
i.e. I want achieve the same behavior as on iPhone device where the keyboard is showed automatically on resume without tapping.
Are you able to achieve this on Android physical device?

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

Sorry, I don't have a testing device with me right now. All I've are android emulators. Worked on it. Could set autoDisposeController = false too. And you can also add a delay before refocusing I think.
WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
await Future.delayed(Duration(milliseconds: 200)){
_focusNode.requestFocus();
};
});

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

https://i.ibb.co/Bywc3YZ/ezgif-3-af21be38a90a.gif Here working link on Pixel 3 Emulator

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

@adar2378
I've tried also on Pixel3a emulator but does not work for me.
Please have a look below to my full code (it's a new fresh app), and please check also the video repro recording.
As you can see from my repro, the keyboard is not showed on resume until I tap on textfield.
Fyi... I'm using pin_code_fields: ^3.1.2 (latest)
Hope you can find anything on this. Thank you.

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

class OtpPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pin Code')),
      body: PinCodeVerificationScreen(),
    );
  }
}

class PinCodeVerificationScreen extends StatefulWidget {
  @override
  _PinCodeVerificationScreenState createState() =>
      _PinCodeVerificationScreenState();
}

class _PinCodeVerificationScreenState extends State<PinCodeVerificationScreen> with WidgetsBindingObserver {
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _focusNode = FocusNode();
  }

  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      print('RESUME...');
      if (mounted) {
        print('MOUNTED...');
        WidgetsBinding.instance.addPostFrameCallback((timeStamp) 
          async { await Future.delayed(Duration(milliseconds: 200));
          _focusNode.requestFocus();
        });
      }
    }
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: PinCodeTextField(
          autoDisposeControllers: false,
          textInputType: TextInputType.number,
          autoFocus: true,
          focusNode: _focusNode,
          length: 6,
          obsecureText: false,
          pinTheme: PinTheme(
            shape: PinCodeFieldShape.underline,
            borderRadius: BorderRadius.circular(5),
          ),
          onChanged: (value) {},
          onCompleted: (value) {},
        ),
      ),
    );
  }
}

repro

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

That's weird, I'll have a look at it tonight, thanks!

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

Hey I could not find any problem, can you tell me which flutter version and channel you're using?

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024 
% flutter --version
Flutter 1.17.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 1ad9baa8b9 (5 days ago) • 2020-06-17 14:41:16 -0700
Engine • revision ee76268252
Tools • Dart 2.8.4

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

I've thoroughly checked this issue from my end. So when the keyboard has focus and the goes to background, then if when you resume the app, the keyboard doesn't automatically focus. This looks like a bug from Flutter

flutter/flutter#52599

Here the user complaining about the same thing.

from pin_code_fields.

angelocapone avatar angelocapone commented on June 3, 2024

@adar2378
Thank you so much for looking into this from your end.
I’m going to use your workaround while waiting Flutter to fix it.

from pin_code_fields.

adar2378 avatar adar2378 commented on June 3, 2024

Yeah, needs to wait a bit because there is a bit lag in requestFocus and unfocus methods.

from pin_code_fields.

stale avatar stale commented on June 3, 2024

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from pin_code_fields.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.