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 CoTracker(
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 CoTracker(
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)#
CoTracker(
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'),
],
)
CoTracker(
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 | 모서리 둥글기 적용 |
itemHeight |
double? |
32px |
세그먼트 높이 |
gap | double? | 2px | 세그먼트 간 간격 |
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 |
|---|---|---|
| 클래스명 | CoTracker | CoTracker |
| 렌더링 | Row + Expanded + Container |
div flex + flex-1 |
| 둥글기 | ClipRRect + radiusField |
CSS rounded-${CoreRadius.scale.field} |
| 툴팁 | InstantTooltip 위젯 | HTML title attribute |