How to Format Numbers and Dates in Flutter

Hello everyone, welcome back at porkaone. On this occasion we will learn how to format numbers and dates so that they are easier to read and easier to see in Flutter. Are you curious? Let's follow the discussion below.

We will use the intl package. This package is very useful and quite easy to use. We can use this package to customize number and date formats. For example, the number 1000 can be changed to 1,000 or the date 2023-20-10 can be changed to 20 October 2023. This format can also be adjusted to the destination country.

It's not difficult to use, and of course very useful if you are developing financial applications that need easy-to-read numbers and dates according to each user's country. Let's just go straight to the tutorial below.

Read Another Article ✨

📰 1. How to Display a Website in Flutter with Webview  read more

📰 2. How to Make a Bubble Bottom Bar in Flutter read more

📰 3. How to Install Java Development Kit and Add Variable Path to ENV read more

📰 4. How to Make Copy Feature in Flutter Apps read more

How to Format Numbers and Dates in Flutter

1. Create a new flutter project with the name you want.

2. Open the pubspec.yaml file then add the intl: ^0.18.1 package, follow the method as shown in the image below.

Add Package

3. Then open the main.dart file. Then follow the script below.

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

void main() {
  runApp(
    MaterialApp(
      //remove debug at the top right
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Formatting Number and Date'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Format Angka'),
            Text(
              //money format according to country
              'Format Uang dari 12000 menjadi ${NumberFormat.currency(locale: 'id_ID', symbol: 'Rp ').format(12000)}'
            ),
            SizedBox(height: 20,), 
            Text('Format Persen'),
            Text(
              //money format according to country
              'Format Persentase 0.4567 menjadi ${NumberFormat.percentPattern().format(0.4567)}'
            ),
            SizedBox(height: 20,), 
            Text('Format Tanggal'),
            Text(
              //money format according to country
              'Tanggal 2023-04-05 menjadi ${DateFormat('dd-MM-yyyy').format(DateTime.parse('2023-04-05'))}'
            ),
            SizedBox(height: 20,), 
            Text('Format Tanggal Contoh Lain'),
            Text(
              //money format according to country
              'Tanggal 2023-04-05 menjadi ${DateFormat('dd MMMM yyyy').format(DateTime.parse('2023-04-05'))}'
            ),
          ],
        ),
      ),
    );
  }
}

4. The final display when you run it on the emulator or real device.

Final Result

Now you don't need to be confused anymore about how to create a number and date format that can be adapted to each country. The method is easy, you don't need to create a special function to make it that way.

Intl can do other formats like

1. Date and Time Formats: You can format dates and times in a variety of ways, including long or short date formats, 12-hour or 24-hour time formats, and more.
2. Currency Format: You can format currency values ​​correctly for different currencies, including currency signs and appropriate decimal amounts.
3. Number Format: You can format numbers with thousands separators, appropriate decimal symbols, and the desired number of decimals.
4. Percent Format: You can format numbers as percentages appropriately.
5. Phone Number Format: You can format phone numbers in various formats according to specific cultural rules.
6. Text Format: You can format text for different uses, such as changing uppercase to lowercase or changing text to bold.
7. Localization: You can translate your in-app texts and messages into different languages ​​easily.
8. Date and Time Manipulation: You can perform operations such as adding or subtracting days from a date or displaying the time difference between two dates.
9. Time Zone Handling: You can manage time zones properly, such as displaying time in different time zones.
10. Date Format Based on Calendar Date: You can change the date format according to the calendar used in a particular culture (for example, Gregorian calendar, Hijrian calendar, etc.).

That's it for our short tutorial this time on how to format numbers and dates in Flutter. Hopefully this short tutorial is useful. If you have any questions, please ask directly in the comments column below. That is all and thank you.