MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

Overview

MoneyTextFormField

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

This widget uses the FlutterMoneyFormatter package as a basic engine that has a very powerful ability to format currencies.

latest version last commit License

Dependencies :

intl


Install

For complete steps in installing MoneyTextFormField you can see in the Installation Guide.

Usage

The following is the simplest example of using MoneyTextFormField:

import 'package:moneytextformfield/moneytextformfield.dart';

  /// ... some lines of code ...
  MoneyTextFormField(
    settings: MoneyTextFormFieldSettings()
  )
  /// ... some lines of code ...

For those of you who have not yet understood how to implement the widget package, you can use the following code in the main.dart file on your Flutter project:

import 'package:flutter/material.dart';
import 'package:moneytextformfield/moneytextformfield.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController mycontroller = TextEditingController();

  @override
  void initState() {  
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('MoneyTextFormField Demo'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => print(mycontroller.text),
          child: Icon(Icons.save),
        ),
        body: Column(
          children: <Widget>[
            /// Begin of :> MoneyTextFormField
            MoneyTextFormField(
              settings: MoneyTextFormFieldSettings(
                controller: mycontroller
              )
            )
            /// End of :> MoneyTextFormField
          ]
        )
      )
    );
  }
}

From the above code it will look more or less like the following:

MoneyTextFormField

Figure 1: Using full format

By doing a little modification, you will get the following results:

MoneyTextFormField

Figure 2: Using compact format

Referring to the example code above, to retrieve the value inputted by the user, you can get it through the mycontroller.text as in the onPressed event in the FloatingActionButton widget.


Configurations

For now, MoneyTextFormField only uses one property to configure the display of that object, the settings property that has a data type is an instance of MoneyTextFormFieldSettings.

MoneyTextFormFieldSettings

Name Data Type Description
controller TextEditingController A controller for an editable text field.
validator FormFieldValidator<String> An optional method that validates an input. Returns an error string to display if the input is invalid, or null otherwise.
inputFormatters List<TextInputFormatter> A TextInputFormatter can be optionally injected to provide as-you-type validation and formatting of the text being edited.
onChanged void An optional method that register a closure to be called when the object changes.
moneyFormatSettings MoneyFormatSettings See here
appearanceSettings AppearanceSettings See here
enabled bool Whether the form is able to receive user input.

Tips:

No need to initialize the value in controller.text, because the value will be ignored. the controller property is only intended to capture the value inputted by the user.

Notes:

The value contained in controller.text is exactly the same as the one inputted by the user and has a String data type. If you want to get results in the same format, you can use the FlutterMoneyFormatter package which is also used by MoneyTextFormField.

See detailed information about FlutterMoneyFormatter.

AppearanceSettings

Name Data Type Description
labelText String Text that describes the input field. Default value is 'Amount'
hintText String Text that suggests what sort of input the field accepts.
icon Widget An icon to show before the input field and outside of the decoration's container.
labelStyle TextStyle The style to use for the labelText when the label is above (i.e., vertically adjacent to) the input field.
inputStyle TextStyle The style to use for the input field.
formattedStyle TextStyle The style to use for the formatted output text.
errorStyle TextStyle The style to use for the errorText
padding EdgeInsetGeometry The amount of space by which to inset the widget

MoneyFormatSettings

Name Data Type Description
amount double Decimal value that will be used when initializing the widget. Default value is 0.00.
fractionDigits int The fraction digits that will be used on formatted output. Default value is 2.
currencySymbol String The symbol that will be used on formatted output. Default value is '$' (dollar sign).
thousandSeparator String The character that will be used as thousand separator on formatted output. Default value is ',' (comma).
decimalSeparator String The character that will be used as decimal separator on formatted output. Default value is '.' (dot).
symbolAndNumberSeparator String The character that will be used as separator between symbol and number. Default value is ' ' (space).
displayFormat MoneyDisplayFormat See here

MoneyDisplayFormat

MoneyDisplayFormat is an enum object with values such as the following:

Name Description
nonSymbol Used to display currency values in full format and without a currency symbol.
symbolOnLeft Used to display currency values in full format with currency symbols on the left.
symbolOnRight Used to display currency values in full format with currency symbols on the right.
compactNonSymbol Used to display currency values in a short format and without a currency symbol.
compactSymbolOnLeft Used to display currency values in a short format with a currency symbol on the left.
compactSymbolOnRight Used to display currency values in a short format with a currency symbol on the right.

Demo

For more complete samples, you can grab it from the example directory.

Our Other Package

See our other packages here.

Help Me

If you find any issues, bugs, have questions, or want to request a new features you can do it here. You can also help me to improve features or fix some issues by forking this project via Github

Change Log

Are you curious about the changes that occur in each version? See here for detailed informations.


License

Copyright (c) 2019, Fadhly Permata <[email protected]>
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this
   list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and documentation are those
of the authors and should not be interpreted as representing official policies,
either expressed or implied, of the MoneyTextFormField project.
Comments
  • Possible to change cursor color?

    Possible to change cursor color?

    Is it possible to change the textfield cursor color? By "cursor", I'm referring to the vertical line that flashes on the textfield where you type. The default color is white and I'd like to know if there's a way to edit this.

    opened by opalr 0
  • I cannot build apk release with flutter build apk command

    I cannot build apk release with flutter build apk command

    Describe the bug I launched the apk build, but I have this error

    Error log FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':moneytextformfield:verifyReleaseResources'.

    A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade Android resource linking failed C:\Users\bahal.gradle\caches\transforms-2\files-2.1\c82bf40584b9a53c31dba07a8a48f301\core-1.1.0\res\values\values.xml:142:5-173:25: AAPT: erro r: resource android:attr/fontVariationSettings not found.

     C:\Users\bahal\.gradle\caches\transforms-2\files-2.1\c82bf40584b9a53c31dba07a8a48f301\core-1.1.0\res\values\values.xml:142:5-173:25: AAPT: erro
    

    r: resource android:attr/ttcIndex not found.

    opened by bahaliou67 4
  • Initial value

    Initial value

    Is your feature request related to a problem? Please describe. I am not able to initialize this input with a value.

    Describe the solution you'd like Implement an initialValue property that takes a double as a value.

    opened by lunaboona 0
  • Large Number Error

    Large Number Error

    If the user enters extremely large numbers, I get this error:

    ════════ Exception caught by foundation library ═════════ Unsupported operation: Infinity or NaN toInt

    It might help to add an option to set a maximum number or max number of characters

    opened by opalr 0
  • Consider Updates

    Consider Updates

    Describe the bug I am unable to use your package as the dependencies are outdated. I need to use app_localizations which requires intl: ^0.16.0, and this package requires intl: ^0.15.7, therefore I am unable to use both packages, even if i reference this package in pubspec using git address.

    To Reproduce Steps to reproduce the behavior:

    1. Add intl: ^0.16.0 to pubspec.
    2. Add your package
    3. packages get
    4. "Because flutter_money_formatter >=0.8.2 depends on intl ^0.15.8 and flutter_money_formatter <0.8.2 depends on intl ^0.15.7, every version of flutter_money_formatter requires intl ^0.15.7. And because every version of moneytextformfield from git depends on flutter_money_formatter ^0.8.0, every version of moneytextformfield from git requires intl ^0.15.7."

    Expected behavior I expect the package to work and remain up to date.

    Smartphone (please complete the following information):

    • Device: iPhone7s
    • OS: iOS 13.3.1
    opened by shaun0203 0
Releases(v0.1.0)
Owner
Fadhly Permata
I am programmer, not pro gamer 🤣
Fadhly Permata
Firebase firestore currencies app, realtime database example.

Firebase firestore currencies app, realtime database example.

Mustafa KIZILTAY 1 Apr 27, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
The Flutter app demonstrates displaying data in a weekly format.

Flutter weekly chart The Flutter app demonstrates displaying data in a weekly format. I came across this kind of screen in the app that I have been wo

BenBoonya 27 Jan 2, 2023
This package helps developer to sort the flutter/dart packages and plugins alphabetically, This makes it easier when managing too many packages and when working with teams

Package helps to sort the flutter/dart packages and plugins alphabetically, This makes it easier when managing too many packages and when working with

DANCHE 7 Dec 21, 2022
Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Glenford Williams 4 Mar 26, 2021
Input fields for Flutter standalone or within a form

Flutter Input Widgets - Standalone or within a Form → flutter_input This package provides input widgets (fields) to manipulate data. The data to manip

null 7 Mar 14, 2021
A Funtioning basic Clock UI APP with extra functionalities such as displaying thecurrent time location being used and checking time for other timezones simultaneosly.

clock_UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Anjola Favour Ayomikun 0 Dec 28, 2021
An application used to manage all your tabs in a clean, scrollable, categorized format.

Tabmanager Created by Sami-ul You can contact me here: [email protected] Recent updates Made the app run faster by using the backend to serve t

Sami 7 Nov 2, 2022
Flutter form fields designed to take much of the burden of form-related coding off the programmer's back — masks, validations, keyboard type, etc.

well_formed Contents Overview Getting Started Demo application References Overview Well-Formed Widget Fields - Well-Formed - is a collection of Flutte

Dartoos 7 Nov 2, 2022
A Flutter package that provides a dropdown form field using a dropdown button inside a form field.

Dropdown form field A dropdown form field using a dropdown button inside a form field. Demo Features Can be used as regular form field. Simple to impl

Carlos Eugenio Torres 72 Jan 1, 2023
Form builder image picker - Form builder image picker for flutter

form_builder_image_picker Field for picking image(s) from Gallery or Camera for

Ferri Sutanto 0 Jan 28, 2022
Jannis 0 Jan 29, 2022
User auth form - Signup and signin user auth form with ability to stay signed in and have an option to signout.

user_auth_form SIgnup and signin user authentification form Getting Started This project is a starting point for a Flutter application. A few resource

null 0 Jan 6, 2022
Advanced & beautiful animations inspired by animate_do and Animate.css, every animation is a widget that contains default but customizable values 💙

animate_it An animation package inspired by animate_do and Animate.css. Since the original animate_do is not being maintained, I have decided to creat

Luke Moody 3 Oct 1, 2022
A simple flutter application from an Udemy course to exchange the following currencies: real, dollar and euro using HG Brasil API.

cambiador Conversor de moedas como Dollar, Euro e Real. Getting Started This project is a starting point for a Flutter application. A few resources to

Edilson Matola 1 Mar 17, 2022
Sample flutter project to show exchange Rates of leading cryptos to different currencies in the world.

bitcointicker A bitcoin ticker project Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 0 Feb 15, 2022
"FlutterMoneyFormatter" is a Flutter extension to formatting various types of currencies according to the characteristics you like, without having to be tied to any localization.

FlutterMoneyFormatter FlutterMoneyFormatter is a Flutter extension to formatting various types of currencies according to the characteristics you like

Fadhly Permata 81 Jan 1, 2023
Flutter Youtube Redesign. this gave me so much Experience For Flutter . I used Video_player and Spring animation packages in this project

youtube A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

null 1 Dec 13, 2021