플러터에서 Gauge Indicator 패키지 사용법: 쉬운 튜토리얼과 옵션 설명

 

오늘은 플러터 앱 개발자라면 꼭 알아야 할 멋진 패키지, gauge_indicator를 소개하려고 합니다.

이 패키지는 앱에서 게이지 스타일의 인디케이터를 쉽게 구현할 수 있게 도와줍니다.

초보자도 쉽게 따라 할 수 있는 방법으로, gauge_indicator의 기본 사용법부터 다양한 옵션에 대해 알아볼까요?

Gauge Indicator란?

Gauge Indicator는 원형 게이지와 같은 시각적 요소를 사용하여 데이터를 표현할 수 있는 플러터 패키지입니다.

특히, 프로그레스 바, 게이지 지침, 축 스타일 등을 쉽게 커스터마이징 할 수 있어, 다양한 애플리케이션에 적합합니다.

기본 사용법

1. 패키지 설치: 먼저, pubspec.yaml 파일에 gauge_indicator 패키지를 추가하세요.

dependencies:
  gauge_indicator: ^0.4.3

 

이후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

 

2. 기본 구현: 다음은 가장 기본적인 게이지를 구현하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:gauge_indicator/gauge_indicator.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedRadialGauge(
            value: 50,  // 게이지 값 설정
            axis: GaugeAxis(
              min: 0, max: 100,  // 최소 및 최대 값 설정
              style: GaugeAxisStyle(
                thickness: 20,
                background: Color(0xFFE0E0E0),
              ),
              pointer: GaugePointer.needle(
                size: Size(16, 100),
                borderRadius: 16,
                backgroundColor: Colors.blue,
              ),
              progressBar: GaugeProgressBar.rounded(
                color: Colors.green,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

이 코드에서는 AnimatedRadialGauge 위젯을 사용하여 게이지를 구현하였습니다.

value 속성으로 게이지의 현재 값을 설정하고, axis를 통해 축의 스타일을 지정할 수 있습니다.

고급 옵션

1. 축 스타일 커스터마이징:

• thickness: 축의 두께를 설정합니다.
• background: 축의 배경 색상을 설정합니다.

2. 포인터 스타일:

• GaugePointer.needle: 바늘 스타일의 포인터를 사용합니다.
• GaugePointer.dash: 대시 스타일의 포인터도 설정할 수 있습니다.

3. 프로그레스 바 스타일:

• GaugeProgressBar.rounded: 둥근 모서리를 가진 프로그레스 바입니다.
• GaugeProgressBar.straight: 직선 모서리의 프로그레스 바도 가능합니다.

4. 세그먼트 추가: 여러 색상의 세그먼트를 추가하여 게이지를 더욱 상세하게 표현할 수 있습니다.

segments: [
  GaugeSegment(from: 0, to: 50, color: Colors.green),
  GaugeSegment(from: 50, to: 100, color: Colors.red),
]

결론

이제 gauge_indicator 패키지를 사용하여 다양한 스타일의 게이지를 구현할 수 있게 되었습니다!

이 패키지는 직관적이고 사용하기 쉬워 초보자에게도 적합하며, 커스터마이징 옵션이 풍부하여 다양한 요구 사항을 충족할 수 있습니다.

앞으로 더 많은 프로젝트에서 이 패키지를 활용해 보세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱