Skip to content

Add custom numeric keyboard and amount selector#344

Draft
NiazSagor wants to merge 4 commits intoemavgl:masterfrom
NiazSagor:virtual-keyboard
Draft

Add custom numeric keyboard and amount selector#344
NiazSagor wants to merge 4 commits intoemavgl:masterfrom
NiazSagor:virtual-keyboard

Conversation

@NiazSagor
Copy link
Copy Markdown
Contributor

@NiazSagor NiazSagor commented Apr 13, 2026

This commit introduces a custom AmountSelector keyboard to replace the standard TextFormField for record amounts. This change provides a more specialized input experience, including an integrated calculator mode, automatic decimal shifting, and localized number formatting.

Key changes:

  • Created SmartAmountFormatter and several specialized TextInputFormatter classes (AutoDecimalShiftFormatter, LeadingZeroIntegerTrimmerFormatter, CalculatorNormalizer, GroupSeparatorFormatter) to handle complex numeric and mathematical input.
  • Implemented AmountSelector, a modal bottom sheet keyboard with support for basic arithmetic operations, sign toggling, and haptic feedback.
  • Added utility widgets and extensions for the new keyboard, including AnimatedExpanded, evaluateExpression logic, and custom styling formatters.
  • Updated edit-record-page.dart to trigger the AmountSelector via an InkWell card, replacing the direct text input field with a formatted display area.

Closes #326

NiazSagor and others added 2 commits April 13, 2026 21:49
This commit introduces a custom `AmountSelector` keyboard to replace the standard `TextFormField` for record amounts. This change provides a more specialized input experience, including an integrated calculator mode, automatic decimal shifting, and localized number formatting.

Key changes:
- Created `SmartAmountFormatter` and several specialized `TextInputFormatter` classes (`AutoDecimalShiftFormatter`, `LeadingZeroIntegerTrimmerFormatter`, `CalculatorNormalizer`, `GroupSeparatorFormatter`) to handle complex numeric and mathematical input.
- Implemented `AmountSelector`, a modal bottom sheet keyboard with support for basic arithmetic operations, sign toggling, and haptic feedback.
- Added utility widgets and extensions for the new keyboard, including `AnimatedExpanded`, `evaluateExpression` logic, and custom styling formatters.
- Updated `edit-record-page.dart` to trigger the `AmountSelector` via an `InkWell` card, replacing the direct text input field with a formatted display area.

Took 2 hours 16 minutes
@NiazSagor NiazSagor marked this pull request as draft April 13, 2026 15:53
@NiazSagor
Copy link
Copy Markdown
Contributor Author

Hi @emavgl I have started with taking the same style as in https://github.com/enrique-lozano/Monekin where a custom keyboard opens via a Modal Bottom Sheet.

This commit moves the `AmountSelector` and its associated logic, widgets, and utilities from `lib/records/keyboard/` to a more structured directory in `lib/records/amount_selector/`.

Key changes include:
- Reorganized files into `logic/`, `widgets/`, `formatting/`, and `utils/` subdirectories.
- Updated `AmountSelector` to use `LeadingZeroIntegerTrimmerFormatter` and improved the integration of `AutoDecimalShiftFormatter`.
- Enhanced `OinKoinNumberFormatter` to conditionally apply grouping separators based on the `autoDec` preference.
- Cleaned up unused extensions and imports, specifically removing the unused `CurrencyDisplayer` and redundant file size formatting logic.
- Updated references in `EditRecordPage` to point to the new locations.

Took 1 hour 4 minutes
@emavgl
Copy link
Copy Markdown
Owner

emavgl commented Apr 16, 2026

Hi @NiazSagor, thanks for the PR. I will have a look in the next few days!

@emavgl
Copy link
Copy Markdown
Owner

emavgl commented Apr 19, 2026

So, I tried this out, it looks very nice :)

I have some thoughts however:

  • Before it was opening immediately when arriving to the edit-record page and adding a new record, not it does not do anymore.
  • There is a button to change the sign, because the sign is given by the category
  • I would keep the calculator buttons always open

When the calculator is open, and you start the expression, it does not calculate automatically as before. I am not sure what I like here to be honest, but if we decide that the expr should be manually evaluated, we can use the current "change sign" button with a "=" to evalute the expr. What's your take for this? Do you prefer a manual button to evaluate or evaluate automatically? At when typing an expression, you have the same expression twice in two row. If we go for the automatic way, we can use one row to show the evaluated amount and one row the expression instead.

Since the calculator buttons will be always visible. I would use the last row to visualize in order: digit spacing character, 0, deciamal separator.

  • The font in the amount box (not in the calculator) looks different from before, if you don't mind, could we revert this? For consistency with the rest of the text.

  • If I open the calculator, and type "-" and then "CANCEL" the minus is not cancelled.

  • Also, it crashes if I type -+3 for example, as it does not support two consecutive signs. Probably the issue is not just if they are at the start, but everywhere in the string.

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

Successfully merging this pull request may close these issues.

Introducing Virtual Keyboard

2 participants