CurrencyInputFormatter automatically appends zeros
Closed this issue · 9 comments
Upgraded from MoneyInputFormatter to CurrencyInput formatter, and discovered this issue:
When the user enters a value into a field using CurrencyInputFormatter, the field automatically adds the decimal place and two zeros. Further input by the user does not change the field.
Example: User wants to enter in 3.45. When they enter "3" the field changes to 3.00, and when they enter 4, nothing changes. They have to select into the string after the decimal place to enter in values.
Using version 2.9.11
Can you provide a minimum reproduction code?
Adding two zeroes is a correct behavior of this formatter because by default it has a mantissaLength set to 2. So in order to enter 3.45 you need to enter 3, then tap a period key and then enter 45.
I use this formatter in a few live projects and it works correctly. So I need to understand what exactly you are doing and what is going wrong
import 'package:flutter/material.dart';
import 'package:flutter_multi_formatter/formatters/currency_input_formatter.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
textCapitalization: TextCapitalization.none,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
alignLabelWithHint: false,
disabledBorder: InputBorder.none,
errorMaxLines: 2,
hintStyle: Theme.of(context).textTheme.caption,
),
inputFormatters: [CurrencyInputFormatter()],
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
[√] Flutter (Channel stable, 3.3.9, on Microsoft Windows [Version 10.0.22000.1219], locale en-US)
• Flutter version 3.3.9 on channel stable at C:\dev\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b8f7f1f986 (13 days ago), 2022-11-23 06:43:51 +0900
• Engine revision 8f2221fbef
• Dart version 2.18.5
• DevTools version 2.15.0
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at C:\Users\Barry.Anderberg\AppData\Local\Android\sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[!] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.4.1)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional
• Visual Studio Professional 2022 version 17.4.33110.190
X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
MSVC v142 - VS 2019 C++ x64/x86 build tools
- If there are multiple build tool versions available, install the latest
C++ CMake tools for Windows
Windows 10 SDK
[√] Android Studio (version 2021.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[√] VS Code (version 1.73.1)
• VS Code at C:\Users\Barry.Anderberg\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.52.0
[√] Connected device (4 available)
• sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.1219]
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.71
• Edge (web) • edge • web-javascript • Microsoft Edge 107.0.1418.56
[√] HTTP Host Availability
• All required HTTP hosts are available
Running on sdk gphone64 x86 64
To reitterate, using the code above, I enter 3, and immediately it updates the control to 3.00 and I cannot enter more digits unless I backspace or manually select into the value. Setting mantissa 0 just makes it 3 with nothing after and I still cannot enter values.
@caseyryan what do you think?
I think it's a problem of Flutter itself. They add some bugs periodically and then fix them. I couldn't reproduce this
I'll try with the flutter version you've mentioned later though
I've finally found time to test it today. It was not a problem of Flutter but a problem of one of my other changes. Kinda side effect. Fixed in 2.9.14