패키지, 저장소 및 앱 카테고리 검색

패키지 상세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

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.