定时器格式化程序从右向左摆动

Question

我必须在一行中输入文本字段我希望用户在分钟文本字段中输入，两次输入后自动转移到左侧文本字段，即小时文本字段
我希望这样：-首先我输入2，然后显示00:02第二次我输入6，然后显示00:26第三个I输入3，然后显示02:63四个I输入1，然后显示26:31

我在这里附上我的代码：

formate: 00:00
I want this:- 
first I input 2 then it shows 00:02
second I input 6 then it shows 00:26
third I input 3 then it shows 02:63
four I input 1 then it  shows 26:31
if (goalData.goalType == "du") ...[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColors.grayLightColor.withOpacity(0.3),
),
margin: const EdgeInsets.symmetric(horizontal: 18),
padding: const EdgeInsets.only(bottom: 5),
height: 40,
child: Builder(builder: (context) {
return Row(
children: [
Flexible(
flex: 1,
child: TextField(
onChanged: (value) {
if (value.length == 4) {
myFocusNode.requestFocus();
}
},
autofocus: true,
controller: progressInHour,
textAlign: TextAlign.center,
keyboardType: TextInputType.numberWithOptions(
decimal:
goalData.goalType == "dt" ? true : false,
signed: true),
decoration: InputDecoration(
border: InputBorder.none,
hintText:
(goalData.goalType == "du") ? "HH" : ''),
inputFormatters: [
if (goalData.goalType == "dt") ...{
FilteringTextInputFormatter.allow(
RegExp(r'^d*.?d{0,2}')),
} else if (goalData.goalType == "du") ...{
formatterTimeHours,
FilteringTextInputFormatter(
RegExp("2[0-4]|1[0-9]|[1-9]"),
allow: true)
} else ...{
FilteringTextInputFormatter(RegExp("[0-9]"),
allow: true)
},
],
),
),
const Text(":"),
Flexible(
child: TextField(
focusNode: myFocusNode,
onChanged: (value) {
print("this is our value $value");
if (int.parse(value) > 60) {
AppUtil.showToastMessage(
ctx, "Minutes can't be more than 60");
}
},
controller: progress,
textAlign: TextAlign.center,
keyboardType: TextInputType.numberWithOptions(
decimal:
goalData.goalType == "dt" ? true : false,
signed: true),
decoration: InputDecoration(
border: InputBorder.none,
hintText:
(goalData.goalType == "du") ? "MM" : ''),
inputFormatters: [
if (goalData.goalType == "dt") ...{
FilteringTextInputFormatter.allow(
RegExp(r'^d*.?d{0,2}')),
} else if (goalData.goalType == "du") ...{
formatterTimeMin,
} else ...{
FilteringTextInputFormatter(RegExp("[0-9]"),
allow: true)
},
],
),
),
],
);
}),
),
],
var formatterTimeHours = MaskedInputFormatter('####');
var formatterTimeMin = MaskedInputFormatter('##',
allowedCharMatcher: RegExp(r'^[0-5]?[0-9]$'));

fo 包

Answer 1

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class TimeInputField extends StatefulWidget {
TextEditingController controller = TextEditingController();
TimeInputField({Key? key, required this.controller}) : super(key: key);
@override
_TimeInputFieldState createState() => _TimeInputFieldState();
}
class _TimeInputFieldState extends State<TimeInputField> {
String hrCounter = '00';
String minCounter = '00';
String temp = "";
@override
void initState() {
// widget.controller.selection = TextSelection.fromPosition(
//     TextPosition(offset: widget.controller.text.length));
super.initState();
}
@override
Widget build(BuildContext context) {
return TextFormField(
autofocus: true,
textAlign: TextAlign.center,
controller: widget.controller,
keyboardType: const TextInputType.numberWithOptions(decimal: false),
inputFormatters: [
LengthLimitingTextInputFormatter(9),
],
decoration: InputDecoration(border: InputBorder.none, hintText: "HH:MM"),
onChanged: (val) {
String y = "";
switch (val.length) {
case 0:
setState(() {
hrCounter = "00";
minCounter = "00";
});
break;
case 1:
setState(() {
minCounter = "0" + val;
temp = val;
widget.controller.value = widget.controller.value.copyWith(
text: hrCounter + ":" + minCounter,
selection: const TextSelection.collapsed(offset: 5),
);
});
break;
default:
setState(() {
for (int i = 1; i <= val.length - 1; i++) {
y = y + val.substring(i, i + 1);
}
y = y.replaceAll(":", "");
val = y.substring(0, 2) + ":" + y.substring(2, 4);
temp = val;
widget.controller.value = widget.controller.value.copyWith(
text: val,
selection: const TextSelection.collapsed(offset: 5),
);
});
break;
}
},
);
}
}