[flutter] 플러터 커퍼티노 스테퍼를 이용한 스크롤 속도 조절 기능 구현하기

05 Dec 2023

flutter

플러터에서는 커퍼티노 디자인을 쉽게 구현할 수 있는 다양한 위젯들이 제공됩니다. 이번에는 커퍼티노 스테퍼(CupertinoStepper)를 이용하여 스크롤 속도 조절 기능을 구현해보겠습니다.

커퍼티노 스테퍼란?

커퍼티노 스테퍼는 iOS에서 카운터 값을 조절하는 UI 요소입니다. 일반적으로 값을 증가 또는 감소시킬 때 사용되며, 버튼을 클릭하거나 스와이프 제스처를 사용하여 값을 조절할 수 있습니다.

스크롤 속도 조절 기능 구현하기

먼저, CupertinoPageScaffold 위젯을 사용하여 앱의 기본 구조를 작성합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Scroll Speed Control'),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CupertinoStepper(
                value: 1,
                onChanged: (newValue) {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CupertinoStepper 위젯을 위젯 트리에 추가합니다. value 속성을 사용하여 현재 값을 설정하고, onChanged 콜백을 이용하여 값을 변경할 때의 동작을 지정합니다.
CupertinoStepper 위젯을 GestureDetector와 함께 사용하여 스크롤 제스처를 인식하도록 구현합니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  double scrollSpeed = 1;
  
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Scroll Speed Control'),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onHorizontalDragUpdate: (DragUpdateDetails details) {
                  if (details.primaryDelta != null) {
                    scrollSpeed += details.primaryDelta * 0.01;
                  }
                },
                child: CupertinoStepper(
                  value: scrollSpeed,
                  onChanged: (newValue) {
                    scrollSpeed = newValue;
                  },
                ),
              ),
              Text('Scroll Speed: $scrollSpeed'),
            ],
          ),
        ),
      ),
    );
  }
}

마지막으로, Text 위젯을 추가하여 현재 스크롤 속도를 표시합니다.

마무리

이제 플러터 커퍼티노 스테퍼를 이용하여 스크롤 속도 조절 기능을 구현하는 방법을 알아보았습니다. 커퍼티노 디자인을 쉽게 적용할 수 있으며, 다양한 UI 요소를 효과적으로 구현할 수 있습니다.

더 자세한 내용은 플러터 공식 문서를 참조하시기 바랍니다.