[flutter] getX 함수를 사용하여 터치 이벤트에 따른 원형 프로그레스바 구현하기

04 Dec 2023

flutter

이번에는 Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 원형 프로그레스바를 구현하는 방법을 알아보겠습니다.

getX 패키지 소개

getX는 Flutter 애플리케이션의 상태 관리를 단순화하기 위해 개발된 패키지입니다. getX를 사용하면 상태 관리 및 라우팅을 간편하게 처리할 수 있습니다.

원형 프로그레스바 구현하기

이제 getX를 사용하여 터치 이벤트에 따른 원형 프로그레스바를 구현해보겠습니다.

먼저, getX를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  getX: ^3.15.0

다음으로, main.dart 파일에서 필요한 패키지와 클래스를 가져옵니다:

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

프로그레스바를 표시할 화면을 구현합니다. CircularProgressPage라는 StatefulWidget를 생성하고, 다음과 같이 화면을 구성합니다:

class CircularProgressPage extends StatefulWidget {
  @override
  _CircularProgressPageState createState() => _CircularProgressPageState();
}

class _CircularProgressPageState extends State<CircularProgressPage> {
  double progress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circular Progress Bar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(
              value: progress,
            ),
            SizedBox(height: 16.0),
            Text('Progress: ${progress.toStringAsFixed(2)}'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          updateProgress(); // 프로그레스 업데이트 함수 호출
        },
        child: Icon(Icons.refresh),
      ),
    );
  }

  void updateProgress() {
    setState(() {
      progress += 0.1;
      if (progress > 1.0) {
        progress = 0.0;
      }
    });
  }
}

애플리케이션의 진입점인 main() 함수에서 runApp() 함수를 사용하여 앱을 실행합니다. 앱의 시작 화면으로 CircularProgressPage를 지정합니다:

void main() {
  runApp(GetMaterialApp(
    home: CircularProgressPage(),
  ));
}

이제 앱을 실행하여 터치 이벤트에 따라 원형 프로그레스바가 업데이트되는지 확인해보세요.

이렇게 getX를 사용하여 터치 이벤트에 따른 원형 프로그레스바를 구현할 수 있습니다. getX의 간편한 상태 관리 기능을 활용하여 애플리케이션의 다양한 기능을 구현해보세요.

더 자세한 내용은 GetX 공식 문서를 참고하시기 바랍니다.

References:

GetX 공식 문서