Flutter_Pinput
Flutter_Pinput copied to clipboard
When auto-focus is true , The Pinput widget hides behind the keyboard.
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
Hi @prashantJangidSys, try to increase the scrollPadding property
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!