[flutter] 플러터 커퍼티노 스테퍼를 이용한 택스트 사이즈 조절 기능 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로, iOS의 UIKit과 유사한 디자인 요소를 제공합니다. 이 중 커퍼티노 스타일의 스테퍼(Cupertino Stepper)는 iOS 앱에 익숙한 사용자에게 친숙한 UI 요소입니다.

이번 블로그 포스트에서는 플러터의 커퍼티노 스테퍼를 이용하여 텍스트 사이즈를 동적으로 조절하는 기능을 구현하는 방법을 알아보겠습니다.

1. 커퍼티노 스테퍼를 추가하기 위한 패키지 import하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해주세요. 예를 들면:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

그리고 해당 스크린에서 import 'package:flutter/cupertino.dart'; 문을 추가해주세요.

2. 스테퍼 위젯을 생성하기

다음으로, 사이즈를 조절할 텍스트를 위한 스테퍼 위젯을 생성해야 합니다.

double _textSize = 20.0;

CupertinoStepper(
  value: _textSize,
  onChanged: (newValue) {
    setState(() {
      _textSize = newValue;
    });
  },
  min: 10.0,
  max: 30.0,
  step: 2.0,
  // 스타일은 필요에 따라 설정하세요.
  // 또한, 아이콘은 `cupertino_icons` 패키지를 사용할 수 있습니다.
  icons: const <CupertinoButtonData, IconData>{
    CupertinoButtonData(minus: CupertinoIcons.minus_circled),
    CupertinoButtonData(plus: CupertinoIcons.plus_circled),
  },
);

여기에서 value는 스테퍼의 현재 값을 나타내고, onChanged는 사용자가 스테퍼를 조작하여 값을 변경했을 때 호출되는 콜백 함수입니다. min과 max는 스테퍼의 최소값과 최대값을 나타내며, step은 스테퍼를 조작할 때 변경되는 간격을 나타냅니다.

3. 동적으로 텍스트 사이즈 조절하기

텍스트 위젯의 사이즈를 동적으로 조절하기 위해 텍스트 스타일을 업데이트해야 합니다.

Text(
  '텍스트 예시',
  style: TextStyle(fontSize: _textSize),
);

위의 예시에서는 _textSize 변수를 사용하여 텍스트의 글꼴 크기를 동적으로 조절합니다.

이제 앱을 실행하고 스테퍼를 조작하여 텍스트 사이즈가 변경되는지 확인할 수 있습니다.

결론

플러터의 커퍼티노 스테퍼를 이용하여 텍스트 사이즈를 동적으로 조절하는 기능을 구현하는 방법을 알아보았습니다. 설정된 값을 활용하여 다양한 UI 요소에 적용할 수 있으니 참고해보세요.