Haroon6138
/
HMG_Patient_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
updare-to-3.32.sultan
Sultan khan 3 months ago
parent 0fadf3e49c
commit 4a99593990
1 changed files with 58 additions and 104 deletions
Show Stats Download Patch File Download Diff File

162
lib/widgets/otp_widget.dart
Unescape Escape View File

@ -165,7 +165,14 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
}
}
double get _width {
// Updated: Accept context to access MediaQuery
double _width(BuildContext context) {
// For tablets, use full screen width
if (MediaQuery.of(context).size.shortestSide >= 600) {
return MediaQuery.of(context).size.width;
}
// For phones, use original fixed width
var width = 0.0;
for (var i = 0; i < widget.maxLength; i++) {
width += widget.pinBoxWidth;
@ -198,7 +205,6 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
return Stack(
fit: StackFit.loose,
children: <Widget>[
_otpTextInput(),
_touchPinBoxRow(),
],
);
@ -223,12 +229,13 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
);
}
Widget _otpTextInput() {
// Updated: Accept context for width calculation
Widget _otpTextInput(BuildContext context) {
var transparentBorder = OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent, width: 0),
);
return Container(
width: _width,
width: _width(context), // Use dynamic width
height: widget.pinBoxHeight,
child: TextField(
autofocus: !kIsWeb ? widget.autoFocus : false,
@ -289,40 +296,41 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
Widget _pinBoxRow(BuildContext context) {
_calculateStrList();
// Determine if it's a tablet
bool isTablet = MediaQuery.of(context).size.shortestSide >= 600;
double boxWidth = widget.pinBoxWidth;
// Calculate dynamic width for tablets
if (isTablet) {
double screenWidth = MediaQuery.of(context).size.width;
double totalMargin = (widget.maxLength - 1) *
(widget.pinBoxOuterPadding.left + widget.pinBoxOuterPadding.right);
double availableWidth = screenWidth - totalMargin;
boxWidth = (availableWidth / widget.maxLength).clamp(100.0, 180.0); // Reasonable limits
}
List<Widget> pinCodes = List.generate(widget.maxLength, (int i) {
return _buildPinCode(i, context);
return _buildPinCode(i, context, boxWidth); // Pass dynamic width
});
return SingleChildScrollView(
// Add this
scrollDirection: Axis.horizontal, // For horizontal scrolling
scrollDirection: Axis.horizontal,
child: Row(
children: pinCodes,
mainAxisSize: MainAxisSize.min, // Important when inside a scroll view
mainAxisAlignment: MainAxisAlignment.start, // Or another suitable alignment
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
);
}
//
// Widget _pinBoxRow(BuildContext context) {
// _calculateStrList();
// List<Widget> pinCodes = List.generate(widget.maxLength, (int i) {
// return _buildPinCode(i, context);
// });
// return Row(
// children: pinCodes,
// mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// );
// }
Widget _buildPinCode(int i, BuildContext context) {
// Updated: Accept dynamic width
Widget _buildPinCode(int i, BuildContext context, double boxWidth) {
final bool isFilled = i < text.length && strList[i].isNotEmpty; // Check both conditions
final bool isCurrent = i == currentIndex;
final bool isFocused = hasFocus && isCurrent;
// Colors based on state
Color bgColor = Colors.white;
Color borderColor = Colors.white;
Color textColor = Colors.black;
@ -349,9 +357,9 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
decoration: BoxDecoration(
color: bgColor,
border: Border.all(color: borderColor, width: 1),
borderRadius: BorderRadius.circular(16), // Rounded edges
borderRadius: BorderRadius.circular(16),
),
width: widget.pinBoxWidth,
width: boxWidth, // Use dynamic width
height: widget.pinBoxHeight,
child: _animatedTextBox(
strList[i],
@ -361,82 +369,8 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
);
}
// Widget _buildPinCode(int i, BuildContext context) {
// Color borderColor;
// Color pinBoxColor = widget.pinBoxColor;
//
// if (widget.hasError) {
// borderColor = widget.errorBorderColor;
// } else if (i < text.length) {
// borderColor = widget.textBorderColor;
// } else {
// borderColor = widget.defaultBorderColor;
// pinBoxColor = widget.pinBoxColor;
// }
//
// EdgeInsets insets;
// if (i == 0) {
// insets = EdgeInsets.only(
// left: 0,
// top: widget.pinBoxOuterPadding.top,
// right: widget.pinBoxOuterPadding.right,
// bottom: widget.pinBoxOuterPadding.bottom,
// );
// } else if (i == strList.length - 1) {
// insets = EdgeInsets.only(
// left: widget.pinBoxOuterPadding.left,
// top: widget.pinBoxOuterPadding.top,
// right: 0,
// bottom: widget.pinBoxOuterPadding.bottom,
// );
// } else {
// insets = widget.pinBoxOuterPadding;
// }
// return Container(
// key: ValueKey<String>("container$i"),
// alignment: Alignment.center,
// // padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 1.0),
// margin: insets,
// child: _animatedTextBox(strList[i], i),
// decoration: BoxDecoration(
// border: Border.all(
// color: borderColor,
// width: widget.pinBoxBorderWidth,
// ),
// color: pinBoxColor,
// borderRadius: BorderRadius.circular(widget.pinBoxRadius),
// ),
// width: widget.pinBoxWidth,
// height: widget.pinBoxHeight,
// );
// }
// Widget _animatedTextBox(String text, int i) {
// if (widget.pinTextAnimatedSwitcherTransition != null) {
// return AnimatedSwitcher(
// duration: widget.pinTextAnimatedSwitcherDuration,
// transitionBuilder: widget.pinTextAnimatedSwitcherTransition ??
// (Widget child, Animation<double> animation) {
// return child;
// },
// child: Text(
// text,
// key: ValueKey<String>("$text$i"),
// style: widget.pinTextStyle,
// ),
// );
// } else {
// return Text(
// text,
// key: ValueKey<String>("${strList[i]}$i"),
// style: widget.pinTextStyle,
// );
// }
// }
Widget _animatedTextBox(String text, int i, Color textColor) {
final bool isFilled = text.isNotEmpty;
final double fontSize = isFilled ? 50 : 50;
final FontWeight fontWeight = isFilled ? FontWeight.w600 : FontWeight.normal;
@ -448,8 +382,18 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
text,
softWrap: true,
key: ValueKey<String>("$text$i"),
style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ??
TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily,),
style: widget.pinTextStyle?.copyWith(
color: textColor,
fontSize: fontSize,
fontWeight: fontWeight,
fontFamily: context.fontFamily,
) ??
TextStyle(
color: textColor,
fontSize: fontSize,
fontWeight: fontWeight,
fontFamily: context.fontFamily,
),
),
);
} else {
@ -457,8 +401,18 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
text,
softWrap: true,
key: ValueKey<String>("${strList[i]}$i"),
style: widget.pinTextStyle?.copyWith(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily) ??
TextStyle(color: textColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: context.fontFamily),
style: widget.pinTextStyle?.copyWith(
color: textColor,
fontSize: fontSize,
fontWeight: fontWeight,
fontFamily: context.fontFamily,
) ??
TextStyle(
color: textColor,
fontSize: fontSize,
fontWeight: fontWeight,
fontFamily: context.fontFamily,
),
);
}
}

Write Preview
Loading…
Cancel
Save