搜尋套件、儲存庫與 APP 分類

套件詳情v3.0.0

number_display

要在寬度受限的組件中顯示資料,此函數將智慧地幫助您將數字轉換為特定的圖表長度。簡單、純粹、彈性且精確。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
1.7萬
喜歡數
77
Pub 分數
160

安裝套件

flutter pub add number_display

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

number_display 套件提供了一種智慧且彈性的方式來格式化和顯示數字,適用於寬度受限的使用者介面元件。它會自動調整數字表示方式——例如使用縮寫(如 K、M)或截斷小數——以適應受限空間,同時維持可讀性和準確性。此套件設計簡潔且精確,非常適合儀表板、資料卡片,以及任何空間有限但需強調清晰度的使用者介面。該套件可在所有主要平台運作,並能與 Flutter 應用程式無縫整合。

適用情境

  • 在緊湊的使用者介面中顯示大數字
  • 在儀表板中格式化指標
  • 優化資料卡中的空間
  • 有限區域內的即時數字更新
  • 建立響應式數字標籤

主要特色

  • 智慧型數字縮寫(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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。