[flutter] 플러터 커퍼티노 스테퍼의 값 변경 이벤트 처리하기

05 Dec 2023

flutter

플러터(Cupertino)는 iOS 스타일의 UI를 구현하기 위한 프레임워크입니다. 플러터에서 제공하는 커퍼티노 스테퍼(Cupertino Stepper)는 iOS의 스테퍼를 흉내내는 위젯으로, 값을 증가 또는 감소시킬 수 있는 기능을 제공합니다. 이번 포스트에서는 플러터 커퍼티노 스테퍼의 값 변경 이벤트 처리 방법에 대해 알아보겠습니다.

스테퍼 위젯 생성하기

먼저, 플러터 커퍼티노 스테퍼를 생성하는 방법에 대해 알아보겠습니다. 아래의 예제 코드는 플러터 앱의 상태를 관리하는 StatefulWidget 클래스 내부에 스테퍼 위젯을 생성하여 보여주는 예제입니다.

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

class MyStepperApp extends StatefulWidget {
  @override
  _MyStepperAppState createState() => _MyStepperAppState();
}

class _MyStepperAppState extends State<MyStepperApp> {
  double _value = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Stepper Example'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Value: $_value',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            CupertinoStepper(
              value: _value,
              onChanged: (newValue) {
                setState(() {
                  _value = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: MyStepperApp(),
    );
  }
}

위 예제 코드에서는 _value라는 변수로 스테퍼의 현재 값이 유지되도록 하고 있습니다. 스테퍼 위젯의 onChanged 콜백 함수를 통해 값의 변경 이벤트를 처리하고, setState 메소드를 호출하여 상태를 갱신합니다.

값 변경 이벤트 처리하기

스테퍼의 값이 변경되었을 때 호출되는 onChanged 콜백 함수를 작성하여 값을 처리할 수 있습니다. 위 예제 코드에서는 _value 변수에 새로운 값을 할당하고, setState 메소드를 호출하여 UI를 다시 렌더링합니다.

CupertinoStepper(
  value: _value,
  onChanged: (newValue) {
    setState(() {
      _value = newValue;
    });
  },
),

위 예제에서는 스테퍼 위젯의 value 속성에 _value 변수를 바인딩했고, onChanged 속성에는 새로운 값을 받아 _value 변수에 할당하는 콜백 함수를 작성했습니다. 이를 통해 스테퍼의 값이 변경될 때마다 _value 변수가 갱신되고, UI가 다시 그려져 새로운 값이 표시됩니다.

마무리

이번 포스트에서는 플러터에서 커퍼티노 스테퍼의 값 변경 이벤트 처리하기에 대해 알아보았습니다. 위 예제 코드를 참고하여 플러터 앱에서 스테퍼의 값을 적절하게 처리해보세요. 플러터의 다양한 위젯을 활용하여 보다 유연하고 사용자 친화적인 앱을 개발할 수 있습니다.