 # How to convert numbers in Flutter into English numerals

Are you in need of a tool to help you convert numbers into their English written form but don’t know where to start? The english_numerals plugin may be able to assist you with this task. It is important to note that at the present time, this plugin is only able to handle integer conversions. As the author of this plugin said: Only integer cardinals are currently available, in the non-inclusive range ]-10^66, 10^66[.

If you find yourself frequently needing to translate numbers into their written form, this plugin could potentially be a useful resource for you. However, it is worth keeping in mind that it is currently limited to integer conversions.

It is possible that in the future, the plugin may be updated to include additional features and capabilities. Until then, if you need to convert non-integer numbers or numbers outside of the specified range, you may need to look for alternative solutions.

The english_numerals plugin was developed by Gil Bassi and can be found on both the pub.dev and GitHub websites. If you are interested in learning more about this plugin, or if you would like to download and use it for yourself, you can find it on either of these platforms.

The pub.dev page provides information about the plugin’s features and instructions for how to use it, while the GitHub page allows you to access the plugin’s source code and contribute to its development. Both of these pages are useful resources for anyone looking to learn more about the english_numerals plugin and how it can be utilized in various projects.

## What do the English numerals mean?

English numerals are the words that are used to represent numbers in the English language. Here is a list of the English numerals from zero to ten:

0 – zero 1 – one 2 – two 3 – three 4 – four 5 – five 6 – six 7 – seven 8 – eight 9 – nine 10 – ten

• English numerals can be used to represent any number, whether it is a whole number, a fraction, or a decimal.
• The English numerals are usually written in base 10, which means that there are ten different digits (0, 1, 2, 3, 4, 5, 6, 7, 8, and 9) that can be used to represent any number.
• English numerals can be used in different contexts, such as when counting objects, measuring quantities, expressing dates and times, and performing mathematical operations.
• English numerals can be written in different forms, such as in standard form (e.g. 123), in expanded form (e.g. 100 + 20 + 3), or in word form (e.g. one hundred twenty-three).
• The English numerals can also be represented using Roman numerals, which are a system of numerical notation that uses letters of the alphabet to represent numbers.

• In addition to the digits 0 through 9, the English language also has special words for numbers that are powers of ten (such as hundred, thousand, million, and billion), as well as for fractions (such as quarter, half, and third).
• English numerals can be used to express large numbers using the “short scale” or the “long scale.” In the short scale, which is used in most English-speaking countries, the names of the powers of ten are based on the number of zeros in the number. For example, a million is 1,000,000, and a billion is 1,000,000,000. In the long scale, which was used in some English-speaking countries in the past, the names of the powers of ten are based on the number of groups of three zeros in the number. For example, a million is 1,000,000, but a billion is 1,000,000,000,000.
• English numerals can also be used to express quantities in different units of measurement, such as length, mass, volume, and time. For example, you might say “five feet” to indicate a length of 5 feet, or “three hours” to indicate a duration of 3 hours.
• The English numerals can be written using different symbols and punctuation marks, depending on the context in which they are used. For example, you might use a period (.) to indicate a decimal point (e.g. 3.14), or you might use a comma (,) to separate groups of three digits in a large number (e.g. 1,000,000).

## Where in Flutter the English numerals can be used?

English numerals can be used in many different contexts and for a variety of purposes. Some examples of where and how the English numerals are used include:

• Counting objects: You can use English numerals to count the number of objects in a group, such as “one apple, two apples, three apples, etc.”
• Measuring quantities: You can use English numerals to express quantities of something, such as “five gallons of milk” or “ten pounds of sugar.”
• Expressing dates and times: You can use English numerals to express dates and times, such as “September 3rd” or “7:00 AM.”
• Performing mathematical operations: You can use English numerals to represent numbers in mathematical equations and perform arithmetic operations, such as “3 + 5 = 8” or “9 x 3 = 27.”
• Expressing large numbers: You can use English numerals and special words like “million” and “billion” to express large numbers, such as “one million dollars” or “ten billion miles.”

These are just a few examples of where and how English numerals can be used.

## Flutter english_numerals widget

The english_numerals widget is capable of displaying extremely large numbers, including those up to the vigintillion range. For reference, a vigintillion is an enormous number that is equal to 1 followed by 63 zeros. To put this into perspective, here is a hierarchical list comparing various large numbers:

• thousand – is equal to 1 followed by 3 zeros
• million – is equal to 1 followed by 6 zeros
• billion – is equal to 1 followed by 9 zeros
• trillion – is equal to 1 followed by 12 zeros
• quadrillion – is equal to 1 followed by 15 zeros
• quintillion – is equal to 1 followed by 18 zeros
• sextillion – is equal to 1 followed by 21 zeros
• septillion – is equal to 1 followed by 24 zeros
• octillion – is equal to 1 followed by 27 zeros
• nonillion – is equal to 1 followed by 30 zeros
• decillion – is equal to 1 followed by 33 zeros
• undecillion – is equal to 1 followed by 36 zeros
• duodecillion – is equal to 1 followed by 39 zeros
• tredecillion – is equal to 1 followed by 42 zeros
• quattuordecillion – is equal to 1 followed by 45 zeros
• quindecillion – is equal to 1 followed by 48 zeros
• sexdecillion – is equal to 1 followed by 51 zeros
• septendecillion – is equal to 1 followed by 54 zeros
• octodecillion – is equal to 1 followed by 57 zeros
• novemdecillion – is equal to 1 followed by 60 zeros
• vigintillion – is equal to 1 followed by 63 zeros

## How to use the english_numerals widget in Flutter

To install this plugin you need to add it to the dependencies in the project pubspec.yaml file and then import it to your Dart code.

``````dependencies:
english_numerals: ^0.0.1``````
``import 'package:english_numerals/english_numerals.dart';``

When the plugin is installed we can easily try it if it works. We can try to print some value in initState().

``````@override
void initState() {
print(Cardinal(123));
}``````

The printed output in the console will be: one hundred twenty-three.

The english_numerals plugin is designed to be a straightforward and user-friendly tool that does not have an overwhelming number of options. One of the only customizable features is the option to choose between US English or UK English output. By default, the plugin will produce results in US English, as demonstrated in the example provided.

If you prefer to have the output displayed in UK English, that option is also available. Simply select the UK English setting and the plugin will adjust its output accordingly. Overall, the english_numerals plugin is a simple yet effective tool for converting numbers into written form in either US or UK English.

``````@override
void initState() {
print(Cardinal(123).enUk);
}``````

The output here is: one hundred and twenty-three.

The example below shows all the potions available whereas, in the last three options, the output will be the same.

``````@override
void initState() {
print(Cardinal(123).enUk);
print(Cardinal(123).enUs);
print(Cardinal(123));
print(Cardinal(123).toString());
}``````

The output is presented below.

``````I/flutter ( 9511): one hundred and twenty-three
I/flutter ( 9511): one hundred twenty-three
I/flutter ( 9511): one hundred twenty-three
I/flutter ( 9511): one hundred twenty-three``````

## Convert TextField Number to Text String in Flutter

Now I will show you how to pass value from the TextField widget into the Text widget.

So first we will initialize a String number and then add our TextField widget and text widget.

``String? number;``

In the onChange, we pass value to our number inside setState. Next, we are checking if the value is null. if it is null the Text will be empty, if it is not null we print our number.

``````Column(
children: [
TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
),
onChanged: (value) => setState(() => number = value),
),
number == null ? Text('') : Text('\$number'),
]
)``````

When the user enters a number and clicks off the `TextField`, the `onChanged` callback function is triggered, and the number that the user entered is assigned to the `number` variable. The `Text` widget displays the value of `number`. If `number` is `null`, then the `Text` widget will not display anything.

## How to use ? and : in Flutter (Flutter ternary operator)

In Flutter, the “?” and “:” characters are used as part of the ternary operator. The ternary operator is a shorthand way of writing an “if-else” statement. It is used to evaluate a boolean expression and return one of two values depending on the result.

Here is an example of how the ternary operator can be used in Flutter:

``String greeting = (isMonday) ? "Hello" : "Goodbye";``

In this example, the variable “greeting” will be assigned the value “Hello” if the boolean expression “isMonday” is true, and “Goodbye” if it is false.

The “?” character separates the boolean expression from the value that will be returned if the expression is true, while the “:” character separates the value that will be returned if the expression is true from the value that will be returned if the expression is false.

Overall, the ternary operator can be a useful tool for concisely expressing simple “if-else” statements in Flutter and other programming languages.

In the example below the statement can be used inside our initState(). Here we are using variables/values.

``````if(number == null){
number = '';
}else{
number = '123'; // use value here
}``````

And here we are using widgets instead. if the number is equal to null we use empty Text else we use Text with our value. I just hope it makes sense :).

``number == null ? Text('') : Text('\$number'),``

## Convert Numbers into Text in Flutter

Now we can convert the previous example into our working code. Instead of a String number, we can use this:

``late var numberToText = Cardinal(0);``

Basically, the Cardinal is our translator and it passes its value to the numberToText variable.

``late var numberToText = Cardinal(0);``

Here you can see our converted code. The value from TextField will be applied to our Cardinal(value) and then into numberToText which will be displayed in our Text widget. I know my explanation isn’t great but I hope you can understand the code below.

``````Column(
children: [
TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1, color: Colors.grey
)
)
),
onChanged: (value) => setState(() => numberToText = Cardinal(value)),
),
SizedBox(height: 30,),
Text(numberToText.enUk),
],
),``````

When the user enters a number and clicks off the `TextField`, the `onChanged` callback function is triggered and the `Cardinal` class is called with the value that the user entered.

## TextFields number input convert to Text string in Flutter

This code is a Flutter app that converts a number input by the user into English numerals. It uses the package “english_numerals” to accomplish this.

``````import 'package:flutter/material.dart';
import 'package:english_numerals/english_numerals.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Number into English numerals',
home: MyCustomForm(),
);
}
}

class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});

@override
State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {

String? number;
late var numberToText = Cardinal(0);

@override
void initState() {
print(Cardinal(123).enUk);
print(Cardinal(123).enUs);
print(Cardinal(123));
print(Cardinal(123).toString());
}

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(
title: const Text('flutterassets.com'),
),
child: Column(
children: [
Text('Numbers into English numerals', style: TextStyle(fontSize: 26),),
SizedBox(height: 30,),

TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1, color: Colors.grey
)
)
),
onChanged: (value) => setState(() => numberToText = Cardinal(value)),
),
SizedBox(height: 30,),
Text(numberToText.enUk),

SizedBox(height: 30,),

Column(
children: [
TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
),
onChanged: (value) => setState(() => number = value),
),
SizedBox(height: 30,),
number == null ? Text('') : Text('\$number'),
]
)
],
),
),
);
}
}``````

Variables:

``String? number;``

`number` is a nullable String variable that is used to store the number entered by the user. It is declared at the top of the `_MyCustomFormState` class and is initially set to `null`. This variable is used to store the number entered by user on the TextField widget, when the user types something it is stored in the variable and later used to display the number on the screen.

``late var numberToText = Cardinal(0);``

`numberToText` is a variable of type `Cardinal` which is a class imported from the ‘english_numerals’ library. It is used to convert the number entered by the user to English numerals. It is initially set to `Cardinal(0)`. The `late` keyword is used to indicate that this variable is not initialized until it is first accessed. The initial value is `Cardinal(0)`, this means that when the app start the variable will be set to Cardinal class with value of 0. Later on when the user enters a number and the TextField onChanged event is triggered this variable will be updated with the new value entered by user.

Here is a description of the `body` element in the `build` method of the `_MyCustomFormState` class:

``````body: Padding(
child: Column(
children: [
Text('Numbers into English numerals', style: TextStyle(fontSize: 26),),
SizedBox(height: 30,),``````

This code creates a `Padding` widget that wraps a `Column` widget. The `Padding` widget adds 16.0 pixels of padding around the `Column` widget. The `Column` widget is used to stack children widgets vertically. The first child of the `Column` is a `Text` widget that displays the text “Numbers into English numerals” with a font size of 26. The next child is a `SizedBox` widget which is used to add a fixed amount of empty space between widgets.

``````TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1, color: Colors.grey
)
)
),
onChanged: (value) => setState(() => numberToText = Cardinal(value)),
),
SizedBox(height: 30,),
Text(numberToText.enUk),``````

The above code creates a `TextField` widget which is a text input field where the user can enter a number. The `keyboardType` is set to `TextInputType.number` which means that it will show a number keyboard when the user focuses on the input field.

The `decoration` is an `InputDecoration` widget which is used to decorate the `TextField` widget. It has a `labelText` property which is used to show the hint text inside the `TextField` when it is empty and not focused.

The `enabledBorder` property is used to create an outline around the `TextField` when it is enabled. The `onChanged` callback is triggered when the user changes the text in the `TextField`. It calls the `setState` method which updates the state of the `numberToText` variable by creating a new `Cardinal` object with the value entered by the user.

The next child of the `Column` widget is a `SizedBox` widget which is used to add a fixed amount of empty space between widgets. The last child of the `Column` widget is a `Text` widget which is used to display the English numerals of the entered number.

`````` Column(
children: [
TextField(
keyboardType: TextInputType.number,
decoration: const InputDecoration(
),
onChanged: (value) => setState(() => number = value),
),
SizedBox(height: 30,),
number == null ? Text('') : Text('\$number'),
]
)``````

This code creates a `Column` widget which is used to stack children widgets vertically. The first child of the `Column` widget is a `TextField` widget which is used to get the input number from the user. The `keyboardType` is set to `TextInputType.number` which means that it will show a number keyboard when the user clicks on the TextField. The InputDecoration is used to add a label text to the TextField, which is ‘input your number’.

The onChanged property of the TextField is set to a callback function which takes in a value parameter. This function is called whenever the text in the TextField changes, and it uses setState to update the value of the ‘number’ variable with the value of the input number.

The next child of the Column widget is a SizedBox widget with a height of 30 pixels which is used to create some space between the TextField and the next widget.

The last child of the Column widget is a ternary operator that checks if the ‘number’ variable is null. If it is null, it displays an empty Text widget, otherwise, it displays the input number in a Text widget with the text ‘\$number’. This means that when the user types in a number, the input number will be displayed in the Text widget, and when the user deletes the text in the TextField, the Text widget will be empty, until the user types in a new number again.