搜索插件、代码仓与 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。