[flutter] 플러터 커퍼티노 스테퍼의 값에 따라 화면 갱신하기

05 Dec 2023

flutter

플러터는 디자인을 위해 iOS의 네이티브 컴포넌트를 사용할 수 있는 Cupertino 패키지를 제공합니다. Cupertino 패키지에서 제공하는 CupertinoStepper 위젯은 iOS의 스테퍼 컨트롤을 구현할 수 있는 기능을 제공합니다. 이번 글에서는 CupertinoStepper의 값을 사용하여 화면을 동적으로 갱신하는 방법에 대해 알아보겠습니다.

1. CupertinoStepper 사용하기

먼저 CupertinoStepper를 사용하기 위해서는 Cupertino 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  
  cupertino_icons: ^1.0.4

이제 CupertinoStepper를 사용하는 코드를 작성해보겠습니다.

import 'package:flutter/cupertino.dart';

class MyStepperScreen extends StatefulWidget {
  @override
  _MyStepperScreenState createState() => _MyStepperScreenState();
}

class _MyStepperScreenState extends State<MyStepperScreen> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoStepper(
      value: _value,
      onChanged: (newValue) {
        setState(() {
          _value = newValue;
        });
      },
    );
  }
}

위의 코드에서는 MyStepperScreen 클래스가 StatefulWidget을 상속하는데, StatefulWidget을 사용하는 이유는 화면을 갱신할 수 있는 상태를 가질 수 있기 때문입니다. CupertinoStepper 위젯의 value 속성은 스테퍼의 현재 값을 가지고 있으며, onChanged 속성은 값이 변경될 때마다 호출되는 콜백 함수입니다. onChanged 콜백 함수에서는 화면을 갱신하기 위해 setState() 함수를 호출하여 상태를 업데이트 합니다.

2. 화면 갱신하기

이제 스테퍼의 값을 사용하여 화면을 동적으로 갱신하는 예제를 살펴보겠습니다. 예제에서는 CupertinoActivityIndicator 위젯을 사용하여 화면을 갱신하도록 구현합니다.

import 'package:flutter/cupertino.dart';

class MyStepperScreen extends StatefulWidget {
  @override
  _MyStepperScreenState createState() => _MyStepperScreenState();
}

class _MyStepperScreenState extends State<MyStepperScreen> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CupertinoStepper(
          value: _value,
          onChanged: (newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
        SizedBox(height: 20),
        CupertinoActivityIndicator(
          radius: _value * 10,
        )
      ],
    );
  }
}

위의 코드에서는 Column 위젯을 사용하여 인디케이터를 CupertinoStepper 아래에 배치합니다. CupertinoActivityIndicator 위젯의 radius 속성을 스테퍼의 값에 따라 동적으로 변경하도록 구현했습니다. 따라서 스테퍼 값을 조절할 때마다 인디케이터의 크기도 변경됩니다.

마무리

이제 플러터의 CupertinoStepper를 사용하여 값을 조절하고, 이를 통해 화면을 동적으로 갱신하는 방법에 대해 알아보았습니다. Cupertino 패키지는 iOS 네이티브 컴포넌트를 사용할 수 있게 해주므로, iOS 스타일의 앱을 개발할 때 유용하게 사용할 수 있습니다. 다양한 속성을 활용하여 자신만의 독특한 디자인을 구현해보세요!