Timer Formatter right to left in flutter

Question

I Have to text field in A row I want user input in the minute text field and after two inputs automatically shifted to the left side text field which is the hours' text field
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

Here I am attaching my code :

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]$'));

package for fo

herer I found the solution : you can change the postion with controller in textFormField with onchange method — Shubham vyas, Oct 04 '22 at 09:26

score 1 · Accepted Answer · answered Oct 04 '22 at 09:21

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;
        }
      },
    );
  }
}

Timer Formatter right to left in flutter

1 Answers1

Linked