パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v3.0.0

number_display

幅が制限されたコンポーネントにデータを表示する場合、この関数は数値を特定のチャート長さにスマートに変換するのを助けます。シンプルで、明確で、柔軟かつ正確です。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
1.7万
いいね数
77
Pub ポイント
160

パッケージをインストール

flutter pub add number_display

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

number_display パッケージは、幅制限のある UI コンポーネント内で数値をフォーマットして表示するためのスマートで柔軟な方法を提供します。狭いスペースに収まるように、数値の表現を自動的に調整します。たとえば、略語(K、M など)を使用したり、少数点以下を切り捨てたりすることで、読みやすさと正確性を保ちながら、制限された領域に収めることができます。シンプルさと正確性を重視して設計されており、ダッシュボード、データカード、およびスペースが限られているが明確さが求められるすべての UI に最適です。このパッケージはすべての主要プラットフォームで動作し、Flutter アプリにスムーズに統合できます。

用途

  • コンパクトなUIで大きな数値を表示する
  • ダッシュボードでのメトリクスのフォーマット
  • データカード内のスペースの最適化
  • 限定領域内のリアルタイム数値の更新
  • 応答性のある番号ラベルの作成

主な機能

  • スマートな数値略語(K、M、B)
  • 自動小数点のトリム
  • 幅に応じたフォーマット
  • クロスプラットフォーム互換性
  • シンプルな API インテグレーション
  • 設定可能な精度

適している対象

  • データ可視化アプリ
  • ダッシュボードインターフェース
  • モバイルおよびウェブ分析ツール
  • パフォーマンスが重要なUI
  • 最小限の数値フォーマットを求める開発者

注意事項

  • 正確なレイアウト制約に合わせて調整が必要になる場合があります
  • 数値形式のフォーマットに限定
  • 数値以外のデータには適していません
  • 利用可能な画面幅に依存する
  • 静的または予測可能なレイアウトコンテキストで最も適切に使用される

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

number_display

Display number smartly within a certain length.

final display = createDisplay(length: 8);

display(-254623933.876)    // result: -254.62M

The conversion follow this rules:

  • result char length will never overflow length
  • replace null, nan or infinity to placeholder
  • use locale string with commas ( 1,234,222 ) as possible ( configurable )
  • trim number with units ( 1.23k ) when length is limited
  • convert scientific notation ( 1.23e+4 ) to friendly form
  • when omitting decimals, you can change the rounding type, default to 'round'
  • no decimal tailing zeros
  • no float error

It also has a JavaScript version

Install

Add this to your package's pubspec.yaml file:

dependencies:
  number_display: # latest version

Details see pub.dev

Usage

In version 2.* we only export a createDisplay function for users to custom their display function. So the real display function has only one input: value . This separates the configuration and usage, which is more simple and clear.

import 'package:number_display/number_display.dart';

final display = createDisplay(
  length: 8,
  decimal: 0,
);

print(display(data));

The complete configuration params are listed in the next section .

If the length overflow, the trimming rules in order are:

  • omit the locale commas
  • slice the decimal by the room left
  • trim the integer with number units ( k, M, G, T, P )
  • if the length is >= 5, any number can be trimmed within it. If it's less than 5 and input number is too long, display will throw an exception.

Conversion examples:

createDisplay();

null => ''
double.nan => ''

-123456789.123456789 => '-123.457M'
'123456' => '123,456'
-1.2345e+5 => '-123,450'

With some configs:

createDisplay(
  separator: false,
  placeholder: '--'
);

null => '--'
123456 => '123456'

Locale

By setting the seperator and decimalPoint , numbers can be any locale form: '4.623.933,8'.

Configurations

length

( default: 9 )

The max length the result would be. length should no less then 5 so that any number can display ( say -123000 ) after trim.

decimal

( default: equals to length )

The max decimal length. Note that this is only a constraint. The final precision will be calculated by length, and less than this param. This param is the same as 'length' by default, witch means no additional limit. There will be no decimal trailing zeros.

placeholder

( default: '' )

The result when the input is neither string nor number, or the input is NaN, Infinity or -Infinity. It will be sliced if longer than length param.

separator

( default: ',' )

Set the locale string separators ( 1,234,222 ), if there are rooms. Set it to null if you don't need any. Only the first char is kept.

decimalPoint

( default: '.' )

Set the locale string decimal point. Only the first char is kept.

roundingType

( default: RoundingType.round )

The rounding type when omitting decimals, enum in RoundingType.round, RoundingType.floor or RoundingType.ceil.

units

( default: ['k', 'M', 'G', 'T', 'P'] )

The digit units to use. Only the first char is kept for each unit. If the property is set to null or too short, it will fallback to the default.

Blogs

Displaying Numbers in Frontend

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。