Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
prashantJangidSys opened this issue May 30, 2024 · 1 comment
Assignees

Comments

@prashantJangidSys
Copy link

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 createState() =>
_OtpVerficationScreenUserState();
}

class _OtpVerficationScreenUserState extends State {
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: [
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
@Tkko
Copy link
Owner

Tkko commented May 30, 2024

Hi @prashantJangidSys, try to increase the scrollPadding property

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants