Tracker#
여러 세그먼트로 구성된 상태를 색상으로 시각화하는 컴포넌트입니다. 업타임 모니터링, 습관 추적, 스트릭 표시 등에 활용됩니다.
Live Preview#
Web
Flutter
Loading Flutter...
class TrackerDefaultExample extends StatefulComponent {
const TrackerDefaultExample({super.key});
@override
State<TrackerDefaultExample> createState() => _TrackerDefaultExampleState();
}
class _TrackerDefaultExampleState extends State<TrackerDefaultExample> {
@override
Component build(BuildContext context) {
return Tracker(
segments: [
CoreTrackerSegment(status: CoreTrackerStatus.fine, tooltip: 'OK'),
CoreTrackerSegment(status: CoreTrackerStatus.warning, tooltip: 'Slow'),
CoreTrackerSegment(status: CoreTrackerStatus.critical, tooltip: 'Down'),
],
);
}
}class TrackerDefaultExample extends StatefulWidget {
const TrackerDefaultExample({super.key});
@override
State<TrackerDefaultExample> createState() => _TrackerDefaultExampleState();
}
class _TrackerDefaultExampleState extends State<TrackerDefaultExample> {
@override
Widget build(BuildContext context) {
return Tracker(
segments: [
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.warning),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.critical),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.unknown),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.warning),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
CoreTrackerSegment(status: CoreTrackerStatus.fine),
],
);
}
}사용 시기 (When to Use)#
이 컴포넌트를 사용하세요:
- 서비스 업타임/다운타임 이력을 색상 바로 표시할 때
- 습관 추적, 스트릭, 연속 기록을 시각화할 때
대신 다른 컴포넌트를 사용하세요:
Progress: 단일 진행률 표시Stat: 숫자 기반 통계 표시
기본 사용법 (Basic Usage)#
Tracker(
segments: [
CoreTrackerSegment(status: CoreTrackerStatus.fine, tooltip: 'OK'),
CoreTrackerSegment(status: CoreTrackerStatus.warning, tooltip: 'Slow'),
CoreTrackerSegment(status: CoreTrackerStatus.critical, tooltip: 'Down'),
CoreTrackerSegment(status: CoreTrackerStatus.unknown, tooltip: 'N/A'),
],
)
Tracker(
segments: [
CoreTrackerSegment(status: CoreTrackerStatus.fine, tooltip: 'OK'),
CoreTrackerSegment(status: CoreTrackerStatus.warning, tooltip: 'Slow'),
CoreTrackerSegment(status: CoreTrackerStatus.critical, tooltip: 'Down'),
CoreTrackerSegment(status: CoreTrackerStatus.unknown, tooltip: 'N/A'),
],
)
Props / Parameters#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
segments |
List<CoreTrackerSegment> |
필수 | 세그먼트 데이터 목록 |
rounded | bool | true | 모서리 둥글기 적용 |
trackerStyle |
CoreTrackerStyle? |
null |
인스턴스 chrome/dimensional override |
CoreTrackerStyle#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
itemHeight |
double? |
32px |
세그먼트 높이 |
itemSpacing |
double? |
2px |
세그먼트 간 균등 분포 간격 (Flutter Row.spacing / Web flex gap) |
CoreTrackerSegment#
| 속성 | 타입 | 설명 |
|---|---|---|
status |
CoreTrackerStatus |
상태 (fine, warning, critical, unknown) |
tooltip | String? | 호버 시 툴팁 텍스트 |
CoreTrackerStatus 색상#
| 상태 | 색상 |
|---|---|
fine | success (green) |
warning | warning (orange) |
critical | error (red) |
unknown | outlineVariant (gray) |
크로스 플랫폼 차이점 (Platform Differences)#
| 항목 | Flutter | Web |
|---|---|---|
| 클래스명 | Tracker | Tracker |
| 렌더링 | Row + Expanded + Container |
<div> flex + flex-1 |
| 둥글기 | BorderRadius.horizontal + theme.radiusField |
rounded-l-${radius}
/
rounded-r-${radius}
(
CoreTrackerTokens.endRadius
)
|
| 툴팁 | Tooltip 위젯 | Tooltip 컴포넌트 |
| 상태 → 색상 | CoreTrackerTokens → colorScheme.resolve(...) |
CoreTrackerTokens → bg-${token} Tailwind |