Flutter 数字は ,　カンマ区切りで表示してください

数字をカンマ区切りにするには？

久しぶりにお仕事で数字を「,　カンマ区切りで表示してください」という要件がありました。昔やったことあるが忘れた😅

Cursor Editor使って早く書いてもらった(^_^;)

intlを使用する

intlといえば時間のフォーマットを日本語にするのに使っていましたが、数値のフォーマットと解析もできます。

Provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.

メッセージの翻訳、複数形と性別、日付/数値のフォーマットと解析、双方向テキストを含む、国際化とローカリゼーション機能を提供します。

example

NumberFormat classを使えば数字のカンマ区切りができそう。ダミーのデータを渡して実験してみる。

https://pub.dev/documentation/intl/latest/intl/NumberFormat-class.html

main.dart

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

String formatWithComma(int number) {
  final formatter = NumberFormat.decimalPattern();
  return formatter.format(number);
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final List<int> dummyData = [
      1000,
      25000,
      100000,
      1000000,
      7523,
    ];

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('[,] 区切り'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          spacing: 8,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ...dummyData.map((data) => Align(
                  alignment: Alignment.topLeft,
                  child: Text(formatWithComma(data)),
                )),
          ],
        ),
      ),
    );
  }
}

できました🙌

まとめ

もし「,　カンマ区切りで表示してください」というご要望があったらこちらの方法試してみてください。仕事で書いたのは###で区切ってましたが😅