Flutter_Pinput icon indicating copy to clipboard operation
Flutter_Pinput copied to clipboard

When auto-focus is true , The Pinput widget hides behind the keyboard.

Open prashantJangidSys opened this issue 1 year ago • 1 comments
trafficstars

I want that when the screen is in view state , the Pinput gains the focus and automatically scrolled down and will visible above soft keyboard , it is working fine when we replace the Pinput with Textfield.

To Reproduce Please find the attached code below-

import 'dart:async';

import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:pinput/pinput.dart';

import 'package:conf_call_sample/src/networks/api_caller.dart'; import 'package:conf_call_sample/src/utils/toast.dart';

import '../utils/assets_const.dart'; import '../utils/color_constant.dart'; import '../widgets/add_space.dart'; import '../widgets/arc_bg.dart'; import '../widgets/custom_elevated_btn.dart'; import '../widgets/get_app_widget_for_web.dart';

// ignore: must_be_immutable class OtpVerficationScreenUser extends StatefulWidget { String login; bool isNewUser;

OtpVerficationScreenUser(this.login, this.isNewUser, {super.key});

@override State<OtpVerficationScreenUser> createState() => _OtpVerficationScreenUserState(); }

class _OtpVerficationScreenUserState extends State<OtpVerficationScreenUser> { final pinController = TextEditingController(); WhoositApiCaller api = WhoositApiCaller(); Timer? _timer; int _secondsRemaining = 120; // Initial value for the countdown timer

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

startTimer();

}

@override void dispose() { _timer?.cancel(); // Cancel the timer when the widget is disposed super.dispose(); }

void startTimer() { _timer = Timer.periodic(const Duration(seconds: 1), (timer) { setState(() { if (_secondsRemaining > 0) { _secondsRemaining--; } else { _timer?.cancel(); } }); }); }

String getFormattedTime() { Duration duration = Duration(seconds: _secondsRemaining); int minutes = duration.inMinutes; int seconds = duration.inSeconds.remainder(60); return '$minutes:${seconds.toString().padLeft(2, '0')}'; }

final defaultPinTheme = PinTheme( width: 56, height: 56, textStyle: const TextStyle( color: mainHeadingText, fontSize: 18, fontFamily: fonttFamily, fontWeight: FontWeight.w400), decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), border: Border.all(color: hintTextColor), ), );

@override Widget build(BuildContext context) { return Scaffold( floatingActionButtonLocation: FloatingActionButtonLocation.centerTop, floatingActionButton: kIsWeb ? GetAppWidget("") : Container(), body: SingleChildScrollView( physics: BouncingScrollPhysics(), child: Column( children: <Widget>[ Stack( alignment: Alignment.bottomCenter, children: [ ClipPath( clipper: CustomArcPath(), child: Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height / 2.1, decoration: const BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [splashColor1, splashColor2], ), ), ), ), Positioned( top: 30, child: Image( image: const AssetImage(otpVerfication), height: MediaQuery.of(context).size.height / 3.2, width: MediaQuery.of(context).size.width / 1.2, ), ), const FractionalTranslation( translation: Offset(0.0, 0.22), child: Image( alignment: Alignment.center, image: AssetImage(appLogo), height: 80, width: 180, fit: BoxFit.contain, )) ], ), const AddVerticalSpace(verticalSpace: 15), Text( "otp_verify".tr, //i18n textAlign: TextAlign.center, style: const TextStyle( color: mainTextColor, fontSize: 26, fontFamily: fonttFamily, fontWeight: FontWeight.w700), ), const AddVerticalSpace(verticalSpace: 15), Text( "otp_note".tr, //i18n textAlign: TextAlign.center, style: const TextStyle( fontFamily: fonttFamily, fontSize: 18, fontWeight: FontWeight.w400), ), Text( "xxxxx-${widget.login.substring(5)}", textAlign: TextAlign.center, style: const TextStyle( fontFamily: fonttFamily, fontSize: 18, fontWeight: FontWeight.w400), ), const AddVerticalSpace(verticalSpace: 35), Pinput( controller: pinController, autofocus: true, length: 4, androidSmsAutofillMethod: AndroidSmsAutofillMethod.smsUserConsentApi,

          autofillHints: const [AutofillHints.oneTimeCode],
          listenForMultipleSmsOnAndroid: true,
          defaultPinTheme: defaultPinTheme,
          onCompleted: (value) {
            callApi(value);
          },
          hapticFeedbackType: HapticFeedbackType.lightImpact,
        ),
        const AddVerticalSpace(verticalSpace: 15),
        InkWell(
          onTap: () async {
            if (_secondsRemaining < 1) {
              setState(() {
                _secondsRemaining = 120;
              });
              startTimer();
              await api.resendOtp(widget.login, context);
            }
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "${"resend_otp".tr} ${getFormattedTime()}", //i18n
                style: const TextStyle(
                    color: tfLabelColor,
                    height: 1,
                    fontSize: 14,
                    decoration: TextDecoration.underline,
                    fontWeight: FontWeight.w400),
              ),
              const AddHorizontalSpace(horizontalSpace: 16)
            ],
          ),
        ),
        const AddVerticalSpace(verticalSpace: 35),
        CustomButton(
            onPressed: () {
              callApi(pinController.text);
            },
            label: "continue".tr, //i18n
            isIconVisible: false),
        const AddVerticalSpace(verticalSpace: 15),
        InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Text(
            "reenter_phone".tr, //i18n
            style: const TextStyle(
                color: tfLabelColor,
                fontSize: 14,
                height: 1.5,
                decoration: TextDecoration.underline,
                fontWeight: FontWeight.w400),
          ),
        ),
        AddVerticalSpace(verticalSpace: 10),
      ],
    ),
  ),
);

}

void callApi(String finalOtp) { if (finalOtp.isEmpty || finalOtp.length != 4) { showErrorSnackBar("otp_error".tr); //i18n } else { api.dioOtpVerifyUser(finalOtp, widget.login, widget.isNewUser); } } }

**Pinput version: - 4.0.0

Result of: flutter doctor --verbose Flutter (Channel stable, 3.19.6, on Ubuntu 22.04.4 LTS 6.5.0-35-generic, locale en_IN)

Smartphone (please complete the following information):

  • Device: Samsung Galaxy M30s
  • Android Version - 9

prashantJangidSys avatar May 30 '24 12:05 prashantJangidSys

Hi @prashantJangidSys, try to increase the scrollPadding property

Tkko avatar May 30 '24 12:05 Tkko

Since there has been no response or follow-up, I am closing this issue for now. If you still encounter the problem or need further assistance, feel free to reopen the issue or create a new one. Thank you!

Tkko avatar Dec 08 '24 11:12 Tkko