[flutter] 플러터 커퍼티노 스테퍼의 현재 값을 다른 Widget에 전달하기

플러터(Flutter)에서는 사용자 인터페이스를 빌드하기 위해 다양한 위젯을 사용합니다. 그 중에서도 커퍼티노 스테퍼(Cupertino Stepper)는 사용자로부터 값을 입력받을 때 많이 사용됩니다. 이번에는 커퍼티노 스테퍼에서 현재 값을 다른 위젯에 전달하는 방법에 대해 알아보겠습니다.

1. 커퍼티노 스테퍼 생성하기

먼저, 커퍼티노 스테퍼를 만들어야 합니다. 다음은 CupertinoStepper 위젯을 사용하여 커퍼티노 스테퍼를 생성하는 예시입니다.

double currentValue = 0;

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

위 코드에서 currentValue 변수는 현재 스테퍼의 값을 저장하기 위한 변수입니다. value 속성을 통해 현재 값을 설정하고, onChanged 콜백을 통해 값이 변경되었을 때 currentValue를 업데이트합니다.

2. 값을 전달할 위젯 생성하기

커퍼티노 스테퍼의 값이 변경되었을 때 이 값을 다른 위젯에 전달하기 위해, 값을 전달할 위젯을 생성해야 합니다. 이를 위해 ValueListenableBuilder 위젯을 사용할 수 있습니다. 다음은 ValueListenableBuilder를 사용하여 값을 전달할 위젯을 생성하는 예시입니다.

ValueListenableBuilder<double>(
  valueListenable: currentValue,
  builder: (context, value, child) {
    return Text('현재 값: $value');
  },
)

위 코드에서 valueListenable 속성에 currentValue를 전달하여 값의 변화를 감지합니다. 값이 변할 때마다 builder 함수가 호출되며, 이 함수에서는 전달받은 값을 이용하여 원하는 동작을 수행합니다. 위 예시에서는 현재 값을 출력하는 Text 위젯을 반환합니다.

3. 전달할 위젯에 값 전달하기

위에서 생성한 전달할 위젯에서는 ValueListenableBuilder를 통해 커퍼티노 스테퍼의 값을 받아올 수 있습니다. 다음은 전달받은 값을 이용하여 다른 동작을 수행하는 예시입니다.

ValueListenableBuilder<double>(
  valueListenable: currentValue,
  builder: (context, value, child) {
    // value 변수를 이용하여 다른 동작 수행
    return RaisedButton(
      onPressed: () {
        // value 변수를 이용하여 다른 동작 수행
        print('현재 값: $value');
      },
      child: Text('현재 값 출력'),
    );
  },
)

위 코드에서는 RaisedButton을 생성하고, 버튼을 눌렀을 때 현재 값(value)을 출력하도록 설정하였습니다.

위와 같은 방법을 사용하면 커퍼티노 스테퍼의 현재 값을 다른 위젯에 전달할 수 있습니다.

결론

이번 포스트에서는 플러터 커퍼티노 스테퍼의 현재 값을 다른 위젯에 전달하는 방법을 알아보았습니다. CupertinoStepper를 이용하여 값을 입력받은 후, ValueListenableBuilder를 이용하여 값을 전달받는 위젯을 생성하는 방법을 사용할 수 있습니다. 이를 통해 플러터 앱에서 사용자로부터 값을 입력받고, 이 값을 다른 위젯에 전달하여 다양한 동작을 수행할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참고하세요.