May I kindly have some assistance how to show a keyboard on resume?

Here's my code:

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');
      _focusNode.requestFocus();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => FocusScope.of(context).requestFocus(new FocusNode()),
        child: 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, // remove this line to have white background
                  textInputType: TextInputType.number,
                  autoFocus: true,
                  focusNode: _focusNode,
                  

I'm using it for a project and trying to write an integration on it. Following lines are used to enter the value in it.

await driver.waitFor(otpTextField); await driver.tap(otpTextField); await driver.enterText("1"); Expected: The field takes the tap and gets the text. Actual The flutter drive times out saying tap is taking too long. I can manually tap and enter values though.

Version: 5.0.1 Flutter Version: 1.20.1 Dart: 2.9.0

Hi, my QA team found that there's a misplaced cursor on the iOS iPhone 7 device running ios 13.

Here's my implementation

return new Scaffold(
      key: _otpKey,
      backgroundColor: Colors.white,
      appBar: CustomAppBar(title: AppLocalization.of(context).verificationNumber, showBackButton: false),
      body: _isResendLoading
          ? LoadingIndicator()
          : Container(
              padding: EdgeInsets.fromLTRB(40.0, 20.0, 40.0, 20.0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 15.0),
                  ),
                  RichText(
                    text: TextSpan(
                      style: TextStyle(color: CustomColors.mainColor()),
                      children: <TextSpan>[
                        TextSpan(text: AppLocalization.of(context).enterTheCode + ' '),
                        TextSpan(
                            text: phoneNumber + '.',
                            style: TextStyle(fontWeight: FontWeight.bold)),
                        TextSpan(text: ' ' + AppLocalization.of(context).itsOnlyValid),
                      ],
                    ),
                  ),
                  _buildForm(context),
                  Expanded(
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: _buildBottom(context),
                    ),
                  ),
                ],
              ),
            ),
    );
  }

  Widget _buildForm(context) {
    return new Form(
      key: otpFormKey,
      child: new Container(
        width: 250.0,
        child: new Column(
          children: <Widget>[
            PinCodeTextField(
              length: 4,
              obsecureText: false,
              shape: PinCodeFieldShape.circle,
              borderRadius: BorderRadius.circular(20.0),
              backgroundColor: Colors.white,
              textInputType: TextInputType.number,
              currentText: (value) {
                setState(() {
                  _otpCode = value;
                });

                if (value.length == 4) {
                  verifyOtp();
                  return;
                }
              },
              borderWidth: 2.0,
              activeColor: Color.fromRGBO(90, 96, 117, 1),
              inactiveColor: Color.fromRGBO(205, 205, 205, 1),
              fieldHeight: 100.0,
              fieldWidth: 50.0,
            )
          ],
        ),
      ),
    );
  }

Hey, firstly thank you for the package I have been able to use it well for my use cases so far.

I am facing one issue, it's that I am not able to focus on a particular block. For example, I have entered an incorrect value in box 2 then I have to delete all the values from block 4 till block 2 to re-enter the value. The cursor seems to focus on the last block always.

Is there any property that I can pass to enable this? I looked into the package code but couldn't find the solution.

Hoping for a response, thanks for your time & effort.

I like the paste function of components very much. But I think she can change.

The existing methods of parameter control will bring many problems, such as user interface and localization. In fact, it can make it more flexible. I've removed the getactionbuttons and showpastedialog functions. Then I give the ownership to the developers themselves.

I added the following code:

final String Function(String pasteValue, String fieldValue) pasteAction;

            onLongPress: widget.enabled
                ? () async {
                    var data = await Clipboard.getData("text/plain");
                    if (data.text.isNotEmpty) {
                      var str = widget.pasteAction(data.text, _textEditingController.text);
                      if (str != null && str.isNotEmpty == true){
                        _textEditingController.text = str.substring(0, widget.length - 1);
                      }
                      else if (widget.pasteAction == null){ // Default paste
                        _textEditingController.text = data.text.substring(0, widget.length - 1);
                      }
                    }
                  }
                : null,

In this way, developers can customize the response mode of pasteaction. You can adjust it according to your UI, and you can consider the need to paste without asking.

Because multiple parameters will be deleted. So I didn't try to pull the request.

Hi 👋,

this PR will integrate "last pin" functionality to the actual state.

I added "lastPin" as a parameter and initialized the controller and the initialValues with the String. If lastPin is not provided, the standard use case as always will appear.

The actual use case why I am requesting this PR is:

pinTheme: PinTheme(
                            shape: PinCodeFieldShape.underline,
                            fieldHeight: 60,
                            fieldWidth: 50,
                            inactiveColor: kChacaYellowColor,
                            activeColor: kChacaYellowColor,
                            inactiveFillColor: kChacaYellowColor,
                            selectedColor: kChacaYellowColor,
                            selectedFillColor: kChacaYellowColor,
                            activeFillColor: hasError ? Colors.orange : Colors.white,
                          )

its showing eror like this

• A borderRadius can only be given for a uniform Border.

Thank for your package. I have an error when enter pin code then cursor not focus on next input and only fill all when enter max length. Can you help me?

Nice work by the team!

I'm not sure if the package supports autofill, it seems not included in this current version. Is there any way to get it work?

Moreover android supports SMS verify, but that comes with bit restriction like, <#> Your otp code is 987879, If the sender doesn't contain # in front of the message, it won't get detected.

I'm using Firebase OTP login that doesn't include # In front of every message, so no way of autofill that sms to my field.

Is there any solution to this? Thanks.

My Android offers me to "automatically put codes from SMS". If I agree, your pin code widget completely stops responding to manual input. I tap on it, and keyboard doesn't appear. Seems like it endlessly waits for SMS, blocking the input. If I press the "back" button, a pin form begins working again. The issue appeared only on the real device.

It is not possible to show keyboard again , after pressing keyboard's on back button. Please help to solve this issue. I already used autoDisposeControllers: false ,but it doesn't work.And problem is only for android devices.

A simple code snippet to reproduce this issue is below. Using the go_router package as a navigation. When I open the 2nd screen which has the field autofocus: true, - the keyboard hides anyway! Expected behavior - the keyboard is not hidden as if we were using the commented-out TextFormField widget. P.S.: The same issue using Navigator with "replacement" methods (Navigator.pushReplacement...)

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

void main() => runApp(const MyApp());

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      name: 'base',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
    ),
    GoRoute(
      path: '/details',
      name: 'details',
      builder: (BuildContext context, GoRouterState state) {
        return const DetailsScreen();
      },
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // TextFormField(
            //   autofocus: true,
            // ),

            PinCodeTextField(
              appContext: context,
              length: 4,
              autoFocus: true,
              onChanged: (String value) {},
            ),
            ElevatedButton(
              onPressed: () => context.goNamed('details'),
              child: const Text('Go to the Details screen'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  const DetailsScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              autofocus: true,
            ),
            ElevatedButton(
              onPressed: () => context.goNamed('base'),
              child: const Text('Go back to the Home screen'),
            ),
          ],
        ),
      ),
    );
  }
}

how can i change text color of typed characters? its white and i can't change that

PinCodeTextField(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  pinTheme: PinTheme(
    borderWidth: 1,
    fieldWidth: 30,
    shape: PinCodeFieldShape.underline,
    activeColor: Colors.black,
    inactiveColor: Colors.black,
    activeFillColor: Colors.transparent,
    selectedColor: Colors.black,
    selectedFillColor: Colors.transparent,
    inactiveFillColor: Colors.transparent,
    fieldOuterPadding: EdgeInsets.zero,
  ),
  appContext: context,
  length: 6,
  obscureText: true,
  obscuringCharacter: '*',
  blinkWhenObscuring: true,
  hintStyle: AppTheme(context).color(Colors.black).make(),
  animationType: AnimationType.fade,
  cursorColor: Colors.black,
  animationDuration: const Duration(milliseconds: 300),
  enableActiveFill: true,
  //errorAnimationController: errorController,
  controller: model.$verifyCode.adaptee,
  keyboardType: TextInputType.number,
  onCompleted: (v) {},
  onChanged: (value) {},
  pastedTextStyle: TextStyle(
    color: Colors.green.shade600,
    fontWeight: FontWeight.bold,
  ),
  beforeTextPaste: (text) {
    return true;
  },
),

I am setting up the library, so I am not familiar with it.

I found there is a GestureDetector wrapping the full body of the Scaffold in the example.

However, it doesn't have any apparent functionality since the onTap "does nothing" and the only other parameter is "child" (where the actual body of the example resides).

Am I missing something? Is it only a way to suggest that the focus of the "text flieds" could be granted by catching a tap anywhere on the page? It is confusing...

Hi, There is an issue with copy/paste to the PinCodeTextField.

inputFormatters: [FilteringTextInputFormatter.digitsOnly], - with this field we can allow users, to input only digits from the keyboard. But still exist an opportunity to paste text to the PinCodeTextField.

It would be great to be able to control such kind of behavior.

On changing the state of the screen with PinCodeTextField, this error is being thrown:

======== Exception caught by foundation library ====================================================
The following assertion was thrown while dispatching notifications for FocusNode:
setState() called after dispose(): _PinCodeTextFieldState#28fbb(lifecycle state: defunct, not mounted, tickers: tracking 0 tickers)

This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.

The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().