Cara Memformat Angka dan Tanggal di Flutter

Halo semuanya kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat format angka dan tanggal agar cara bacanya lebih mudah dan enak dilihat di flutter. Penasaran?, ayo ikuti pembahasannya di bawah ini.

Kita akan menggunakan paket intl. Paket ini sangat berguna dan cukup mudah digunakan. Kita dapat menggunakan paket ini untuk menyesuaikan format angka dan tanggal. Misalnya angka 1000 bisa diubah menjadi 1.000 atau tanggal 2023-20-10 dapat diubah menjadi 20 Oktober 2023. Format ini juga dapat disesuaikan dengan negara tujuan.

Tidak sulit menggunakannya, dan tentunya sangat bermanfaat jika kalian sedang mendevelop aplikasi keuangan yang butuh angka dan tanggal yang mudah dibaca sesuai dengan negara pengguna masing-masing. Langsung saja kita masuk ke tutorialnya di bawah ini.

Baca Artikel Lain ✨

📰 1. Membuat Aplikasi Berita dari Blogger API di Flutter read more

📰 2. Menampilkan Video Youtube Populer di Aplikasi Flutter dengan Youtube API read more

📰 3.Membuat Aplikasi Berita dengan API Wordpress read more

📰 4. Menggunakan State Management Provider pada Aplikasi Todo List Flutter read more

Cara Format Angka dan Tanggal di Flutter

1. Buatlah sebuah project flutter baru dengan nama yang kalian inginkan.

2. Buka file pubspec.yaml lalu tambahkan package intl: ^0.18.1 ikuti caranya seperti gambar di bawah ini.

Memasang Paket

3. Kemudian buka file main.dart. Lalu ikuti scriptnya di bawah ini.

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

void main() {
  runApp(
    MaterialApp(
      //menghilangkan debug di kanan atas
      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(
              //format uang sesuai dengan negara
              'Format Uang dari 12000 menjadi ${NumberFormat.currency(locale: 'id_ID', symbol: 'Rp ').format(12000)}'
            ),
            SizedBox(height: 20,), 
            Text('Format Persen'),
            Text(
              //format uang sesuai dengan negara
              'Format Persentase 0.4567 menjadi ${NumberFormat.percentPattern().format(0.4567)}'
            ),
            SizedBox(height: 20,), 
            Text('Format Tanggal'),
            Text(
              //format uang sesuai dengan negara
              'Tanggal 2023-04-05 menjadi ${DateFormat('dd-MM-yyyy').format(DateTime.parse('2023-04-05'))}'
            ),
            SizedBox(height: 20,), 
            Text('Format Tanggal Contoh Lain'),
            Text(
              //format uang sesuai dengan negara
              'Tanggal 2023-04-05 menjadi ${DateFormat('dd MMMM yyyy').format(DateTime.parse('2023-04-05'))}'
            ),
          ],
        ),
      ),
    );
  }
}

4. Tampilan akirnya saat kalian menjalankan di emulator atau real device.

Hasil Akhir

Sekarang kalian tidak perlu bingung lagi cara membuat format angka dan tanggal yang dapat disesuaikan dengan negara masing-masing. Caranya mudah, kalian tidak perlu membuat fungsi khusus untuk membuatnya sedemikian rupa.

Intl dapat melakukan format lain seperti

1. Format Tanggal dan Waktu: Anda dapat memformat tanggal dan waktu dalam berbagai cara, termasuk format tanggal panjang atau pendek, format waktu 12 jam atau 24 jam, dan banyak lagi.
2. Format Mata Uang: Anda dapat memformat nilai mata uang dengan benar untuk mata uang yang berbeda, termasuk tanda mata uang dan jumlah desimal yang sesuai.
3. Format Angka: Anda dapat memformat angka dengan pemisah ribuan, simbol desimal yang sesuai, dan jumlah desimal yang diinginkan.
4. Format Persen: Anda dapat memformat angka sebagai persentase dengan tepat.
5. Format Nomer Telepon: Anda dapat memformat nomor telepon dalam berbagai format sesuai dengan aturan budaya tertentu.
6. Format Teks: Anda dapat memformat teks untuk penggunaan yang berbeda, seperti mengubah huruf besar menjadi huruf kecil atau mengubah teks menjadi huruf tebal.
7. Lokalisasi: Anda dapat menerjemahkan teks dan pesan dalam aplikasi Anda ke dalam berbagai bahasa dengan mudah.
8. Manipulasi Tanggal dan Waktu: Anda dapat melakukan operasi seperti menambah atau mengurangkan hari dari tanggal atau menampilkan selisih waktu antara dua tanggal.
9. Penanganan Zona Waktu: Anda dapat mengelola zona waktu dengan benar, seperti menampilkan waktu dalam zona waktu yang berbeda.
10. Format Tanggal Berdasarkan Tanggal Kalender: Anda dapat mengubah format tanggal sesuai dengan kalender yang digunakan dalam budaya tertentu (misalnya, kalender Gregorian, kalender Hijri, dll.).

Sekian tutorial singkat kita kali ini tentang cara memformat angka dan tanggal di flutter. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.